十字架ラビアンローズ

カスタマイズ自在なタブ切り替えスクリプト「yetii.js」の使い方を、動作サンプルと併せて詳細に解説します。

  1. トップページ
  2. Webサイト構築
  3. JavaScript
  4. カスタマイズ自在なタブ切り替えスクリプト「yetii.js」

カスタマイズ自在なタブ切り替えスクリプト「yetii.js」

2014.4.11.Fri. 08:29

タブやナビゲーションをクリック、あるいは自動的に、ページ内の一部コンテンツをタブ切り替えで表示させる事が出来る、非常に便利なスクリプトを紹介します。

「yetii.js」の導入ステップ

  1. <head></head>内にて、「yetii.js」を外部ファイルとして読み込みます。

    
    <script type="text/javascript" src="yetii.js"></script>
    
  2. </body>の直前あたりに、<script type="text/javascript"></script>にてオプション設定を記述します(詳細は後述)。

  3. 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>
    タブを切り替えるリンクになります。
    IDが必須で、またその値は親となる<div>のIDに基づき、○○-navという形式で固定となります。
    <div class="tab" id="○○"></div>
    実際に表示が切り替わる箇所になります。
    ID・クラス名ともに必須ですが、IDは自由、クラス名も設定次第で自由に命名出来ます。

「yetii.js」のオプション設定

基本

<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ではタブを離脱する時に、それぞれ指定した関数を呼び出す事が出来ます。

「yetii.js」のオプション機能

次のような挙動を実装する事が出来ます。
またこれらは、親となる<div>の内部に限らず、自由な場所に設置出来ます。

prev・nextでタブ切り替え

<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>
  1. 「該当するタブ切り替えの親となる<div>のID」=「表示させたいタブの順番の数値(1〜)」
  2. 「該当するタブ切り替えの親となる<div>のID」=「子となる<div>のID」
  3. 通常のページ内ジャンプと同様の記述(該当箇所までページ内ジャンプします)

リンクする際に、上記のように記述します(いずれの方法でもOK)。
以下のリンクから動作サンプルにアクセスすると、動作サンプル内の「基本」の中の指定のタブがデフォルトで表示されている状態になります。

動作サンプルダウンロード

以下のリンクから、「yetii.js」の動作サンプルをダウンロード出来ます。
「yetii.js」そのものは再配布に該当する為に同梱していませんので、お手数ですが配布元サイトより各自でダウンロードして下さい。

  • index.html … 「yetii.js」の実際の動作サンプルページ
  • menu.html … 上記「他のページからアクセスした際に、指定のタブが表示されている状態にする」の確認用ページ
  • style.css … 「index.html」用CSSファイル(「yetii.js」との関連性はありません)

動作サンプルダウンロード

Twitter

アーカイブ

全記事アーカイブ

ブログパーツ

  • アイラブ地元ブログパーツ