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

jQuery Listfolderプラグイン v0.0.5

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

１．変更点

これまでのバージョンでは、次のようにタイトルとなる要素に隣接したコンテンツのみしか折りたたみを許容していませんでした（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>

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

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

２．設定方法

次のようなマークアップを想定します。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を適用できると思います。

３．ダウンロード

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

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