コンテンツへスキップ

hifiveとjQuery UIを組み合わせる【タブ表示】

by : 2017/07/06

hifiveは業務システム開発に特化しているのでjQuery UIやBootstrapと組み合わせて使われることが多くなっています。そこで今回はよく使われるライブラリについて、その組み合わせ方を紹介します。

今回はタブ表示です。

デモコードについて

実際に動作するデモはJSFiddleにアップロードしてあります。各タブをクリックするとその下にあるコンテンツが切り替わるのが確認できます。

HTMLについて

HTMLですが、各タブ(リスト)のリンク先にタブのIDを指定しています。

<div id="tabs">
<ul>
<li><a href="#tabs-1">tab1</a></li>
<li><a href="#tabs-2">tab2</a></li>
<li><a href="#tabs-3">tab3</a></li>
</ul>
<div id="tabs-1">tab1</div>
<div id="tabs-2">tab2</div>
<div id="tabs-3">tab3</div>
</div>

view raw
gistfile1.txt
hosted with ❤ by GitHub

JavaScriptについて

JavaScriptの実装は次のようになります。

$(function() {
var controller = {
__name: 'TabsController',
// 初期化処理
// タブが選択された時のコールバック
};
// コントローラの作成と要素へのバインド.
h5.core.controller('#tabs', controller);
});

view raw
index.html
hosted with ❤ by GitHub

初期化処理について

初期化処理ではタブの表示処理を行います。

// 初期化処理
__ready: function() {
var that = this;
// jQuery UI Tabsを設定
$(this.rootElement).tabs({
// タブが選択された時のコールバックを設定
// ownメソッドでラップしてイベントコンテキストやロジックを使えるようにしている。
select: that.own(that.selectTab)
});
},

view raw
index.js
hosted with ❤ by GitHub

タブがクリックされた時の処理

タブがクリックされた際にコールバックが受け取れます。Ajax処理などを行ったりするのに使えます。

// タブが選択された時のコールバック
selectTab: function(event, ui) {
$(ui.panel).html('tab' + (ui.index + 1) + 'が選択されました。');
}

view raw
index.js
hosted with ❤ by GitHub


このように実装することでhifiveとjQuery UIのdialogをシームレスに連携させられるようになります。多くの情報を表示する際にタブは便利な機能なので、実装時の参考にしてください。

実際に動作するデモはJSFiddleにアップロードしてあります。こちらも合わせてご覧ください。

From → hifive

コメントは受け付けていません。

%d人のブロガーが「いいね」をつけました。