jQuery treeview的簡單用法

　　最近的項目要用到treeview插件，剛好就自己整理一下這方面的資料。

　1.文檔樹示例

　　最簡單的一個例子就是文檔樹的實現。效果如下圖所示。

　　

　　在使用treeview之前，html文檔中需要包含幾個jquery.js、jquery.treeview.js、jquery.treeview.css幾個文件。具體的請從官網下載。記住jquery.js的引用必須在jquery.treeview.js之前。

　　具體代碼如下：

<h1>文件樹示例</h1>
  <ul id="file" class="filetree">
    <li><span class="folder">資料</span>
        <ul>
            <li><span class="file">光盤</span></li>
        </ul>
    </li>
    <li><span class="folder">書籍</span>
        <ul>
            <li><span class="folder">小說</span>
                <ul id="book">
                    <li><span class="file">當代小說</span></li>
                    <li><span class="file">古典小說</span></li>
                </ul>
            </li>
            <li><span class="file">詩歌</span></li>
        </ul>
    </li>
    <li class="closed"><span class="folder">游戲</span>
        <ul>
            <li><span class="file">休閑游戲</span></li>
        </ul>
    </li>
    <li><span class="folder">照片</span></li>
  </ul>

　　從代碼中看出，要顯示出文檔樹的效果，必須在第一個ul的class中添加filetree類。而文件夾以及文件的顯示效果是通過添加一個<span></span>來實現的。文件夾使用folder類，文件使用file類。文檔樹的實現又是通過列表的嵌套實現的。而給包含相關文件夾li添加closed類可以使這個文件夾保持關閉狀態，默認的情況下所有文檔樹都是打開的。

　　單純的以上代碼是不能實現文檔樹的效果的，要實現上圖中的效果，還需要添加js代碼。大家注意第一個ul中的id=file屬性，這個時候就派上用場了，js代碼如下：

 $(document).ready(function(){
      $("#file").treeview();

  });

　　這就是一個簡單文檔樹的實現。

　2.導航樹示例

　　效果如下圖所示：

　　

　　html代碼如下：

<ul id="navigation">
        <li><a href="#"></a>菜單1
            <ul>
                <li><a href="#">菜單1.0</a>
                    <ul>
                        <li><a href="#">菜單1.0.0</a></li>
                    </ul>
                </li>
                <li><a href="#">菜單1.1</a></li>
                <li><a href="#">菜單1.2</a>
                    <ul>
                        <li><a href="#">菜單1.2.0</a>
                            <ul>
                                <li><a href="#">菜單1.2.0.0</a></li>
                                <li><a href="#">菜單1.2.0.1</a></li>
                                <li><a href="#">菜單1.2.0.2</a></li>
                            </ul>
                        </li>
                        <li><a href="#">菜單1.2.1</a>
                            <ul>
                                <li><a href="#">菜單1.2.1.0</a></li>
                            </ul>
                        </li>
                        <li><a href="#">菜單1.2.2</a>
                            <ul>
                                <li><a href="#">菜單1.2.2.0</a></li>
                                <li><a href="#">菜單1.2.2.1</a></li>
                                <li><a href="#">菜單1.2.2.2</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
</ul>

　　這里主要還是列表的嵌套，注意給首個ul添加navigation類屬性。

　　一樣的，也必須通過js才可以實現導航樹的功能：

$("#navigation").treeview({
                persist: "location",
                collapsed: true,
                unique: true
            });

　　解釋：collapsed設置為true是指導航樹處於折疊狀態，相當於給前面的closed屬性。

　　3.示例三  帶有快速動畫的紅色主題樹

　　實際效果就是樹的顏色變成了紅色，並且添加了動畫。HTML代碼跟示例二差不多，js代碼發生了一點點變化。

$("#red").treeview({
        animated: "fast",    //快速動畫
        collapsed: true,      //開始時設為折疊的
        unique: true,    
        persist: "cookie",    //基於cookie的持久性
        toggle: function() {
            window.console && console.log("%o was toggled", this);
        }
    });    

　　一樣的也需要給html中的第一個ul添加treeview-red類屬性。

　　4.示例4 通過一顆樹控制兩棵樹，兩顆樹的顏色分別為黑色和灰色。

　　html關鍵代碼如下：

<div id="treecontrol">
        <a title="Collapse the entire tree below" href="#"><img src="../images/minus.gif" /> Collapse All</a>
        <a title="Expand the entire tree below" href="#"><img src="../images/plus.gif" /> Expand All</a>
        <a title="Toggle the tree below, opening closed branches, closing open branches" href="#">Toggle All</a>
    </div>
    <ul id="black" class="treeview-black">
        <li>Item 1</li>
            ...
    </ul>
    <ul id="gray" class="treeview-gray">
        <li>Item 1</li>
        ....
    </ul>        

　　js中代碼如下：

$("#black, #gray").treeview({
        control: "#treecontrol",
        persist: "cookie",
        cookieId: "treeview-black"
    });

});