小粋空間  -  a cheap joke and a play on words site

jQuery Listfolderプラグイン v0.0.4（折りたたみマーク表示機能追加）

jQueryでサイドメニューの折りたたみを実現するListfolderプラグインをバージョンアップしました。

１．変更点

次のように折りたたみマークを設定できるようにしました。これにより、Listfolderプラグインだけでサイドメニューの色々な折りたたみが実現できるようになります。

折りたたんだ状態

開いた状態

折りたたみ状態はクッキーで保持されます。

２．設定方法

折りたたみマークは、予め次のような(X)HTMLマークアップを追加します（赤色部分）。a要素のclass属性に対し、デフォルトの値と「mark」という値の2つを設定してください。このa要素の次の要素（ここではul要素）が折りたたみ対象になります。

<dd class="side" id="categories">
  <ul>
    <li><a href="cat1/" title="">お知らせ</a> [4] <a href="javascript:void(0)" id="cat0" class="sidetitle mark"></a>
      <ul>
        <li>イベント</li>
        <li>ニュース</li>
      </ul>
    </li>
    <li><a href="cat2/" title="">日記</a> [8] <a href="javascript:void(0)" id="cat1" class="sidetitle mark"></a>
      <ul>
        <li>旅行</li>
        <li>食事</li>
      </ul>
    </li>
  </ul>
</dd>

折りたたみマークを変更したい場合、初期化オプションに「openMark」「closeMark」を設定してください。

jQuery(function() {
    jQuery('#box').listfolder({
        openMark: '▽',
        closeMark: '△',
    });
});

３．ダウンロード

jQuery listfolderプラグインは以下のリンクからダウンロードしてください。動作サンプルもダウンロードページにあります。

jQueryでサイドメニューの折りたたみを実現するListfolderプラグイン