jQuery中的treeview插件

jQuery做樹狀結構真的很簡單,下面做一個最簡單的示例:

在html文件中引用:

<link rel="stylesheet" href="../jquery.treeview.css" />
??? <link rel="stylesheet" href="../red-treeview.css" />
??? <link rel="stylesheet" href="screen.css" />
??? <script src="../lib/jquery.js" type="text/javascript"></script>
??? <script src="../lib/jquery.cookie.js" type="text/javascript"></script>
??? <script src="../jquery.treeview.js" type="text/javascript"></script>

?

然后定義:

<script language="JavaScript">
??????? $(document).ready(function(){
??????????? $("#navigation").treeview({
??????????????? collapsed: true,
??????????????? unique:true,
??????????????? persist:"location"//這項很關鍵
??????????? });
??????? });
??????? </script>

然后在下面定義一個列表并指定id即可

<ul id="navigation">
??????? <li>根節點</li>
??????????? <ul>
??????????? <li>子節點</li>
??????????????? <ul>
??????????????????? <li><span>第一節點</span></li>
??????????????????? <li><span>第二節點</span></li>
??????????????????? <li><span>第三節點</span></li>
??????????????? </ul>
??????????? <li>子節點</li>
??????? </ul>
??? </ul>