タブプラグインを作ってみよう
最近ではWebサイトを制作する際によく使われるのが,
jQueryの場合,
代表的なものでは,
今回の第7回では,
タブパネルを実装するスクリプトを書いてみよう
タブパネルの実装について,
実装方法は様々ですが,
タブパネルを実装するにあたって,
タブパネルベースHTML
<div class="tabArea">
<ul class="tab">
<li><a href="#tab1">tab1</a></li>
<li><a href="#tab2">tab2</a></li>
</ul>
<div id="tab1" class="tabPanel">
tab1tab1tab1tab1tab1tab1tab1<br />
tab1tab1tab1tab1tab1tab1tab1<br />
tab1tab1tab1tab1tab1tab1tab1<br />
tab1tab1tab1tab1tab1tab1tab1<br />
tab1tab1tab1tab1tab1tab1tab1<br />
tab1tab1tab1tab1tab1tab1tab1
</div>
<div id="tab2" class="tabPanel">
tab2tab2tab2tab2tab2tab2tab2<br />
tab2tab2tab2tab2tab2tab2tab2<br />
tab2tab2tab2tab2tab2tab2tab2<br />
tab2tab2tab2tab2tab2tab2tab2<br />
tab2tab2tab2tab2tab2tab2tab2<br />
tab2tab2tab2tab2tab2tab2tab2
</div>
</div>
タブパネルの初期化
順を追って見ていきましょう。
まずは,
タブパネル実装 - JS - 1
var tabArea = $('div.tabArea');
var tabPanel = $('div.tabPanel',tabArea);
var tab = $('ul.tab li',tabArea);
次に,
タブパネル実装 - JS - 2
tabPanel.not(':first').hide();
続いて,
タブも先ほど取得しているので,
タブパネル実装 - JS - 3
tab.eq(0).addClass('active');
ここまでで,
タブをクリックしたときの動作を追加する
タブをクリックしたときに,
タブパネル実装 - JS - 4
tab.click(function(){ /* ここに処理を書いていく */ });
まずは,
試しにconsoleで見てみるとよいでしょう。
consoleには
タブパネル実装 - JS - 5
tab.click(function(){
var targetTabId = $('a',this).attr('hash');
console.log(targetTabId);
});
ここまでくればもう完成したようなもので,
- 現在表示されているタブパネルを非表示にして,
- 選択状態のタブからactiveを取り除き
- クリックされたタブにactiveを追加
- 取得した
「#tabId」 のタブパネルを表示する
の4つです。
実際には,
以上をふまえると,
タブパネル実装 - JS - 6
tab.removeClass('active');
tabPanel.hide();
$(this).addClass('active');
$(targetTabId).show();
これらを先ほどのものと合わせて,
タブパネル実装 - JS - 7
tab.click(function(){
var targetTabId = $('a',this).attr('hash');
tab.removeClass('active');
tabPanel.hide();
$(this).addClass('active');
$(targetTabId).show();
return false;
});
では,
タブパネル実装 - JS - 8
jQuery(function($){
var tabArea = $('div.tabArea');
var tabPanel = $('div.tabPanel',tabArea);
var tab = $('ul.tab li',tabArea);
tabPanel.not(':first').hide();
tab.eq(0).addClass('active');
tab.click(function(){
var targetTabId = $('a',this).attr('hash');
tab.removeClass('active');
tabPanel.hide();
$(this).addClass('active');
$(targetTabId).show();
return false;
});
});