SQLの窓

2013年11月22日


jQuery で Google Visualization DataTable Class をプラグイン化

ここまですれば、わりと誰でも扱えるかと思います。ただ順序が決まっていて、draw は最後でなくては動作しません。

できるだけ簡単にする為に、行を追加した場合内部にカレント行を保存しています。その為、汎用的な gvt_setRowCell メソッドを追加実装しています。

まだ、Google ドキュメントや、グラフの実装もあるので、このプラグイン方法がいいかはまだ解りませんが、一覧形式で取り出せるオブジェクトをテーブル化するのは簡単にできるようになるはずです。
<style>
#table_area .google-visualization-table-table {
	border-collapse: collapse;
}
.myHeader {
	color:#FFFFFF;
	background: #000000;
	padding: 7px;
	border: solid #303030 1px;
}
.myCell {
	padding: 7px;
	border: solid #303030 1px;
}
</style>

<script>
if ( window[window.location.hostname+'.loadjQuery'] !== true ) {
	window[window.location.hostname+'.loadjQuery'] = true;
	if ( !window.jQuery ) {
		document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");
	}
	document.write("<"+"script src=\"http://www.google.com/jsapi\"></"+"script>");
}
</script>
<script>
google.load('visualization', '1', { packages: ['table'] });

$.fn.extend({
	gvt: function() {
		$(this).data("DataTable", new google.visualization.DataTable());
		return this;
	},
	gvt_addColumn: function(title){
		$(this).data("DataTable").addColumn('string', title);
		return this;
	},
	gvt_addRow: function(){
		$(this).data("CurRow", $(this).data("DataTable").addRow() );
		return this;
	},
	gvt_setCell: function(col, data){
		$(this).data("DataTable").setCell($(this).data("CurRow"), col, data+"" );
		return this;
	},
	gvt_setRowCell: function(row, col, data){
		$(this).data("DataTable").setCell(row, col, data+"" );
		return this;
	},
	gvt_draw: function(width){
		var visualization = new google.visualization.Table($(this)[0]);
		visualization.draw($(this).data("DataTable"), {
			cssClassNames: {
				tableCell: 'myCell',
				headerCell: 'myHeader'
			},
			width: width+"px"
		});
		return this;
	}
});

$(function(){

	$("#table_area")
	.gvt()
	.gvt_addColumn('プロパティ')
	.gvt_addColumn('内容');

	var row;
	for (var key in window.navigator) {
		$("#table_area")
		.gvt_addRow()
		.gvt_setCell(0,key)
		.gvt_setCell(1,window.navigator[key]);
	}

	$("#table_area").gvt_draw(600);

});

</script>
<div id="table_area"></div>
関連する記事

jQuery でとりあえず実装する Google Visualization DataTable Class ( 後でプラグイン化予定 )



posted by at 00:20 | jQuery | このブログの読者になる | 更新情報をチェックする


2013年11月21日


jQuery でとりあえず実装する Google Visualization DataTable Class ( 後でプラグイン化予定 )

たぶん全くはやらない  Google Visualization ですが、ただデータをテーブル表示したいだけならこんなにいいものは無いと思うのですが。( しかも Google ドキュメント参照できるんですよ )
<style>
#table_area .google-visualization-table-table {
	border-collapse: collapse;
}
.myHeader {
	color:#FFFFFF;
	background: #000000;
	padding: 7px;
	border: solid #303030 1px;
}
.myCell {
	padding: 7px;
	border: solid #303030 1px;
}
</style>

<script>
if ( window[window.location.hostname+'.loadjQuery'] !== true ) {
	window[window.location.hostname+'.loadjQuery'] = true;
	if ( !window.jQuery ) {
		document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");
	}
	document.write("<"+"script src=\"http://www.google.com/jsapi\"></"+"script>");
}
</script>
<script>
google.load('visualization', '1', { packages: ['table'] });
$(function(){
	var data;
	var visualization;

	data = new google.visualization.DataTable();

	data.addColumn('string', 'プロパティ');
	data.addColumn('string', '内容');

	var row = 0;
	for (var key in window.navigator) {
		data.addRow();
		data.setCell(row, 0, key+"" );
		data.setCell(row, 1, window.navigator[key]+"" );
		row++;
	}

	visualization = new google.visualization.Table($("#table_area")[0]);
	visualization.draw(data,		{
		cssClassNames: {
			tableCell: 'myCell',
			headerCell: 'myHeader'
		},
		width: '600px'
	});
});

</script>
<div id="table_area"></div>

▼ navigator オブジェクトのプロパテイの一覧です( タイトルクリックでソート )


posted by at 03:43 | Google | このブログの読者になる | 更新情報をチェックする


2013年11月18日


prototype.js の Browser メソッドを転用して jQueryの名前空間へ投入。IE バージョンも含めてブラウザ(仕様)判定

prototype.js の最終更新は、August 8, 2012 ですし、最新の jQuery では、IE8 より前は動かないでしようし、どこまでするかは非常に疑問ですが、方法として、こんな方法もあるという事です。

結局 jQuery の 名前空間内に変数追加している形です。チェックは変数を使って判断します。(変数追加も簡単だと思います)
<script>
if ( window[window.location.hostname+'.loadjQuery'] !== true ) {
	window[window.location.hostname+'.loadjQuery'] = true;
	if ( !window.jQuery ) {
		document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");
	}
}
</script>
<script>
$.extend({
	_ua: $(navigator)[0].userAgent,
	_app: $(navigator)[0].appVersion});
$.extend({
	Browser: (function(){
		var app = $._app.toLowerCase();
		var isOpera = Object.prototype.toString.call(window.opera) == '[object Opera]';
		var IE = $._ua.toLowerCase().indexOf("msie") > -1 && !isOpera;
		IE = IE || (app.indexOf("trident/") > -1);
		return {
			IE: IE,
			Opera: isOpera,
			WebKit: $._ua.indexOf('AppleWebKit/') > -1,
			Gecko: !IE && $._ua.indexOf('Gecko') > -1 && $._ua.indexOf('KHTML') === -1,
			MobileSafari: /Apple.*Mobile/.test($._ua),
			IE6: IE && app.indexOf("msie 6.0") > -1,
			IE7: IE && app.indexOf("msie 7.0") > -1,
			IE8: IE && app.indexOf("msie 8.0") > -1,
			IE9: IE && app.indexOf("msie 9.0") > -1,
			IE10: IE && app.indexOf("msie 10.0") > -1,
			IE11: app.indexOf("trident/7.0") > -1
		}
	})()
});

console.log($.Browser.Opera);
console.log($.Browser.WebKit);
console.log($.Browser.Gecko);
console.log($.Browser.MobileSafari);
console.log($.Browser.IE);
console.log($.Browser.IE6);
console.log($.Browser.IE7);
console.log($.Browser.IE8);
console.log($.Browser.IE9);
console.log($.Browser.IE10);
console.log($.Browser.IE11);
</script>
関連する記事

JS : ブラウザ判定( IE11 対応 )



posted by at 15:36 | JavaScript | このブログの読者になる | 更新情報をチェックする