読者です 読者をやめる 読者になる 読者になる

Taste of Tech Topics

Acroquest Technology株式会社のエンジニアが書く技術ブログ

WGPの使い方(第3回:タブ)

WGP


みなさん、こんばんは。
fujiiです。

前回に引き続き、WGPの使い方を説明します。

今回説明するのは、タブの作り方です。

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, {});

最後に

今回は、タブにテキストのみを表示しましたが、
タブの中には、テーブルやグラフなど、任意のコンポーネントを表示することもできます。

色々なコンポーネントと組み合わせて、利用してみてください。

広告を非表示にする