breadCrumb.jsとは

パンくずリストをJavascriptを使って外部化。
現在開いているページのURLをもとにパンくずリストを生成します。

ダウンロード

• breadCrumb.js (2012/11/16)

デモ

ディレクトリ名をもとにしてパンくずナビを生成

• リストタグ表示 (/lab/breadCrumbJs/sample/list/)
• ブロックタグ表示 (/lab/breadCrumbJs/sample/block/)

ファイル名をもとにしてパンくずナビを生成

• リストタグ表示 (lab/breadCrumbJs/sample/list.html)
• ブロックタグ表示 (lab/breadCrumbJs/sample/block.html)

表示させる名称の登録が無い場合、ディレクトリ名を表示します。

使い方

1. breadCrumb.jsを読み込んでください(head内等に記述します)。

   <script type="text/javascript" src="breadCrumb.js"></script>
   

2. 実装したい箇所に id="breadCrumb" を付加してください。
   p / div / ol / ul 要素に対応しています。

   <ol id="breadCrumb">
   <li>If you turn on javascript, this area is drawn to the breadcrumb(navigation).</li>
   </ol>
   

3. breadCrumb.js内28行目〜のパンくずリストに表示する名前を編集してください。
   

   this.contentName = {
   	"home" : "ホーム", // この行は残してください。
   	"/lab/":"実験室",
   	"/lab/breadCrumbJs/" : "breadCrumb.js",
   	"/lab/breadCrumbJs/index.html" : "breadCrumb.js 解説ページ",
   	...
   

(Option) Ignroe Directory

ルートパスから除外するパスを設定することができます。第3階層などから、パンくずリストを始めたい場合、breadCrumb.js内を以下のように編集します。

this.ignorePath = '/lab/breadCrumbJs';

• リストタグ表示
• ブロックタグ表示

(Option) Display Index.*

階層内の index.html や index.php をパンくずに表示させるか表示させないか設定できます。デフォルトの設定では表示しません。

• index.html をパンくずリストに描画した例
  (/lab/breadCrumbJs/index.html (indexMatch = true))

breadCrumb.js内の this.indexMatch = false; を this.indexMatch = true; のように編集すると、パンくずリストの末端が描画されます。

this.indexMatch = true;

一部ページのみ index.* を有効にするには、そのページのみ下記のようにスクリプトタグを記述してください。

<script type="text/javascript" src="breadCrumb.js"></script>
<script type="text/javascript">
breadCrumbJsData.indexMatch = true;
</script>

License & Support

個人利用/商用利用問わず自己責任の範囲内でご利用ください。ご連絡やリンクもとくにしていただかなくてかまいませんが、どこかで紹介していただけますと幸いです。

不明点等ございましたら、までお問い合わせください。