Movable Type 備忘録

 TreeView with jQuery

  • Nov292008
  • Vote:
    http://bizcaz.com/archives/2008/11/29-191103.php
  • Categories: jQuery
  • Tags:
  • Social Bookmark

こんにちわ^^

今回もだいぶ前に試したものですが jQuery の TreeView プラグインを使ってカテゴリ一覧とそれに属するエントリをツリー表示させてみました。

サンプルを表示できませんでした。

TreeView プラグインは以下のページから入手できます。

使い方

マークアップは基本的には普通に階層化したリスト表示すればいいだけです。 大まかに例を以下に記します。

TreeView マークアップ

  1. <ul id="treeViewSelector">
  2.     <li>ノード１</span>
  3.         <ul>
  4.             <li>ノード１－①</li>
  5.             <li>ノード１－②</li>
  6.             <li>ノード１－③</li>
  7.             <li>ノード１－④
  8.                 <ul>
  9.                     <li>ノード１－④－１</li>
  10.                     <li>ノード１－④－２</li>
  11.                     <li>ノード１－④－３</li>
  12.                 </ul>
  13.             </li>
  14.             <li>ノード１－⑤
  15.                 <ul>
  16.                     <li>ノード１－⑤－１</li>
  17.                     <li>ノード１－⑤－２</li>
  18.                     <li>ノード１－⑤－３</li>
  19.                     <li>ノード１－⑤－４
  20.                         <ul>
  21.                             <li>ノード１－⑤－４－①</li>
  22.                             <li>ノード１－⑤－４－②</li>
  23.                             <li>ノード１－⑤－４－③</li>
  24.                         </ul>
  25.                     </li>
  26.                 </ul>
  27.             </li>
  28.             <li>ノード１－⑥
  29.                 <ul>
  30.                     <li>ノード１－⑥－１</li>
  31.                     <li>ノード１－⑥－２</li>
  32.                     <li>ノード１－⑥－３</li>
  33.                 </ul>
  34.             </li>
  35.         </ul>
  36.     </li>
  37. </ul>

上記のようなかんじで階層構造でマークアップすれば TreeView が勝手にツリー構造にしてくれます。
あとは、いつものようにおまじないを HTML ヘッダ内に追加します。

TreeView コード

  1. $(document).ready(function(){
  2.     $("#treeViewSelector").treeview({
  3.         animated: "fast",
  4.         collapsed: true,
  5.         unique: true,
  6.         persist: "cookie",
  7.         toggle: function() {
  8.             window.console && console.log("%o was toggled", this);
  9.         }
  10.     });
  11. });

上記はサンプルで使用してるコードです。 各オプションを以下に記します。

  • animated

    アニメーション表示したい場合には速度を指定します。'slow'、'normal'、'fast' の何れかが選択可能です。

  • collapsed

    最初からすべてのフォルダを開いた状態で表示させたい場合にはこのオプションに「false」を選択します。閉じた状態にしたい場合には「true」を選択します。デフォルトは「false」です。

    ただし unique オプションか persist オプションと併用した場合「false」にしても無視されます。

  • unique

    同一階層において開けるフォルダを必ず 1 つに制限したい場合には、このオプションに 「true」を選択します。デフォルトは「false」です。

  • control

    こちらのデモページの Sample3 のような、「Collapse All」、「Expand All」、「Toggle All」リンクを付加したい場合、その ID を指定します。各リンクのマークアップは以下の通りです。

    すべて閉じるリンクなど

    1. <div id="treecontrol">
    2.     <a href="#">Collapse All</a>
    3.     <a href="#">Expand All</a>
    4.     <a href="#">Toggle All</a>
    5. </div>

    オプションには青字の ID を指定してあげることになります。
    また、全部で 3 つの機能があり「すべて閉じる」、「すべて開く」、「トグル」の順番でイベントが割り振られます。ですので「トグル( Toggle All )」だけを使用したい･･･ということはできないようです。その場合には上記例のように 3 つのアンカーを用意してあげる必要があります。

  • persist

    ツリーの状態を保持させたい場合には、このオプションに「cookie」を指定します。 ロケーションを使って任意のノードを指定することができるみたい。その場合には「location」を指定します。
    でもちょと使い方が分かりません。ロケーション( URL + #xxxx )を指定しても期待する動作しませんでした。

  • cookieId

    クッキー保存時の任意の ID を指定したい場合、このオプションで任意のテキストを指定してください。

  • toggle

    ノードのオープン／クローズ時に何か処理をさせたい場合には、このオプションを使ってハンドラを登録できます。

以上です。
ちなみに上記サンプルでは MT タグを使って以下のようにコーディングしてます。

カテゴリ一覧

  1. <mt:SetVar name="cnt" value="1">
  2. <MTTopLevelCategories>
  3.     <mt:SubCatIsFirst>
  4.         <mt:If name="cnt" eq="1">
  5.             <ul id="red" class="treeview-red filetree">
  6.         <mt:Else>
  7.             <ul>
  8.             <mt:Var name="patcat">
  9.         </mt:If>
  10.         <mt:SetVar name="cnt" value="1" op="++">
  11.     </mt:SubCatIsFirst>
  12.  
  13.     <$MTCategoryLabel setvar="catname"$>
  14.  
  15.     <mt:IfNonZero tag="MTCategoryCount">
  16.         <li><span class="folder"><a href="<$MTCategoryArchiveLink$>"><$mt:GetVar name="catname"><span class="bold"> [<$MTCategoryCount$>]</span></a></span>
  17.     <mt:Else>
  18.         <li><span class="folder"><$mt:GetVar name="catname"><span class="bold"> [<$MTCategoryCount$>]</span></span>
  19.     </mt:IfNonZero>
  20.  
  21.     <mt:SetVarBlock name="patcat">
  22.         <MTEntries lastn="3">
  23.             <li><span class="file"><a href="<$MTEntryPermalink$>"><span class="bold right"><$MTEntryDate language="en" format="%y/%m/%d"$></span><$MTEntryTitle$></span></a></li>
  24.         </MTEntries>
  25.     </mt:SetVarBlock>
  26.  
  27.     <$MTSubCatsRecurse$>
  28.  
  29.     <MTHasNoSubCategories>
  30.         <ul><mt:Var name="patcat"></ul>
  31.     </MTHasNoSubCategories>
  32.     </li>
  33.  
  34.     <mt:SubCatIsLast></ul></mt:SubCatIsLast>
  35. </MTTopLevelCategories>

ご参考までに。

 Trackback Pings(0)

No trackbacks found.

 Comments(0)

No comments found.

 Post a Comment

 

コメント用フィード