jQuery树形菜单jquery.treeview

jQuery的树形插件资料URL:http://bassistance.de/jquery-plugins/jquery-plugin-treeview/

从该网站Download得到jquery.treeview.zip文件，里面有需要js、css、images等文件以及Demo，

使用时只要在页面中引入jquery.js、jquery.cookie.js、jquery.treeview.js（树形菜单的方法）、

jquery.treeview.css即可。同时保证jquery.treeview.css文件和images文件夹的相对位置，在同一目录下即可

接下来构建树形菜单的内容如下：

<ul id="example1" class="treeview-black">

<li><span>Folder 1</span>

<ul>

<li><span >Item 1</span></li>

</ul>

</li>

<li><span >Folder 2</span>

<ul>

<li><span >Subfolder 2.1</span>

<ul id="subfolderadd">

<li><span >File 2.1.1</span></li>

<li><span >File 2.1.2</span></li>

</ul>

</li>

<li><span >File 2.2</span></li>

</ul>

</li>

<li class="closed"><span >Folder 3(closed at start)</span>

<ul>

<li><span >File 3.1</span></li>

</ul>

</li>

<li><span >File 4</span></li>

</ul>

<div id="treecontrol">

<a href="#">收起</a>

<a href="#">展开</a>

<a href="#">收起/展开</a>

</div>

最外面的结点作为外结点，每一个<ul></ul>表示一个结点，结点中可以添加很多项，项都是以<li></li>来说明项里面的内容可以是随意的，比如上面用

<span></span>来表示结点的内容，你可以用<a>等，当项的内容后面紧接着添加<ul></ul>后，那么该项就变成了父结点，

<ul><li>之间不能有html代码，<li>中不能有<li>元素，否则不会显示。

接下来调用jquery.treeview.js提供的treeview()进行展现。首先把树形菜单对象转化为jQuery

对象，$("#example1")，可以调用treeview()方法，$("#example1").treeview();。

控制展现方式，默认都是所有结点打开，你可以像上面那样通过class="closed"来控制它收起，除此之外，

treeview()方法还可以接受一个json对象，

{animated: "fast",

collapsed: true,

unique: false,

persist: "cookie",

control: "#treecontrol",

toggle:function(){...}}

其中animated表示树展开或者收起时的动作快慢，可以是fast/slow，默认没有。

collapsed表示树加载后的状态时转开还是收起，为true表示收起，默认展开，且没有persist时有效。

unique表示树的可控制性，只有为false时control才会启作用。

control表示树的控制项，它的值是"#+控制层的id"，这个元素下面的三个子元素分别表示点击时触发树的收起、展开、收起/展开动作

toggle表示树收起结点或者展开结点时要触发的js函数。

效果控制：树的图标的样式可以通过最外层结点的class来说明，如上面的class="treeview-black"，jquery.treeview.css

默认提供了treeview-red、treeview-black、treeview-gray等样式，当然你也可以仿照jquery.treeview.css来

添加自己的样式。

添加/删除树的结点。是通过添加html代码来实现的。即动态改变Dom对象。借助于jQuery的appendTo()方法：

把一个jQuery对象加在某个对象后面，如在id为id="subfolderadd"的li元素后面添加结点，先写好html代码为：

<li class=\"closed\"><a href=\"baidu

baidu1
baidu2
baidu3

</li'>www.baidu.com\">baidu</a><ul><li>baidu1</li><li>baidu2</li><li>baidu3</li></ul></li>，

先把这个html代码段变为jQuery对象，$("<li class=\"closed\"><a href=\"baidu

baidu1
baidu2
baidu3

</li'>www.baidu.com\">baidu</a><ul><li>baidu1</li><li>baidu2</li><li>baidu3</li></ul></li>")

，如var branches=$("<li class=\"closed\"><a href=\"baidu

baidu1
baidu2
baidu3

").appendTo("#subfolderadd'>www.baidu.com\">baidu</a><ul><li>baidu1</li><li>baidu2</li><li>baidu3</li></ul></li>").appendTo("#subfolderadd");

然后调用treeview()刷新显示：$("#example1").treeview({add:branches});

转自：http://blog.163.com/zjlovety@126/blog/static/22418624201112561230646/