location.hash に応じタブ、アコーディオン、ツリービュー形式等でコンテンツを切り替える jQuery プラグイン

Hash Contents は タブ、アコーディオン、ツリービュー、TOC 形式等で location.hash の変化に応じ表示コンテンツを切り替えることのできる jQuery プラグインです。

変更履歴

  • v0.4.1
    • 以下理由で useHash パラメータが false で且つ、内部保持してるカレント hashID と location.hash 値が一致した場合、location.hash 値をクリアするようにしました。
      • useHash パラメータに false を指定すると、自動生成されるナビゲーションリストのクリック時、location.hash 値が変更されなくなる(ブックマークに location.hash を含ませたくない場合に有効)。
        一方で利便性を保つため、外部サイトからのリンクで www.hoge.com#demo1 のように location.hash を指定され呼び出された場合、その値に応じたコンテンツが表示される仕様となっている。そのような方法でページが表示された後、reloadHashChange パラメータが true の状態でナビゲーションリストをクリックすると location.hash を保持した状態でページがリロードされるためコンテンツの切り替えが行われなくなってしまう。
        今回の仕様変更で外部サイトより呼び出された後、location.hash がクリアされるためこの問題が解決される
  • v0.4
    • API を変更。

使い方

jQuery、Hash Contents の JS ファイルを読み込みます。

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

切替表示したいコンテンツを記述します。

  1. <div id="contents">
  2. <div id="home"><h3>Home</h3>...</div>
  3. <div id="profile"><h3>Profile</h3>...</div>
  4. <div id="access"><h3>Access</h3>...</div>
  5. </div>

コンテンツ要素に対し、hashContents() メソッドを実行します。

  1. $('#contents > div').hashContents();

Demo 1

コンテンツ要素の前方にに表示切替用のナビゲーションリストが挿入され、切り替えができるようになります。また、上記例のようにコンテンツに ID を記述しておくと、その値が location.hash の値になります。(省略した場合は自動的に ID が付与されます)

複数コンテンツグループに適用する

以下のように複数のコンテンツグループで、それぞれ独立した表示切り替え処理をしたい場合、グループ毎に hashContents() メソッドを実行します。

  1. <div id="A">
  2. <div id="home"><h3>Home</h3>...</div>
  3. <div id="profile"><h3>Profile</h3>...</div>
  4. </div>
  5. <div id="B">
  6. <div id="access"><h3>Access</h3>...</div>
  7. <div id="message"><h3>Message</h3>...</div>
  8. </div>
  9.  
  10. <script>
  11. $('#A > div').hashContents();
  12. $('#B > div').hashContents();
  13. </script>

この場合 location.hash は #profile#access のように各コンテンツグループで選択されているコンテンツの ID が連結された値になります。

Demo 2

入れ子のコンテンツグループに適用する

切替表示対象とするコンテンツ内に存在するコンテンツグループにでも切替処理を適用したい場合、例えば下記例で、id:javascript を選択した場合は、id:jquery か id:backbone_js を選択できるようにし、id:css を選択した場合は、id:bootstrap か id:sass を選択できるようにするには、

  1. <div class="contents">
  2. <div id="javascript">
  3. <div id="jquery">...</div>
  4. <div id="backbone_js">...</div>
  5. </div>
  6. <div id="css">
  7. <div id="bootstrap">...</div>
  8. <div id="sass">...</div>
  9. </div>
  10. </div>

nestSelector パラメータを使用し、親コンテンツから見た子コンテンツグループのセレクタを記述します。

  1. $('.contents > div').hashContents({
  2. nestSelector : '> div'
  3. });

Demo 3

ナビゲーションリストの位置とデザインを指定する

jquery.hash-contents.css を読み込んだ状態で、コンテンツのラッパー要素に top-list / bottom-list / left-list / right-list のいずれかのクラス名を振ることで、クラス名に対応した位置(上下左右)にナビゲーションリストを配置することができます。

  1. <div class="contents left-list">
  2. <div id="home2"><h3>Home</h3>...</div>
  3. <div id="profile2"><h3>Profile</h3>...</div>
  4. <div id="access2"><h3>Access</h3>...</div>
  5. </div>

Demo 4

上記の状態で top-line / bottom-line / left-line / right-line のいずれかのクラス名を振ることで、コンテンツとの仕切り線が表示されます。

Demo 5

同様に top-tab / bottom-tab / left-tab / right-tab とすると Tab UI のデザインで表示されます。

Demo 6

アコーディオン形式で表示する

baseStyle パラメータに ‘accordion’ と指定し実行すると、以下のようなアコーディオン形式の構造で、対応するコンテンツの前方にナビゲーションリストが挿入されます。

  1. <!-- navi0 -->
  2. <div class="hash-contents-list hash-contents-list-0">
  3. <div class="list-row list-row-0 active">
  4. <a href="#home">home</a>
  5. </div>
  6. </div>
  7. <!-- contents0 -->
  8. <div class="hash-contents" id="home">home</div>
  9.  
  10. <!-- navi1 -->
  11. <div class="hash-contents-list hash-contents-list-1">
  12. <div class="list-row list-row-1">
  13. <a href="#profile">profile</a>
  14. </div>
  15. </div>
  16. <!-- contents1 -->
  17. <div class="hash-contents" id="profile">profile</div>

以下のようなスタイルを適用すればアコーディオン UI らしくなります。

  1. #contents .hash-contents-list a{
  2. padding:8px;
  3. display:block;
  4. text-decoration:none;
  5. background:#fafafa;
  6. border-bottom:solid 1px #f0f0f0;
  7. }
  8. #contents .hash-contents{
  9. padding:8px;
  10. }

Demo 7

jquery.hash-contents.css を読み込んだ状態で、コンテンツのラッパー要素に accordion クラスを付与し、baseStyle パラメータを “accordion” とすると、CSS の記述をせずにアコーディオン UI にすることができます。

Demo 8

コンテンツの切り替え表示時、それまで表示れてたコンテンツは非表示になりますが、clickableContents パラメータを true にすると、コンテンツは表示状態のままとなり、再クリックで表示/非表示の切り替えが行われるようになります。

Demo 9

ツリービュー形式で表示する

jquery.hash-contents.css を読み込んだ状態で、コンテンツのラッパー要素に tree クラスを付与し、baseStyle パラメータを “tree” にすると、ツリービュー形式の UI で表示されます。

Demo 10

TOC(Table of Contents)形式で表示する

baseStyle パラメータを “toc”(若しくは toggleContents : false, positioning : true, initShowContents : false )とすると、コンテンツの表示切替は行われず、ナビゲーションリストのクリックで対応コンテンツの位置までスクロールする TOC(Table of Contents)の UI になります。

jquery.hash-contents.css を読み込んだ状態で、コンテンツのラッパー要素に toc クラスと left-toc / right-toc の何れかのクラス名を付与すると、クラス名に対応した位置(左右)にナビゲーションリストを配置することができます。

Demo 12

Bootstrap のドロップダウンメニューに対応させる

listTo パラメータにはナビゲーションリストの挿入先、activeTitleTo パラメータにはアクティブコンテンツのタイトルの挿入先を指定できます。これを使用し Bootstrap のドロップダウンメニューに対応させることができます。

Demo 13

location.hash の変更を無効にする

useHash パラメータを false にすると location.hash は変化しません。

cookie にコンテンツの選択状態を保存する

前述のように useHash パラメータを false にすると、コンテンツの選択状態が URL から判断できなくなるため、最初のアクセス時は常に先頭コンテンツが表示されることになります。

jQuery Cookie プラグインを読み込んだ状態で useCookie パラメータを true にすることで、コンテンツの選択状態を cookie に保存され、前回の表示状態を再現できるようになります。

デフォルトでは cookie の有効期限はブラウザを開いている間のみなので、期間を指定したい場合は以下のよう cookieOption パラメータで有効期限を設定します。

  1. $('#contents > div').hashContents({
  2. useHash: false,
  3. useCookie: true
  4. cookieOption: {
  5. expires: 1 // 有効期限を1日間にする
  6. }
  7. });

ちなみに半日とする場合 0.5 としてもうまくいきません(jQuery Cookie の仕様)。以下のように Date 型で指定します。

  1. var date = new Date();
  2. date.setTime( date.getTime() + (12*60*60*1000) );
  3. $('#contents > div').hashContents({
  4. useHash: false,
  5. useCookie: true
  6. cookieOption: {
  7. expires: date
  8. }
  9. });

表示コンテンツの切替毎にページをリロードする

reloadHashChange パラメータに true を指定するとコンテンツの切り替えが行われる度に、ページがリロードされ非アクティブのコンテンツが削除されます(削除したくない場合は removeOtherContents パラメータに false を指定します)。

onAcrive パラメータにはコンテンツの切り替え後のコールバック関数の記述ができ、専用の API オブジェクトを参照できます。API オブジェクトの getActiveTarget() メソッドではアクティブコンテンツを取得できるので、コンテンツ毎に処理を振り分けたいような場合に利用できます。

パラメータ

プラグイン実行時、下記パラメータを指定できます。

  1. defaults : {
  2. baseStyle : '', // UI のデザインを 'accordion', 'tree', 'toc' から指定
  3. defaultBaseStyle : { // baseStyle パラメータの種類別初期値
  4. accordion : {
  5. splitList : true,
  6. effectMethod : 'slideDown',
  7. initShowContents : false
  8. },
  9. tree : {
  10. splitList : true,
  11. effectMethod : 'slideDown',
  12. initShowContents : false,
  13. clickableContents : true
  14. },
  15. toc : {
  16. toggleContents : false,
  17. positioning : true,
  18. initShowContents : false
  19. }
  20. },
  21. idPrefix : 'contents', // ID なしコンテンツに適用時、自動的に付与される ID のプレフィックス
  22. useHash : true, // location.hash を使用しない場合は false を指定する
  23. useCookie : false, // アクティブコンテンツを cookie に記録する場合は true を指定する
  24. cookiePrefix : 'hash-contents-' + location.pathname, // cookie の保存キー(ページ毎に保存)
  25. cookieOption : {}, // $.cookie のオプション(保存期間を1日とする場合は {expires:1} とする)
  26. toggleContents : true, // コンテンツ切替処理を行わない場合は false を指定する
  27. clickableContents : false, // ナビゲーションの再クリックでコンテンツ非表示にする場合は true を指定する
  28. initShowContents : true, // 実行時、コンテンツを非表示にする場合は false を指定する
  29. reloadHashChange : false, // location.hash が変更された時、ページをリロードする場合は true を指定する
  30. positioning : false, // ナビゲーションクリック時、コンテンツ位置までスクロールさせる場合は true を指定する
  31. smoothScroll : true, // スムーススクロールを無効にする場合は false を指定する
  32. scrollSpeed : 500, // スムーススクロールのスピード
  33. removeOtherContents : true, // true で且つ reloadHashChange パラメータが true の場合、非アクティブコンテンツを削除する
  34. nestSelector : '', // 入れ子のコンテンツに対してもを適用する場合、親要素から見たセレクタを指定する
  35. effect : true, // コンテンツ表示処理時のエフェクトを無効にする場合は false を指定する
  36. effectMethod : 'fadeIn', // エフェクトのメソッド名を指定
  37. effectSpeed : 500, // エフェクトのスピード
  38. titleSelector : 'h1,h2,h3,h4,h5', // コンテンツタイトルを持つ要素を指定
  39. title : '', // タイトルを指定。コンテンツ毎に指定する場合は各要素の data-title 属性に指定する
  40. activeTitleTo : '', // アクティブコンテンツのタイトルの挿入先を指定
  41. listTo : 'before', // ナビゲーションリストの挿入先をセレクタ、もしくは 'before' か 'after' で指定
  42. listToMarkup : '', // ナビゲーションリストを <ul/> 以外にする場合はその要素を指定('<div/>'など)
  43. splitList : false, // ナビゲーションリストを対象コンテンツのタイトルの間に挟み込む場合は true を指定
  44. onActive : function(api){} // コンテンツ切替時のコールバック処理を指定
  45. },

API

API オブジェクトを使用し、下記メソッドを実行できます。

  1. // プラグインを適用したコンテンツ要素を返す
  2. getTargets : function(){
  3.  
  4. // アクティブコンテンツを返す
  5. getActiveTarget : function(){

ダウンロード

こちらからどうぞ。