jquery树形菜单插件treeView
Jquery的treeview很好用，如果是简单的树形菜单按照下面的源码实例模仿就可以。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<title>jQuery treeview</title>
<link rel="stylesheet" href="jquery.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 type="text/javascript" src="demo.js"></script>
</head>
<body>
<h1 id="banner">jQuery Treeview Plugin Demo</h1>
<div id="main">
<a href="demo.js">Pagecode</a>
<h3>Other demos</h3>
<ul>
<li><a href="large.html">Large Tree Demo</a></li>
<li><a href="prerendered.html">Prerendered Large Tree Demo</a></li>
<li><a href="async.html">Async Tree Demo</a></li>
<li><a href="edit.html">Editable Tree Demo</a></li>
<li><a href="simple.html">Simple Tree Demo, famfamfam theme (no lines)</a></li>
</ul>
<h4>Sample 1 - default</h4>
<ul id="browser" class="filetree">
<li><span class="folder">Folder 1</span>
<ul>
<li><span class="file">Item 1.1</span></li>
</ul>
</li>
<li><span class="folder">Folder 2</span>
<ul>
<li><span class="folder">Subfolder 2.1</span>
<ul id="folder21">
<li><span class="file">File 2.1.1</span></li>
<li><span class="file">File 2.1.2</span></li>
</ul>
</li>
<li><span class="file">File 2.2</span></li>
</ul>
</li>
<li class="closed"><span class="folder">Folder 3 (closed at start)</span>
<ul>
<li><span class="file">File 3.1</span></li>
</ul>
</li>
<li><span class="file">File 4</span></li>
</ul>
<h4>Sample 2 - Navigation</h4>
<ul id="navigation">
<li><a href="?1">Item 1</a>
<ul>
<li><a href="?1.0">Item 1.0</a>
<ul>
<li><a href="?1.0.0">Item 1.0.0</a></li>
</ul>
</li>
<li><a href="?1.1">Item 1.1</a></li>
<li><a href="?1.2">Item 1.2</a>
<ul>
<li><a href="?1.2.0">Item 1.2.0</a>
<ul>
<li><a href="?1.2.0.0">Item 1.2.0.0</a></li>
<li><a href="?1.2.0.1">Item 1.2.0.1</a></li>
<li><a href="?1.2.0.2">Item 1.2.0.2</a></li>
</ul>
</li>
<li><a href="?1.2.1">Item 1.2.1</a>
<ul>
<li><a href="?1.2.1.0">Item 1.2.1.0</a></li>
</ul>
</li>
<li><a href="?1.2.2">Item 1.2.2</a>
<ul>
<li><a href="?1.2.2.0">Item 1.2.2.0</a></li>
<li><a href="?1.2.2.1">Item 1.2.2.1</a></li>
<li><a href="?1.2.2.2">Item 1.2.2.2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="?2">Item 2</a>
<ul>
<li><span>Item 2.0</span>
<ul>
<li><a href="?2.0.0">Item 2.0.0</a>
<ul>
<li><a href="?2.0.0.0">Item 2.0.0.0</a></li>
<li><a href="?2.0.0.1">Item 2.0.0.1</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="?2.1">Item 2.1</a>
<ul>
<li><a href="?2.1.0">Item 2.1.0</a>
<ul>
<li><a href="?2.1.0.0">Item 2.1.0.0</a></li>
</ul>
</li>
<li><a href="?2.1.1">Item 2.1.1</a>
<ul>
<li><a href="?2.1.1.0abc">Item 2.1.1.0</a></li>
<li><a href="?2.1.1.1">Item 2.1.1.1</a></li>
<li><a href="?2.1.1.2">Item 2.1.1.2</a></li>
</ul>
</li>
<li><a href="?2.1.2">Item 2.1.2</a>
<ul>
<li><a href="?2.1.2.0">Item 2.1.2.0</a></li>
<li><a href="?2.1.2.1">Item 2.1.2.1</a></li>
<li><a href="?2.1.2.2">Item 2.1.2.2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="?3">Item 3</a>
<ul>
<li class="open"><a href="?3.0">Item 3.0</a>
<ul>
<li><a href="?3.0.0">Item 3.0.0</a></li>
<li><a href="?3.0.1">Item 3.0.1</a>
<ul>
<li><a href="?3.0.1.0">Item 3.0.1.0</a></li>
<li><a href="?3.0.1.1">Item 3.0.1.1</a></li>
</ul>
</li>
<li><a href="?3.0.2">Item 3.0.2</a>
<ul>
<li><a href="?3.0.2.0">Item 3.0.2.0</a></li>
<li><a href="?3.0.2.1">Item 3.0.2.1</a></li>
<li><a href="?3.0.2.2">Item 3.0.2.2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<h4>Sample 3 - fast animations, all branches collapsed at first, red theme, cookie-based persistance</h4>
<ul id="red" class="treeview-red">
<li><span>Item 1</span>
<ul>
<li><span>Item 1.0</span>
<ul>
<li><span>Item 1.0.0</span></li>
</ul>
</li>
<li><span>Item 1.1</span></li>
<li><span>Item 1.2</span>
<ul>
<li><span>Item 1.2.0</span>
<ul>
<li><span>Item 1.2.0.0</span></li>
<li><span>Item 1.2.0.1</span></li>
<li><span>Item 1.2.0.2</span></li>
</ul>
</li>
<li><span>Item 1.2.1</span>
<ul>
<li><span>Item 1.2.1.0</span></li>
</ul>
</li>
<li><span>Item 1.2.2</span>
<ul>
<li><span>Item 1.2.2.0</span></li>
<li><span>Item 1.2.2.1</span></li>
<li><span>Item 1.2.2.2</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><span>Item 2</span>
<ul>
<li><span>Item 2.0</span>
<ul>
<li><span>Item 2.0.0</span>
<ul>
<li><span>Item 2.0.0.0</span></li>
<li><span>Item 2.0.0.1</span></li>
</ul>
</li>
</ul>
</li>
<li><span>Item 2.1</span>
<ul>
<li><span>Item 2.1.0</span>
<ul>
<li><span>Item 2.1.0.0</span></li>
</ul>
</li>
<li><span>Item 2.1.1</span>
<ul>
<li><span>Item 2.1.1.0</span></li>
<li><span>Item 2.1.1.1</span></li>
<li><span>Item 2.1.1.2</span></li>
</ul>
</li>
<li><span>Item 2.1.2</span>
<ul>
<li><span>Item 2.1.2.0</span></li>
<li><span>Item 2.1.2.1</span></li>
<li><span>Item 2.1.2.2</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="open"><span>Item 3</span>
<ul>
<li class="open"><span>Item 3.0</span>
<ul>
<li><span>Item 3.0.0</span></li>
<li><span>Item 3.0.1</span>
<ul>
<li><span>Item 3.0.1.0</span></li>
<li><span>Item 3.0.1.1</span></li>
</ul>
</li>
<li><span>Item 3.0.2</span>
<ul>
<li><span>Item 3.0.2.0</span></li>
<li><span>Item 3.0.2.1</span></li>
<li><span>Item 3.0.2.2</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<h4>Sample 4 - two trees with one tree control, black and gray theme, cookie-based persistance</h4>
<div id="treecontrol">
<a title="Collapse the entire tree below" href="#"><img src="data:images/minus.gif" /> Collapse All</a>
<a title="Expand the entire tree below" href="#"><img src="data: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>
<li>
<span>Item 2</span>
<ul>
<li>
<span>Item 2.1</span>
<ul>
<li>Item 2.1.1</li>
<li>Item 2.1.2</li>
</ul>
</li>
<li>Item 2.2</li>
<li class="closed">
<span>Item 2.3 (closed at start)</span>
<ul>
<li>Item 2.3.1</li>
<li>Item 2.3.2</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul id="gray" class="treeview-gray">
<li>Item 1</li>
<li>
<span>Item 2</span>
<ul>
<li class="closed">
<span>Item 2.1 (closed at start)</span>
<ul>
<li>Item 2.1.1</li>
<li>Item 2.1.2</li>
</ul>
</li>
<li>Item 2.2.1</li>
<li>Item 2.2.2</li>
<li>Item 2.2.3</li>
<li>Item 2.2.4</li>
<li>Item 2.2.5</li>
<li>Item 2.2.6</li>
<li>Item 2.2.7</li>
<li>Item 2.2.8</li>
<li>
<span>Item 2.3</span>
<ul>
<li>Item 2.3.1</li>
<li>Item 2.3.2</li>
<li>Item 2.3.3</li>
<li>Item 2.3.4</li>
<li>Item 2.3.5</li>
<li>Item 2.3.6</li>
<li>Item 2.3.7</li>
<li>Item 2.3.8</li>
<li>Item 2.3.9</li>
</ul>
</li>
<li>
<span>Item 2.4</span>
<ul>
<li>Item 2.4.1</li>
<li>Item 2.4.2</li>
<li>Item 2.4.3</li>
<li>Item 2.4.4</li>
<li>Item 2.4.5</li>
<li>Item 2.4.6</li>
<li>Item 2.4.7</li>
<li>Item 2.4.8</li>
<li>Item 2.4.9</li>
</ul>
</li>
</ul>
</li>
<li>Item 3</li>
</ul>
</div>
<script src="http://www.jq22.com/js/jq.js"></script>
</body></html>
根据树形菜单实现动态div链接实例，关于实现树形菜单请参照上文内容。
<script type="text/javascript">
$(function(){
$("#li1").click(function(){
$("#div1").load("save.jsp");
});
$("#li2").click(function(){
$("#div2").load("save.jsp");
});
});
</script>
<body>
<div>
<ul id="browser" class="filetree">
<li ><span class="folder"><a href="">NO</a></span>
<ul>
<li id="li1"><span class="file"><a href="#">1</a></span></li>
<li id="li2"><span class="file"><a href="#">2</a></span></li>
</ul>
</li>
</ul>
</div>
<div id="div1">
div1
</div>
<div id="div2">
div2
</div>
</body>
jquery树形菜单插件treeView的更多相关文章
- 8 个最好的 jQuery 树形 Tree 插件
由于其拥有庞大,实用的插件库,使得 jQuery 变得越来越流行.今天将介绍一些最好的 jQuery 树形视图插件,具有扩展和可折叠的树视图.这些都是轻量级的,灵活的 jQuery 插件,它将一个无序 ...
- Bootstrap风格zTree树形菜单插件
这是一款bootstrap风格jQuery zTree树形菜单插件,支持自定义编辑.添加列表菜单.删除列表等功能的jQuery树形菜单代码.在线演示 具体代码实现: <!DOCTYPE html ...
- jquery树形菜单
转自:http://keleyi.com/dev/3068696139522ae4.htm 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- Smint – 用于单页网站制作的 jQuery 导航菜单插件
Smint 是一款用于实现单页风格网站的 jQuery 导航插件,包含两部分:固定在页面顶部的精美导航条和能够在你点击的时候自动滚动到对应内容的菜单按钮.Smint 使用非常简单,只有一个参数用于设置 ...
- Jquery多级菜单插件Slimmenu使用说明
Jquery多级菜单插件Slimmenu使用说明 现在扁平化设计逐渐的成为了趋势,不管是pc web,还是移动互联网的应用开发,都在研究和设计Flat ui, 这里有一篇文章说明扁平化的设计的一些想法 ...
- vim 树形菜单插件NERDTree 的安装
vim 树形菜单插件的安装 NERDTree 1. mkdir ~/.vim cd ~/.vim mkdir bundle mkdir autoload 2. curl -Sso ~/.vim/au ...
- 分享14个很酷的jQuery导航菜单插件
导航按钮是网站的非常重要的一部分,因其将网站的所有部分而集中一处,jQuery导航菜单插件在其中扮演重要的角色. 本文介绍了14个很酷的jQuery导航菜单插件,它们够漂亮.简单,并且完全兼容各种类型 ...
- 几款jQuery右键菜单插件介绍
在网页中使用自定义右键菜单,实现上皆为使用javascript禁用浏览器默认的右键菜单,然后在网页中响应鼠标右键事件,弹出自定义的菜单. 类似右键菜单的组件网上很多.一般而言,改变浏览器的默认菜单应当 ...
- jQuery树形菜单(1)jquery.treeview
jQuery的树形插件资料URL:http://bassistance.de/jquery-plugins/jquery-plugin-treeview/从该网站Download得到jquery.tr ...
随机推荐
- 【转】【Python学习】之哪些 Python 库让你相见恨晚？
感谢作者:赖明星 文章链接地址:<哪些 Python 库让你相见恨晚?>
- Android中的常见通信机制和Linux中的通信机制
Handler Handler是Android系统中的一种消息传递机制,起作用是应对多线程场景.将A进程的消息传递给B线程,实现异步消息处理.很多情况是将工作线程中需要更新UI的操作消息传递给UI主线 ...
- /bin/sh^M:bad interpreter: No such file or directory
bash脚本:/bin/sh^M:bad interpreter: No such file or directory dos2unix 实际上就是把文本文件中面的^M删除 用SHELL 写了一个 ...
- ios NavigationViewController跳转以及返回传值
(一)使用NavigationViewController进行页面跳转时,应该使用pushViewController方法来跳转至下一页面.这种话.下一页面相同在NavigationViewContr ...
- textarea中的内容的获取
今天他们说为啥获取不到textarea的数值 这个问题让我很纳闷 为什么会获取不到呢? 按照逻辑来说 同样都是表单元素 怎么可能出现呢? 我就看了一眼代码 alert($("#texta ...
- PHP-Manual的学习----【语言参考】----【类型】
2017年7月17日15:18:02 该看Boolean 布尔类型1.PHP 支持 8 种原始数据类型. 2.四种标量类型: ◦ boolean(布尔型) ◦ integer(整型) ◦ ...
- jQuery Easy UI Draggable(拖动)组件
上文已经提到过了 jQuery EasyUI插件引用一般我们经常使用的有两种方式(排除easyload载入方式),所以本篇要总结的Draggable组件相同有两种方式载入: (1).使用class载入 ...
- python 正則表達式推断邮箱格式是否正确
import re def validateEmail(email): if len(email) > 7: if re.match("^.+\\@(\\[?) ...
- Razor里写函数
asp.net mvc的视图里使用Razor来书写服务器代码,人尽皆知.可以常常见到里面写上for循环语句,输出一大堆东东,牛逼得很. 可是,如果循环语句还不能满足我们的要求,需要定义一个函数来调用, ...
- Unity3d音乐
public AudioClip routineAudio; public AudioClip gameAudio; public AudioClip RewardAudio; publi ...