エフェクトの豊富なタブパネルを実装する（フェード切り替えなど）【jQuery連載05】
- カテゴリー jQuery活用サンプル
今回は、ベーシックでよく見るタブパネルの実装を行ってみます。切替時のアニメーションやマウスクリックやロールオーバーなどでの切り替えなどいくつかのバリエーションも作成してみました。また汎用性を考えてjQueryプラグインとして作成してみました。
少ないスペースを利用して多くの情報を掲載する際によく使われるタブパネルは、更新情報などでカテゴリー毎に掲載したり、複数の商品の紹介などに使うことができます。
今回作成したサンプル
サンプル1ではタブパネルの幅をテキストの量によって変わるものと幅を固定して一定のサイズにするサンプルを作り、サンプル2では切り替えをクリックとマウスオーバーによって切り替わるパターンと内容部分をフェオードアニメーションにしました。
【サンプル1】
タブパネルの幅をテキストのサイズによってと一定に固定させるサンプル
【サンプル2】
クリックやマウスオーバーでの切り替えやフェードアニメーションのサンプル
タブエリアのHTMの作成
タブの作成にはタブ部分にはリスト要素を使用して必要な数のタブを用意し、切り替えの際のidとclassを用意する。表示させる内容には、div要素内にarticle要素にレイアウト用のclassの領域内を常時内容としてそれぞれidを設定する。class内を切り替えするのでこちらのHTML内は表示したい内容を自由にレイアウトすることができます。
<section id="contentContainer" class="inner"> <h1 class="contentTitle">Tab Panel Sample</h1> <section id="tabContainer1" class="jQdmtab tabContainer"> <h2>Tab Pattern1 - Normal</h2> <ul class="controls"> <li><a href="#tab1_1">Balaeniceps rex</a></li> <li><a href="#tab1_2">Sumatran Tiger</a></li> <li><a href="#tab1_3">Lion</a></li> <li><a href="#tab1_4">Diceros bicornis</a></li> </ul> <div class="tabContentsContainer"> <article id="tab1_1" class="post"> <div class="entry-thumbnail"><img alt="" src="img/01.jpg"></div> <div class="entry-contentContainer"> <header class="entry-header"> <h1 class="entry-title">ハシビロコウ Balaeniceps rex</h1> </header> <div class="entry-content clearfix"> <p>エチオピア区の南スーダンからザンビアにかけての湿地に分布する。IUCNのレッドリストでは絶滅危惧II類に指定されており、ワシントン条約によって国際取引が規制されている。ハシビロコウ亜科は、ハシビロコウ1属1種のみ。</p> ・・・省略・・・ </div> </div> </article> <article id="tab1_2" class="post"> ・・・省略・・・ </div> </article> <article id="tab1_3" class="post"> ・・・省略・・・ </div> </article> <article id="tab1_4" class="post"> ・・・省略・・・ </div> </article> </div> </section> </section> <!-- フッター部分のソースコード --> <p class="pagetop inner"><a href="#wrapper">PAGE TOP</a></p>
タブボタンの幅について
サンプル1の上の作例ではタブ部分の見出しのテキスト内容によってタブの幅は自動的にサイズが伸びていくようになっています。
どのような文字量になっても自動的に幅が調整され同じデザインになるので便利ですが、タブの数があまりなく、テキストの文字量が違う場合はデザイン的にバラバラな感じがしていまいますのでCSSで設定することで統一感のあるタブを作ることもできるので使用する用途によって使いわけましょう。
.tabContainer .controls li {
display: inline-block;
word-wrap: break-word;
}
.tabContainer .controls li a {
display: block;
padding: 0.5em 1em;
background: #333;
color: #fff;
border-radius: 8px 8px 0 0 ;
behavior: url(PIE.htc);
}
.tabContainer .controls li.current a,
.tabContainer .controls li a:hover {
color: #333;
background: #f0f0f0;<img src="http://www.html5-memo.com/wp-content/uploads/2014/09/05_03.jpg" alt=" " width="547" height="573" class="alignnone size-full wp-image-6537" />
}
/* タブ固定幅 */
.tabContainer.tabWidthFixed .controls li {
width: 24%;
}
.tabContainer .tabContentsContainer>* {
position: relative;
top: 0;
left: 0;
width: 94%;
padding: 3%;
}
ただしスマートフォンなどモバイル環境の場合はウインドウサイズが小さいのでタブの数やテキスト文字数はある程度ルールを作って制限するとよいでしょう。
スマートフォンでは幅が狭いのでタブの数と文字数によっては改行されます。
タブの切り替えのJSを作成
今回のタブ機能を実装するJavascriptは、この要素に囲まれた箇所をタブ化するということが直感的にわかることや、オプションによって最初から開いているタブを指定できるようにするなどの使い勝手を考慮し、jQueryプラグインとして作成することにしました。
jQueryプラグイン作成と言っても、それほど難易度が高いものではなく一定の型に則って通常通りjQueryを記述すれば、それをプラグイン化することができます。
;(function(d,$){
// 変数のデフォルト値
var jQdmtab_defaults = {
tabContentsContainer: '.tabContentsContainer',
tabEventAction: 'click',
current: 0,
currentSelector: 'current',
};
$.fn.jQdmtab = function(options){
// 変数を設定
var defaults = jQdmtab_defaults;
var setting = $.extend( defaults, options);
var _$obj = $(this.get(0)),
_s = $.data( $(this), setting ),
_p = {
tabs: _$obj.find('li'),
tabCn: _$obj.find(_s.tabContentsContainer),
tabCnHeight: function(){
var _$cns = _p.tabCn.children(),
_len = _$cns.length,
_hi = 0;
while(_len > 0){
_hi = Math.max( _hi, _$cns.eq(--_len).height());
}
return _hi + 40;
},
current: _s.current
};
// ページ表示時に最初に設定したタブを開く
tabChangeCurrent(_p.current);
_p.tabCn.children().not(':eq('+ _p.current +')').css({
display: 'none',
opacity: 0
});
_p.tabCn.css({
position: 'relative',
overflow: 'hidden',
background: '#f0f0f0',
height: _p.tabCnHeight()
});
// タブにクリックイベントを追加
_p.tabs.on( _s.tabEventAction, function(e){
if(typeof e.preventDefault() === 'function') {
e.preventDefaut();
}
var _$t = $(this),
_index = _$t.index();
_current = _p.current;
if(_index != _current && !_p.isAnimate) {
hideTabContent(_current);
_p.current = _index;
showTabContent(_index);
}
});
// タブコンテンツの非表示処理
function hideTabContent(_current){
var _$target = _p.tabCn.children().eq(_current);
tabChangeCurrent(_current);
_$target.css({
left: 0,
opacity: 0,
display: 'none',
position: 'relative'
});
}
// タブコンテンツの表示処理
function showTabContent(_t){
var _$target = _p.tabCn.children().eq(_t);
tabChangeCurrent(_t);
_$target.css({
display: 'block',
position: 'relative',
opacity: 1
});
}
// クリックされたタブをカレント（現在）のタブに変更する
function tabChangeCurrent(_t){
_p.tabs.eq(_t).toggleClass(_s.currentSelector);
}
}
// オリジナルプラグインの有効化
// ノーマルタイプ
$('#tabContainer1').jQdmtab();
// オリジナルプラグインの有効化：ノーマルタイプ
// ノーマルタイプ、タブ幅固定タイプ
$('#tabContainer1a').jQdmtab();
}(document, jQuery));
タブの切り替え時にフェードアニメーションを設定
2つ目のサンプルは1つ目のサンプルを基本として、タブコンテンツ（タブの内容）の切り替え時にフェードイン・フェードアウトしながら表示・非表示させるのと、プラグイン呼び出し時に特定のプロパティを変更することで、タブの切り替えアクションを従来のマウスの「click」（クリック）から「mouseover, mousemove」（マウスオーバーとマウスムーブ）に、そして最初から開いているタブの位置の変更などをしてみます。
//script_fade.js
…省略…
var _$obj = $(this.get(0)),
_s = $.data( $(this), setting ),
_p = {
tabs: _$obj.find('li'),
tabCn: _$obj.find(_s.tabContentsContainer),
tabCnHeight: function(){
var _$cns = _p.tabCn.children(),
_len = _$cns.length,
_hi = 0;
while(_len > 0){
_hi = Math.max( _hi, _$cns.eq(--_len).height());
}
return _hi + 40;
},
current: _s.current,
isAnimate: false
};
…省略…
// タブコンテンツの非表示処理
function hideTabContent(_current){
var _$target = _p.tabCn.children().eq(_current);
_p.isAnimate = true;
tabChangeCurrent(_current);
_$target.css({
position: 'ablsolute'
}).animate({
opacity: 0
}, {
duration: 500,
complete: function(){
hideComplete(_$target);
}
});
function hideComplete(_$target){
_p.isAnimate = false;
_$target.css({
left: 0,
opacity: 0,
display: 'none',
position: 'relative'
});
}
}
// タブコンテンツの表示処理
function showTabContent(_t){
var _$target = _p.tabCn.children().eq(_t);
_p.isAnimate = true;
tabChangeCurrent(_t);
_$target.css({
display: 'block'
}).animate({
opacity: 1
}, {
duration: 500,
complete: function(){
showComplete(_$target);
}
});
function showComplete(_$target){
_p.isAnimate = false;
_$target.css({
display: 'block',
position: 'relative',
opacity: 1
});
}
}
// クリックされたタブをカレント（現在）のタブに変更する
function tabChangeCurrent(_t){
_p.tabs.eq(_t).toggleClass(_s.currentSelector);
}
}
// オリジナルプラグインの有効化
// クリック、フェードタイプ
$('#tabContainer2').jQdmtab();
// オリジナルプラグインの有効化：
// マウスオーバー、フェードタイプ、最初に2つのタブを開く
$('#tabContainer3').jQdmtab({
tabEventAction: 'mouseover, mousemove',
current: 1
});
}(document, jQuery));
今回は以上になります。
書籍の方ではjQueryプラグインについての基本的な設定などについても紹介しております。
次回はユーザビリティを向上として、マウスがあたった際に入力やリンク先のヒントを表示させるツールチップの作成について取り上げたいと思います。
今回紹介したサンプルの詳細は『現場でかならず使われている jQueryデザインのメソッド』
今回紹介したサンプルは『現場でかならず使われている jQueryデザインのメソッド』にてサンプルダウンロードとコードの解説を行っております。
自分はここで18個のサンプルを担当しており、この連載でどんどん紹介していこうと思っています。
作成したサンプルや本の紹介はこちらをご覧ください。
この記事を書いた人
著者 : ハヤシユタカ
2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より講師として本科WEBデザイナーコースやデジタルデザインコースを担当。 詳しいプロフィールはこちら
マウスホイールで1画面毎にページを遷移するパララックス風レイアウトを作成する【jQuery連載15】
ユーザビリティを向上するツールチップを作る【jQuery連載06】