タブプラグインを作ってみよう
最近ではWebサイトを制作する際によく使われるのが、
jQueryの場合、
代表的なものでは、
今回の第7回では、
タブパネルを実装するスクリプトを書いてみよう
タブパネルの実装について、
実装方法は様々ですが、
タブパネルを実装するにあたって、
<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>タブパネルの初期化
順を追って見ていきましょう。
まずは、
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(){ /* ここに処理を書いていく */ });まずは、
試しにconsoleで見てみるとよいでしょう。
consoleには
tab.click(function(){
var targetTabId = $('a',this).attr('hash');
console.log(targetTabId);
});
ここまでくればもう完成したようなもので、
- 現在表示されているタブパネルを非表示にして、
- 選択状態のタブからactiveを取り除き
- クリックされたタブにactiveを追加
- 取得した
「#tabId」 のタブパネルを表示する
の4つです。
実際には、
以上をふまえると、
tab.removeClass('active');
tabPanel.hide();
$(this).addClass('active');
$(targetTabId).show();これらを先ほどのものと合わせて、
tab.click(function(){
var targetTabId = $('a',this).attr('hash');
tab.removeClass('active');
tabPanel.hide();
$(this).addClass('active');
$(targetTabId).show();
return false;
});
では、
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;
});
});開いておきたいタブを選択できるように改良する
上記で、
下記の部分で一つ目のタブを開いた状態にしているので、
tabPanel.not(':first').hide();
tab.eq(0).addClass('active');残りの手順としては
- eachメソッドを使い、
classにactiveをもっているタブを探す - activeをもっていれば、
click時と同じ動作をさせる - eachメソッド終了後に、
activeになっているタブがなければ、 最初のタブを表示状態にする
まずはeachメソッドを使ってclassにactiveをもっているタブを探して、あればclick時と同じ動作をさせる
2つ同時にやってしまいます。
tab.click(function(){
// a :
var targetTabId = $('a',this).attr('hash');
tab.removeClass('active');
tabPanel.hide();
$(this).addClass('active');
$(targetTabId).show();
// : a
return false;
}).each(function(){
if($(this).hasClass('active')){ // ※1
// b :
var targetTabId = $('a',this).attr('hash');
tab.removeClass('active');
tabPanel.hide();
$(this).addClass('active');
$(targetTabId).show();
// : b
}
});eachメソッドで順番に回しているタブのclassにactiveがあるかどうかを確かめるには、
// functionとしてまとめる
var tabSet = function(target){
var targetTabId = $('a',target).attr('hash');
tab.removeClass('active');
tabPanel.hide();
$(target).addClass('active');
$(targetTabId).show();
}
tab.click(function(){
tabSet(this); // thisを引数として渡す
return false;
}).each(function(){
if($(this).hasClass('active')){
tabSet(this); // thisを引数として渡す
}
});実行時にタブを渡す必要があるので
eachメソッド終了後に、activeになっているタブがなければ、最初のタブを表示状態にする
最後に選択されているタブがない場合の処理を追加します。選択されているタブがないということは、
ここで、
if(tabPanel.filter(':visible').length!=1){
tab.eq(0).addClass('active');
tabPanel.not(':first').hide();
}これまでのソースコードをまとめるたものが以下になります。
jQuery(function($){
var tabArea = $('div.tabArea');
var tabPanel = $('div.tabPanel',tabArea);
var tab = $('ul.tab li',tabArea);
var tabSet = function(target){
var targetTabId = $('a',target).attr('hash');
tab.removeClass('active');
tabPanel.hide();
$(target).addClass('active');
$(targetTabId).show();
}
tab.click(function(){
tabSet(this);
return false;
}).each(function(){
if($(this).hasClass('active')){
tabSet(this);
}
});
if(tabPanel.filter(':visible').length!=1){
tab.eq(0).addClass('active');
tabPanel.not(':first').hide();
}
});以上で
今回のまとめ
タブパネルを実装する、
jQueryを使えば、
次回は、