jQuery Listfolderプラグイン v0.0.5

jQuery Listfolderプラグイン v0.0.5

Posted at August 25,2011 12:55 AM
Tag:[jQuery, Listfolder, Plugin]

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プラグイン
関連記事
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


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

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

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

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