hifiveとjQuery UIを組み合わせる【タブ表示】
hifiveは業務システム開発に特化しているのでjQuery UIやBootstrapと組み合わせて使われることが多くなっています。そこで今回はよく使われるライブラリについて、その組み合わせ方を紹介します。
今回はタブ表示です。
デモコードについて
実際に動作するデモはJSFiddleにアップロードしてあります。各タブをクリックするとその下にあるコンテンツが切り替わるのが確認できます。
HTMLについて
HTMLですが、各タブ（リスト）のリンク先にタブのIDを指定しています。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
JavaScriptについて
JavaScriptの実装は次のようになります。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(function() { | |
| var controller = { | |
| __name: 'TabsController', | |
| // 初期化処理 | |
| // タブが選択された時のコールバック | |
| }; | |
| // コントローラの作成と要素へのバインド. | |
| h5.core.controller('#tabs', controller); | |
| }); |
初期化処理について
初期化処理ではタブの表示処理を行います。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 初期化処理 | |
| __ready: function() { | |
| var that = this; | |
| // jQuery UI Tabsを設定 | |
| $(this.rootElement).tabs({ | |
| // タブが選択された時のコールバックを設定 | |
| // ownメソッドでラップしてイベントコンテキストやロジックを使えるようにしている。 | |
| select: that.own(that.selectTab) | |
| }); | |
| }, |
タブがクリックされた時の処理
タブがクリックされた際にコールバックが受け取れます。Ajax処理などを行ったりするのに使えます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // タブが選択された時のコールバック | |
| selectTab: function(event, ui) { | |
| $(ui.panel).html('tab' + (ui.index + 1) + 'が選択されました。'); | |
| } |
このように実装することでhifiveとjQuery UIのdialogをシームレスに連携させられるようになります。多くの情報を表示する際にタブは便利な機能なので、実装時の参考にしてください。
実際に動作するデモはJSFiddleにアップロードしてあります。こちらも合わせてご覧ください。
hifive開発者ブログ 
コメントは受け付けていません。