TopJavaScriptjQueryプラグイン > 2011年2月
2011年2月25日

jQuery listfolderプラグイン v0.0.3(折りたたみ初期状態設定機能追加)

February 25,2011 2:55 AM
Tag:[, , ]
Permalink

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

1.追加機能

v0.0.2までは、リストがすべて折りたたまれた状態でしか表示されませんでした。v0.0.3では折りたたみを開いた状態で表示できるよう、プラグインオプションで設定できるようにしました。

v0.0.2までの初期状態(すべて閉じた状態で表示)

v0.0.3の初期状態(指定したリストを開いた状態で表示)

特定のリストを開いた状態にするには、次のようにinitOpenオプションを設定します。

<script type="text/javascript">
jQuery(function() {
    jQuery('#box').listfolder({
        initOpen: ['aaa','ddd','fff'],
    });
});
</script>

オプションの値には、開いた状態で表示したいリストのid属性値を配列で設定します。なお、折りたたみ状態がクッキーに保存された時点で、そのリストに対する初期状態は無効になります。

また、オプション「sidebar_class」の名称を「sidebarClass」に変更しました。

2.ダウンロード

jQuery listfolderプラグインは以下のリンクからダウンロードしてください。

jQueryでサイドメニューの折りたたみを実現するListfolderプラグイン
Comments [0] | Trackbacks [0]
2011年2月23日

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

February 23,2011 2:55 AM
Tag:[, , ]
Permalink

jQueryでサイドメニューの折りたたみを実現するListfolderプラグインを紹介します。同じようなプラグインはすでに存在すると思いますが、勉強がてら作ってみました。

1.機能

このプラグインを利用すれば、サイドメニュータイトルをクリックすることで、リストの折りたたみが簡単にできるようになります。

折りたたみ機能だけであればjQueryを数行書けば実現できますが、このプラグインのウリは折りたたみ状態をクッキーに保持することです。クッキーに保持するので、リロードや他のページに移動しても折りたたみ状態が初期状態に戻ることはありません。

動作は以下の配布ページで確認できます。配布ページのサイドメニュータイトルをクリックすれば折りたたみを行えます。

jQuery listfolder plugin
listfolderプラグイン

以下、インストールと利用方法を説明します。

2.プラグインのダウンロード・インストール

Listfolderのページにある「jquery.listfolder_0.0.1.js(バージョンは2011年2月現在)」のリンクを右クリックして、プラグインファイルをダウンロードします。保存時にファイル名はjquery.listfolder.jsとします。

プラグインのご利用についてご支援・ご賛同くださる方からの寄付をお待ち申し上げます。

PayPal - オンラインで安全・簡単にお支払い

折りたたみを行いたいページに以下の内容を設定します。

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.listfolder.js"></script>
<script type="text/javascript">
jQuery(function() {
    jQuery('#box').listfolder();
});
</script>

#boxの部分は、折りたたみを行いたいリストを包含している要素やid属性など、何でも構いません。

3.(X)HTMLマークアップ

Listfolderプラグインは、次のような(X)HTMLマークアップを想定しています。 サンプルはdt/dd要素を用いていますが、div要素やul/li要素でも構いません。メニュータイトルのclass属性・id属性は必須です。また、メニュータイトルのclass属性は統一してください。

<dt class="sidetitle" id="hoge">Recent Entries</dt>
<dd>
  <ul>
    <li><a href="2011/08/post-8.html" title="e22">業務提携に関するお知らせ</a></li>
    <li><a href="2010/09/post-9.html" title="e23">モバイルサイトオープン</a></li>
    <li><a href="2010/07/java.html" title="e19">ソリューションセミナー</a></li>
  </ul>
</dd>

4.オプション

listfolderプラグインは、次のオプションを用意しています。

  • sidebarClass:メニュータイトルのclass属性値
  • time:折りたたみスピード。デフォルトは0
  • initOpen:初期状態を開いた状態にしたいリストのid属性値を配列で指定。デフォルトなし

設定例

jQuery(function() {
    jQuery('#box').listfolder({
        sidebarClass: 'hoge',
        time: 1000,
        initOpen: ['bbb','ddd','fff'],
    });
});
Comments [5] | 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