hifiveのUIコンポーネント紹介「タブ切り替え」
hifiveは業務システム開発用とあって、Bootstrapと組み合わせて使われることが多いのですが、Bootstrap側の制限が動作に影響を及ぼしてしまうことがあります。その一つとして今回はタブ切り替えを行うUIをhifive風に実装する方法を紹介します。
今回のデモはこちらにあります。
使い方
HTMLの記述
HTML側の記述は次のようになります。特徴としてはBootstrap標準では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 class="tabbable"> | |
| <ul class="nav nav-tabs"> | |
| <li class="active"><a href="#" data-tab-name="tab1" data-toggle="tab">Section 1</a></li> | |
| <li><a href="#" data-tab-name="tab2" data-toggle="tab">Section 2</a></li> | |
| </ul> | |
| <div class="tab-content"> | |
| <div class="tab-pane active" data-tab-name="tab1"> | |
| <p>I'm in Section 1.</p> | |
| </div> | |
| <div class="tab-pane" data-tab-name="tab2"> | |
| <p>Howdy, I'm in Section 2.</p> | |
| </div> | |
| </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 tabbableController = { | |
| __name: 'TabbableController', | |
| __ready: function() { | |
| }, | |
| '.nav-tabs a click': function(context) { | |
| context.event.preventDefault(); | |
| var cur = $(context.event.currentTarget); | |
| var tabName = cur.attr('data-tab-name'); | |
| var target = this.$find('[data-tab-name="' + tabName + '"]'); | |
| this.$find('.nav-tabs > *').removeClass('active'); | |
| cur.closest('.nav-tabs > *').addClass('active'); | |
| this.$find('.tab-pane').removeClass('active'); | |
| this.$find('.tab-pane').filter(target).addClass('active'); | |
| } | |
| }; | |
| $('.tabbable').each(function() { | |
| h5.core.controller(this, tabbableController); | |
| }); | |
| }); |
さらにタブのグループ毎にコントローラを適用することで、各タブを独立させた状態で扱えるようになります。
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
| $('.tabbable').each(function() { | |
| h5.core.controller(this, tabbableController); | |
| }); |
この方法であればBootstrapのJavaScriptを使わずにタブ機能が実装できます。Bootstrapは便利なライブラリですが制約も多くなっていますので、カスタマイズしやすい形を目指すのであればこうした実装がお勧めです。
hifive開発者ブログ 
コメントは受け付けていません。