TopJavaScriptjQueryプラグイン > 2011年4月
2011年4月21日

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

April 21,2011 1:55 AM
Tag:[, , ]
Permalink

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プラグイン
Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3