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

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

使い方

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

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

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

  1. <ul class="nav-list">
  2. </ul>
  3. <div class="contents">
  4. <h3>contents A</h3>
  5. ...
  6. </div>
  7. <div class="contents">
  8. <h3>contents B</h3>
  9. ...
  10. </div>
  11. <div class="contents">
  12. <h3>contents C</h3>
  13. ...
  14. </div>

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

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

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

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

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

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

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

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

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

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

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

  1. $('div.contents').hashContents({
  2. listTo : 'ul.nav-list',
  3. onActive : function(api){
  4.  
  5. if(api.getIndex() == 0){
  6. //先頭のコンテンツが表示された場合
  7. }
  8. else
  9. if(api.getIndex() == 1){
  10. //2つ目のコンテンツが表示された場合
  11. }
  12. }
  13. });

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

  1. <li class="btn-group">
  2. <button class="btn">Demo3</button>
  3. <button class="btn dropdown-toggle" data-toggle="dropdown">
  4. <span class="caret"></span>
  5. </button>
  6. <ul class="dropdown-menu">
  7. //ここに挿入
  8. </ul>
  9. </li>

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

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

ダウンロード

こちらからどうぞ