jQuery.imui.imuiBreadcrumbs

Constructor

imuiBreadcrumbs ( [Object options] ) Static

パンくずリストを表示します。
先頭のリストと現在のリスト、現在のリストの一つ手前のリストは必ずすべて表示されます。それ以外のリストは折りたたまれて表示されます。
折りたたまれているリストにカーソルを乗せると、すべての文字列が表示されます。カーソルを外すと、折りたたまれます。
リストに子メニューを持つ場合は、カーソルを乗せると子メニューも表示されます。
スタイルについてはcss モジュール一覧を参照してください。

注意事項

本APIは HTML を自動生成しないため、決まったフォーマットで HTML を書かないと正しく動作しません。

最初に class="imui-breadcrumbs-wrap" を持つ div を記述してください。
上記の div 内に class="imui-breadcrumbs" を持つ ul または ol を記述してください。
li の直下に文字列を記述せず、 a 内に文字列を記述してください。
子メニューにはimui-link-item-menu のクラス指定を推奨しています。
現在位置を表すリストには、class="active" を指定してください。また、文字列は a ではなく span 内に記述してください。

li 内の文字列が imui-breadcrumbs-wrap を指定している div よりも大きくなる場合は、表示が崩れます。対象のリストに max-width を入れるなどで回避してください。

Parameters

options : Object: Optional; オプション
options.collapsible : Boolean: OptionalDefault: true; パンくずリストを折りたたんだ状態で表示するかどうかを指定します
本オプションに true を指定しても先頭のリストと現在のリスト、現在のリストの一つ手前のリストは必ずすべて表示されます
options.collapsibleWidth : Number: OptionalDefault: 25; パンくずリストを折りたたんだ状態の横幅を指定します
実際に表示される折りたたまれた状態の li は本オプションに指定した値 + 22px で表示されます

<!-- 以下のような HTML を記述してください。div タグに class="imui-breadcrumbs-wrap" を必ず指定してください。 -->
<div class="imui-breadcrumbs-wrap">
  <!-- ol タグ、ul タグのどちらかに class="imui-breadcrumbs" を必ず指定してください。 -->
  <ol class="imui-breadcrumbs">
    <!-- li タグの中に必ず a タグで文字列を記述してください。アイコンを置きたい場合は、span タグにて指定してください。 -->
    <li><a href="#"><span class="im-ui-icon-common-16-home"></span></a></li>
    <li><a href="#">第一階層</a></li>
    <li><a href="#">第二階層</a></li>
    <li>
      <a href="#">第三階層</a>
      <!-- 
        子メニューを表示したい場合は、以下のように ol タグ、ul タグのどちらかに class="menu" を必ず指定してください。
        imui-link-item-menu は子メニューのスタイルを提供しているクラスです。こちらのクラスを使うことを推奨していますが、他のスタイルにしたい場合は違うクラスを指定してください。
      -->
      <ul class="menu imui-link-item-menu">
        <li><a href="#">メニュー1</a></li>
        <li><a href="#">メニュー2</a></li>
        <li><a href="#">メニュー3</a></li>
      </ul>
    </li>
    <li><a href="#">第四階層</a></li>
    <!-- 現在選択中のリストには class="active" を必ず指定してください。文字列は a タグではなく span タグで記述してください。 -->
    <li class="active"><span>現在位置</span></li>
  </ol>
</div>

<!-- collapsibleWidth を指定する例 -->
<div class="imui-breadcrumbs-wrap">
  <ul class="imui-breadcrumbs" id="sampleCollapsibleWidth">
    <li><a href="#"><span class="im-ui-icon-common-16-home"></span></a></li>
    <li><a href="#">第一階層</a></li>
    <li>
      <a href="#">第二階層</a>
      <ul class="menu imui-link-item-menu">
        <li><a href="#">メニュー1</a></li>
        <li><a href="#">メニュー2</a></li>
      </ul>
    </li>
    <li><a href="#">第三階層</a></li>
    <li class="active"><span>現在位置</span></li>
  </ul>
</div>
<script type="text/javascript">
  $('#sampleCollapsibleWidth').imuiBreadcrumbs({collapsibleWidth:10});
</script>

<!-- collapsible を指定する例 -->
<div class="imui-breadcrumbs-wrap">
  <ul class="imui-breadcrumbs" id="sampleCollapsible">
    <li><a href="#"><span class="im-ui-icon-common-16-home"></span></a></li>
    <li><a href="#"><第一階層</a></li>
    <li>
      <a href="#">第二階層子メニューあり</a>
      <ul class="menu imui-link-item-menu">
        <li><a href="#">メニュー1</a></li>
        <li><a href="#">メニュー2</a></li>
      </ul>
    </li>
    <li><a href="#">第三階層</a></li>
    <li class="active"><span>現在位置</span></li>
  </ul>
</div>
<script type="text/javascript">
  $('#sampleCollapsible').imuiBreadcrumbs({collapsible:false});
</script>

Events

EventDefined By

close ( EventObject event, Object element ) jQuery.imui.imuiBreadcrumbs

No description.

Parameters

event : EventObject: イベント
element : Object: 折りたたんだリスト

//#target は、imuiBreadcrumbs のセレクタを指定してください。
$('#target').on('imuibreadcrumbsonclose',function(event, element) {
      alert('close');
    }
);

open ( EventObject event, Object element ) jQuery.imui.imuiBreadcrumbs

No description.

Parameters

event : EventObject: イベント
element : Object: 開いたリスト

//#target は、imuiBreadcrumbs のセレクタを指定してください。
$('#target').on('imuibreadcrumbsonopen',function(event, element) {
      alert('open');
});