jQuery UIでタブを追加

jQuery UIのタブ&パネルウィジェット

生産管理システムでは部品構成表(BOM)の設定が不可欠ですが、親子関係の追加はグリッド表示画面から行うとしても、設定が正しいかどうかのチェックはツリー表示で視覚的に行うことができれば便利です。しかもグリッド表示とツリー表示は画面を切り替えることなくタブの切り替えで素早く実現できればユーザビリティは間違いなく向上します。

これはERPの部門マスタの統括部門とコストセンターの関係を視覚的に表示するのにも使えると思います。

タブ(パネルとセット)を追加するには以下の2つを実装すれば実現できそうです。

  1. タブ&パネルを追加する関数を作成
  2. onClickイベントでタブタイトルと表示させる内容のURLの2つを引数として呼び出す。

肝心の「タブを追加する関数」はjQueryと、jQuery UIにあるTabsウィジェットを呼び出すことで実現できます。jQueryはアプリケーションを操作するJavaScriptのライブラリで、頻繁に使う機能を関数として集約しておりJavaScript上で動きます。

jQUeryとjQuery UIライブラリの呼び出し

まずheadタグの中でjQueryライブラリとjQuery用のUIライブラリ(インターフェースデザイン用ライブラリ)であるjQuery UIを読み込む必要がありますが、jQuery UIはライブラリ本体とスタイルシートを読み込む必要があります。

<head>
//jQuery EasyUI用のスタイルシート
<link rel="stylesheet" type="text/css" href="jquery_easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery_easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="jquery_easyui/themes/panel.css" />

//jQueryとjQuery EasyUIライブラリ本体
<script type="text/javascript" src="jquery_easyui/jquery.min.js"></script>
<script type="text/javascript" src="jquery_easyui/jquery.easyui.min.js"></script>
</head>

タブとパネルの実装

タブを表示する関数ですが、引数としてタブのタイトルとパネルに表示するコンテンツのURLを、イベントの発生元であるリンクやボタンなどに仕込みます。またTabsウィジェットのclosableオプションにtureをセットすることで、タブが閉じるボタン付きになります。

<script>
function addTab(title, url){
	if ($('#tt').tabs('exists', title)){
		$('#tt').tabs('select', title);
	} else {
		var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
                //var content = url;
		$('#tt').tabs('add',{
			title:title,
			content:content,
			closable:true
			});
	}
}
</script>

あとはリンク元のonClickイベントにタイトルとURLを引数として仕込みむだけです。

<a href="#" class="easyui-linkbutton" iconCls="icon-user" plain="true" onClick="addTab('Drilldown BOM','jstree/yama.php')">Drilldown BOM</a><br />
<a href="#" class="easyui-linkbutton" iconCls="icon-box-fill" plain="true" onClick="addTab('Integrated Master','jstree/integrated.php')">Integrated Master</a>

出来上がりはこんな感じ。ツリー表示は「再帰処理でHTMLリスト化しjsTreeでツリー表示」で実現し、グリッドもjQuery UIのGridプラグインで実現できます。

tabs & panel