location.hash の値に応じ表示コンテンツを切り替える jQuery プラグインを作ってみた

2013-08-12

location.hash の値に応じ表示コンテンツを切り替える jQuery プラグインを作ってみました。大した処理じゃありませんが、jQuery プラグインのデモページとか作る際、複数パターンのデモがある時など毎回記述するのが面倒なのでプラグイン化してみました。ついでに location.hash のリンクリストも生成するようにしてます。

使い方

jquery.js、jquery.hash-contents.js を読み込んでおきます。

BACKRAW

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.hash-contents.js"></script>

以下のように切替表示するコンテンツ、リンクリスト（li要素）を挿入する UL 要素を記述しておきます。

BACKRAW

<ul class="nav-list">
</ul>
<div class="contents">
    <h3>contents A</h3>
    ...
</div>
<div class="contents">
    <h3>contents B</h3>
    ...
</div>
<div class="contents">
    <h3>contents C</h3>
    ...
</div>

切替表示するコンテンツに対し、hashContents() メソッドを実行し、listTo パラメータにリンクリストの挿入先を指定します。

BACKRAW

$('div.contents').hashContents({
    listTo : 'ul.nav-list'
});

Demo1

リンクリストのテキストは、コンテンツ内の h3 要素の値が設定されます。違う要素の値を設定したい場合は、titleSelector パラメータにその要素のセレクタを記述します。

BACKRAW

$('div.contents').hashContents({
    listTo : 'ul.nav-list',
    titleSelector : 'h3 > span.title'
});

コンテンツ毎に直接タイトルを指定したい場合、data-hash-contents-param の title 属性に JSON 形式で記述します。

BACKRAW

<div class="contents" data-hash-contents-param="{title:'コンテンツ１'}">
    <h3>contents A</h3>
    ...
</div>

ロジックで動的に値を決めたい場合は、title パラメータに関数を指定しタイトルとなるテキストを return するようにします。api オブジェクトで各種値が取得できます。

BACKRAW

$('div.contents').hashContents({
    listTo : 'ul.nav-list',
    title : function(api){
        return api.getTarget().find('span.contents-title').text();
    }
});

デフォルトの挙動では、hash 値が変わる度、ページがリロードされ、カレントコンテンツ以外は削除されます。ページリロード、コンテンツ削除を行わず、見た目上の切り替えのみを行う場合は、relaod パラメータに false を指定します。

BACKRAW

$('div.contents').hashContents({
    listTo : 'ul.ul.nav-list',
    reload : false
});

Demo2

表示コンテンツ応じて、実行する JavaScript を切り替える場合は、onActive パラメータに以下のように記述します。

BACKRAW

$('div.contents').hashContents({
    listTo : 'ul.nav-list',
    onActive : function(api){
 
        if(api.getIndex() == 0){
            //先頭のコンテンツが表示された場合
        }
        else
        if(api.getIndex() == 1){
            //２つ目のコンテンツが表示された場合
        }
    }
});

Demo2#contents3

リンクリストは Twitter Bootstrap の .dropdown-menu や .nav-list などと併用できます。

BACKRAW

<li class="btn-group">
    <button class="btn">Demo3</button>
    <button class="btn dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        //ここに挿入
    </ul>
</li>

Demo3

余談ですが Twitter Bootstrap をちょっと使用したい場合は、、以下のよう CDN で読み込むと便利です。

BACKRAW

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

ダウンロード

こちらからどうぞ

jquery.hash-contents – GitHub

CYOKODOG

JS DEVELOPER BLOG

location.hash の値に応じ表示コンテンツを切り替える jQuery プラグインを作ってみた

使い方

ダウンロード