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

jQuery Listfolderプラグイン v0.0.5

August 25,2011 12:55 AM
Tag:[, , ]
Permalink

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

1.変更点

これまでのバージョンでは、次のようにタイトルとなる要素に隣接したコンテンツのみしか折りたたみを許容していませんでした(dt要素がタイトル、dd要素全体が折りたたみ対象)。

<dt class="sidetitle" id="hoge">最近の記事</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>

今回のバージョンアップで、タイトルから隣接していない要素でも折りたたみを指定できるようになります。

サンプル(タイトルをクリックすれば本文を折りたたみます)

2.設定方法

次のようなマークアップを想定します。h1要素のタイトルをクリックしたら本文があるdiv要素全体を折りたたむようにします。

<header>
  <h1>モバイルサイトオープン</h1>
  <div>
    <span>投稿日:2011年8月24日</span> <span>作成者:admin</span>
  </div>
</header>
<div>
  本文
</div>

折りたたみを設定するには、まずh1要素のclass属性に「content-title」、id属性に「title1」を設定します。

<header>
  <h1 class="content-title" id="title1">モバイルサイトオープン</h1>
  <div>
    <span>投稿日:2011年8月24日</span> <span>作成者:admin</span>
  </div>
</header>
<div>
  本文
</div>

次に本文のdiv要素のid属性に「content1」を設定します。

<header>
  <h1 class="content-title" id="title1">モバイルサイトオープン</h1>
  <div>
    <span>投稿日:2011年8月24日</span> <span>作成者:admin</span>
  </div>
</header>
<div id="content1">
  本文
</div>

あとは、listfolder起動時のオプションに「sidebarClass:'content-title'」「specifyID:1」を設定します。

jQuery(function() {
    jQuery('body').listfolder({
        sidebarClass: 'content-title',
        specifyID: 1
    });
});

この設定により、プラグインの動作としては次のようになります。

  • ページ内のclass属性値「content-title」の要素を検索
  • 検索した要素のid属性値を取得して「title」を除去して数値を取得
  • id属性値「content+取得した数値」の要素を探して折りたたみ

折りたたむ要素が1ページ内に複数ある場合はid属性値の数字をインクリメントして設定してください。ここでは数値で示していますが、文字列でもOKです。

<header>
  <h1 class="content-title" id="title1">モバイルサイトオープン</h1>
  <div>
    <span>投稿日:2011年8月24日</span> <span>作成者:admin</span>
  </div>
</header>
<div id="content1">
  本文
</div>
 
<header>
  <h1 class="content-title" id="title2">モバイルサイトオープン</h1>
  <div>
    <span>投稿日:2011年8月24日</span> <span>作成者:admin</span>
  </div>
</header>
<div id="content2">
  本文
</div>

ブログツールを利用していれば、数値の部分は記事IDを適用できると思います。

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