jQuery树形菜单(1)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=\"http://www.baidu.com/">baidu</a><ul><li>baidu1</li><li>baidu2</li><li>baidu3</li></ul></li>,
先把这个html代码段变为jQuery对象,
$("<li class=\"closed\"><a href=\"www.baidu.com\">baidu</a><ul><li>baidu1</li><li>baidu2</li><li>baidu3</li></ul></li>"),
如var branches=$("<li class=\"closed\"><a href=\"www.baidu.com\">baidu</a><ul><li>baidu1</li><li>baidu2</li><li>baidu3</li></ul></li>").appendTo("#subfolderadd");
然后调用treeview()刷新显示:$("#example1").treeview({add:branches});
jQuery树形菜单(1)jquery.treeview的更多相关文章
- jQuery 树形菜单
树形菜单 在 jQuery easyu中其左侧的主菜单使用的是 easyui 中的 tree 组件,不是太熟悉,不过感觉不是太好用. 比如 easyui 中的 tree 需要单击分叉节点前的小三角,才 ...
- jquery树形菜单
转自:http://keleyi.com/dev/3068696139522ae4.htm 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- jquery树形菜单插件treeView
Jquery的treeview很好用,如果是简单的树形菜单按照下面的源码实例模仿就可以. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr ...
- jquery树形菜单完整代码
本实例实现了树形的动态菜单,兼容IE8,火狐,Chrome等浏览器.使用了jQuery的toggle() 方法.效果和代码如下: <!DOCTYPE html PUBLIC "-//W ...
- jQuery树形菜单,使用zTree插件,异步载入 & 编辑功能&Check 共存
一.下载zTree插件 地址:http://www.ztree.me 二.HTML代码 <%@ Page Language="C#" AutoEventWireup=&quo ...
- Bootstrap风格zTree树形菜单插件
这是一款bootstrap风格jQuery zTree树形菜单插件,支持自定义编辑.添加列表菜单.删除列表等功能的jQuery树形菜单代码.在线演示 具体代码实现: <!DOCTYPE html ...
- C#winform菜单权限分配,与菜单同步的treeView树状菜单权限控制使用心得
在网上查了很多,发现没有讲述关于--C#winform菜单权限分配,与菜单同步的treeView树状菜单权限控制使用--的资料 自己研究了一个使用方法.下面来看看. 我有两个窗体:LOGINFRM,M ...
- JQuery实现动态生成树形菜单
jQuery实现动态生成树形菜单 有一个需求:菜单导航条需要依据不同的权限动态提取出来.计划是将功能模块与用户权限之间的关系保持到一个配置表中.所以功能菜单的话就需要动态提取出来再显示.借助jquer ...
- 5JS树形结构菜单和jQuery版
第一版JS版HTML: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
随机推荐
- python "yield"(转载)
转载地址:http://www.ibm.com/developerworks/cn/opensource/os-cn-python-yield/ 您可能听说过,带有 yield 的函数在 Python ...
- leveldb 学习笔记之VarInt
在leveldb在查找比较时的key里面保存key长度用的是VarInt,何为VarInt呢,就是变长的整数,每7bit代表一个数,第8bit代表是否还有下一个字节, 1. 比如小于128(一个字节以 ...
- mysql创建新用户并分配数据库权限
下面展示了如何在Linux中创建和设置一个MySQL用户. 首先以root身份登录到MySQL服务器中. $ mysql -u root -p 当验证提示出现的时候,输入MySQL的root帐号的密码 ...
- $http服务和$location
1.angular的$http服务跟jquery中的ajax很类似,用法如下: $http({ method : 'GET', url : 'data.php' }).success(function ...
- Asp.Net MVC4入门指南(5):从控制器访问数据模型
在本节中,您将创建一个新的MoviesController类,并在这个Controller类里编写代码来取得电影数据,并使用视图模板将数据展示在浏览器里. 在开始下一步前,先Build一下应用程序(生 ...
- ASP.NET控件<ASP:Button /> html控件<input type="button">区别联系
ASP.NET控件<ASP:Button />-------html控件<input type="button">杨中科是这么说的:asp和input是一样 ...
- Winform打砖块游戏制作step by step第5节---重构代码,利用继承多态
一 引子 为了让更多的编程初学者,轻松愉快地掌握面向对象的思考方法,对象继承和多态的妙用,故推出此系列随笔,还望大家多多支持. 二 本节内容---重构代码,利用继承多态 1. 主界面截图如下: 2. ...
- VBA学习之关于数据透视表的应用
工作中很多地方需要同时处理多个数据表,而且用数据透视表进行排版,排序,计算字段,一个一个的做非常累,这里给出批量处理的方法. 学习VBA之前最好懂一点点VB的基础知识,因为里面的很多语法问题都是由VB ...
- 对于cookie和session的形象解释
生活中的场景: 一群人,买豆浆,也不排队,乱哄哄的 豆浆现磨. 先交钱,交完钱蹲在一边等. 这个老板非常健忘! 记忆时间:转脸就忘. 李四给老板钱<--->"大杯黄豆!" ...
- Tp field 字段是可以添加函数的
$info = M('Order')->alias('a') ->field('count(DISTINCT(a.order_user_id)) as buy_user_num,count ...