jQuery树形菜单
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
jQuery树形菜单(1)jquery.treeview
/fylsh/blog/item/af6ef8dd16056cadcd116602.html
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文件夹的相对位置,在同一目录下即可
接下来构建树形菜单的内容如下:
- Folder 1
- Item 1
- Folder 2
- Subfolder 2.1
- File 2.1.1
- File 2.1.2
- File 2.2
- Subfolder 2.1
- Folder 3(closed at start)
- File 3.1
- File 4
最外面的结点作为外结点,每一个
来表示结点的内容,你可以用等,当项的内容后面紧接着添加后,那么该项就变成了父结点,
- 之间不能有html代码,
- 中不能有
- 元素,否则不会显示。
接下来调用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代码为:
href=\"\">baidu
- baidu1
- baidu2
- baidu3
,href=\"\">baidu
- baidu1
- baidu2
- baidu3
")href=\"\">baidu
- baidu1
- baidu2
- baidu3
").appendTo("#subfolderadd");
先把这个html代码段变为jQuery对象,$("
,如var branches=$("
然后调用treeview()刷新显示:$("#example1").treeview({add:branches});
来自: /fylsh/blog/item/172c9e2ed37936341f3089b6.html