コンテンツへスキップ

hifiveのUIコンポーネント紹介「タブ切り替え」

by : 2017/12/15

hifiveは業務システム開発用とあって、Bootstrapと組み合わせて使われることが多いのですが、Bootstrap側の制限が動作に影響を及ぼしてしまうことがあります。その一つとして今回はタブ切り替えを行うUIをhifive風に実装する方法を紹介します。

今回のデモはこちらにあります。

使い方

HTMLの記述

HTML側の記述は次のようになります。特徴としてはBootstrap標準ではidを使わなければならないところをクラスだけで指定しているところが異なります。

<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>

view raw
index.html
hosted with ❤ by GitHub

JavaScriptの記述

そしてJavaScriptはタブをクリックした際のイベントを取得して、コンテンツの表示/非表示を切り替えます。

$(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);
});
});

view raw
index.js
hosted with ❤ by GitHub

さらにタブのグループ毎にコントローラを適用することで、各タブを独立させた状態で扱えるようになります。

$('.tabbable').each(function() {
h5.core.controller(this, tabbableController);
});

view raw
index.js
hosted with ❤ by GitHub


この方法であればBootstrapのJavaScriptを使わずにタブ機能が実装できます。Bootstrapは便利なライブラリですが制約も多くなっていますので、カスタマイズしやすい形を目指すのであればこうした実装がお勧めです。

タブ切り替え

From → hifive

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

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