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 ...
随机推荐
- 【LeetCode-面试算法经典-Java实现】【118-Pascal's Triangle（帕斯卡三角形）】
[118-Pascal's Triangle(帕斯卡三角形(杨辉三角))] [LeetCode-面试算法经典-Java实现][全部题目文件夹索引] 原题 Given numRows, generate ...
- 《Python基础教程》第20章学习笔记
python实现:https://github.com/captainwong/instant_markup c++实现:https://github.com/captainwong/instant_ ...
- 关于JQ checkbox选择的问题
今天做了一个狠坑爹的事情. $("#dele_chk").bind('click',function(){ if($(this).attr('checked')){ $(" ...
- 信号量semaphore解析
1 基础概念 信号量在创建时须要设置一个初始值,表示同一时候能够有几个任务能够訪问该信号量保护的共享资源.初始值为1就变成相互排斥锁(Mutex),即同一时候仅仅能有一个任务能够訪问信号量保护的共享资 ...
- Android JNI开发之NDK环境搭建
参考:http://www.cnblogs.com/yejiurui/p/3476565.html 谷歌改良了ndk的开发流程,对于Windows环境下NDK的开发,如果使用的NDK是r7之前的版本, ...
- solr6.5的分词
1.配置solr6.5自带中文分词.复制/usr/local/solr/contrib/analysis-extras/lucene-libs/lucene-analyzers-smartcn-6.5 ...
- apple-touch-icon-precomposed 和 apple-touch-icon属性区别
苹果safari浏览器当中apple-touch-icon-precomposed 和 apple-touch-icon属性是有区别的,之前在网上查了下相关的资料和苹果的开发文档手册,对这两中属性区别 ...
- POJ 2031 Building a Space Station【经典最小生成树】
链接: http://poj.org/problem?id=2031 http://acm.hust.edu.cn/vjudge/contest/view.action?cid=22013#probl ...
- linux c编程：信号(三) sigprocmask和sigpending函数
信号源为目标进程产生了一个信号,然后由内核来决定是否要将该信号传递给目标进程.从信号产生到传递给目标进程的流程图如下图所示: 进程可以阻塞信号的传递.当信号源为目标进程产生了一个信号之后,内核会执行依 ...
- mongodb 的注意点
昨天同事安装mongodb遇到了些问题,问了下我,后拉发现都是些细节没注意(讲道理这应该是很简单,一顿操作就ok的事情) 首先,下载 mongo包, 然后 ,解压安装, 启动之. 问题就出现在他后台启 ...