2014.4.11.Fri. 08:29
タブやナビゲーションをクリック、あるいは自動的に、ページ内の一部コンテンツをタブ切り替えで表示させる事が出来る、非常に便利なスクリプトを紹介します。
<head>
〜</head>
内にて、「yetii.js」を外部ファイルとして読み込みます。
<script type="text/javascript" src="yetii.js"></script>
</body>
の直前あたりに、<script type="text/javascript">
〜</script>
にてオプション設定を記述します(詳細は後述)。
2.で設定した内容に基づいてマークアップします。
<div id="tab-container">
<ul id="tab-container-nav">
<li><a href="#tab1">tab1</a></li>
<li><a href="#tab2">tab2</a></li>
</ul>
<div class="tab" id="tab1">
<p>tab1</p>
</div>
<div class="tab" id="tab2">
<p>tab2</p>
</div>
</div>
上記の例では、各要素はそれぞれ以下の役割を持つようになります。
<div id="tab-container">
〜</div>
<ul id="tab-container-nav">
〜</ul>
<div>
のIDに基づき、○○-nav
という形式で固定となります。
<div class="tab" id="○○">
〜</div>
<script type="text/javascript">
<!--
var tabber = new Yetii({
id : 'tab-container'
});
//-->
</script>
</body>
の直前あたりにて、最低限、上記のようなIDの設定が必須です。
変数名・IDは自由に命名出来ます。
以下、必要に応じてnew Yetii({
〜});
に、,
で区切りながらオプションを列挙していきます。
tabclass : 'custom_tabclass'
activeclass : 'custom_activeclass'
tabclass
は、表示が切り替わる箇所である<div>
のクラス名を設定します。
デフォルトはtab
です。
activeclass
は、アクティブになっているタブ切り替えリンクの<a>
に自動的に付加されるクラス名を設定します。
デフォルトはactive
です。
またactiveclass
を設定すると、該当する<a>
の親になる<li>
には、activeclass
の設定内容に応じて○○li
というクラス名が自動的に付加されるようになります。
デフォルトはactiveli
です。
var tabber1 = new Yetii({
id : 'tab-container1',
tabclass : 'custom_tabclass1'
});
var tabber2 = new Yetii({
id : 'tab-container2',
tabclass : 'custom_tabclass2'
});
上記のように変数を複数定義する事で、同一ページ内にタブ切り替えのセットを複数設置する事が出来ます。
また複数設置の際には、tabclass
にてそれぞれ別々のクラス名を定義する必要があります。
active : n
初期時に表示させたいタブの順番の数値(1〜)を指定します。
デフォルトは「1」です。
persist : true
一度別のページにアクセスして戻ってきた際に、デフォルトのタブ(特に指定がない場合は1つめのタブ)ではなく、最後に表示していたタブが表示されるようになります。
interval : n
wait : n
interval
を設定するとタブが自動的に切り替わるようになり、その周期となる秒数を設定します。
wait
はタブ切り替えリンクをクリックした際に、そのタブを表示させたまま自動切り替わりを一時的にストップさせる秒数を設定します。
function custom_function1(tabnumber1) {
/* enything */
}
function custom_function2(tabnumber2) {
/* enything */
}
var tabber1 = new Yetii({
id : 'tab-container1',
callback : custom_function1
});
var tabber2 = new Yetii({
id : 'tab-container2',
leavecallback : custom_function2
});
別途関数(例えばアラート表示等)を定義しておくと、callback
ではタブを表示する時・leavecallback
ではタブを離脱する時に、それぞれ指定した関数を呼び出す事が出来ます。
次のような挙動を実装する事が出来ます。
またこれらは、親となる<div>
の内部に限らず、自由な場所に設置出来ます。
<a href="javascript:tabber.previous();">〜</a>
<a href="javascript:tabber.next();">〜</a>
tabber
には、該当するタブ切り替えのセットの変数名を指定します。
<span onclick="tabber.show(n); return false;">〜</span>
tabber
には、該当するタブ切り替えのセットの変数名を指定します。
nには、表示させたいタブの順番の数値(1〜)を指定します。
<a href="○○.html?tab-container=2">〜</a>
<a href="○○.html?tab-container=tab2">〜</a>
<a href="○○.html#tab2">〜</a>
<div>
のID」=「表示させたいタブの順番の数値(1〜)」<div>
のID」=「子となる<div>
のID」リンクする際に、上記のように記述します(いずれの方法でもOK)。
以下のリンクから動作サンプルにアクセスすると、動作サンプル内の「基本」の中の指定のタブがデフォルトで表示されている状態になります。
以下のリンクから、「yetii.js」の動作サンプルをダウンロード出来ます。
「yetii.js」そのものは再配布に該当する為に同梱していませんので、お手数ですが配布元サイトより各自でダウンロードして下さい。