みなさん、こんばんは。
fujiiです。
今回説明するのは、タブの作り方です。
WGPでは、jQuery UIのタブを内包しており、
Backbone.jsと組み合わせて利用します。
これによって、タブについても、モデルとビューに分離して、
作成することができます。
基本的な考え方
タブを生成するためには、以下を生成する必要があります。
1.タブの表示内容の定義
2.各タブのモデル・ビュー定義
3.メインとなるタブのモデル・ビュー定義
それでは、早速、説明します。
タブの表示内容の定義
まずは、タブの表示内容を定義します。
<div id="tab1"> 1つ目のタブです。 </div> <div id="tab2"> 2つ目のタブです。 </div>
各divタグの配下には、タブ内に表示する任意のHTMLを設定することが可能です。
今回は説明のために、テキストのみを切り替えるタブを表示したいと思います。
各タブのモデル・ビュー定義
次に、各タブのモデルから定義します。
user.tabModel1 = {
viewClassName : "user.tabView1",
tabTitle : "タブ1",
collection : {
targetId : "tab1"
}
};
user.tabModel2 = {
viewClassName : "user.tabView2",
tabTitle : "タブ2",
collection : {
targetId : "tab2"
}
};
各モデルに行う定義は以下となります。
viewClassName : 各タブのビュークラス名。必須項目です。
tabTitle ： タブのヘッダに表示するタイトル。
collection ： 各ビューに渡すパラメータ。任意のオブジェクトを渡すことができる。
それでは、ビューの定義を行います。
user.tabView1 = wgp.AbstractView.extend({
initialize : function(argument, settings)
{
// jQuery-uiタブ定義に合わせて、構成を変更させる。
var collection = argument.collection;
var targetId = collection.targetId;
var targetTag = $('#' + targetId);
$('#' + argument.id).append(targetTag);
}
});
initializeには、ビュー生成時に呼び出される初期化処理を定義します。
タブの描画には、jQuery UIのタブを使用するため、
jQuery UIのタブに合わせ、タグ構成を設定しています。
ここは今後の改善ポイントですかね。
tabView2 も同じように作ってください。
メインとなるタブのモデル・ビュー定義
メインのタブのモデルを定義を行います。
user.tabViewElement = {
id : "contents_area",
collection : [ user.tabModel1, user.tabModel2 ]
};
id属性は、タブを表示する領域のIDを指定します。
collection属性には、各タブのモデルを設定します。
最後に、メインのタブビューを定義すれば、完了です。
var tabView = new wgp.TabView(user.tabViewElement, {});
