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

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

Posted at April 21,2011 1:55 AM
Tag:[jQuery, Listfolder, Plugin]

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

1.変更点

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

折りたたんだ状態
折りたたんだ状態

開いた状態
開いた状態

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

2.設定方法

折りたたみマークは、予め次のような(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: '△',
    });
});

3.ダウンロード

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

jQueryでサイドメニューの折りたたみを実現するListfolderプラグイン
関連記事
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)