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 ...
随机推荐
- Android基础笔记（十八）- Fragment
博客的感悟终点-開始 什么是Fragment 加入fragment到Activity的两种方式 Fragment的生命周期 Fragment的向下兼容 Fragment之间的通信 博客的感悟,终点-開 ...
- jquery的on()
定义和用法 on() 方法在被选元素及子元素上添加一个或多个事件处理程序. 自 jQuery 版本 1.7 起,on() 方法是 bind().live() 和 delegate() 方法的新的替代品 ...
- 【JMeter4.0学习（四）】之JMeter对JMS性能测试脚本开发
目录: 安装ActiveMQ并启动服务 JMeter对JMS点到点测试计划 JMeter JMS主题测试计划 附:相关学习地址 一.ActiveMQ官方下载地址:http://activemq.apa ...
- Hugo hexo 搭建博客系列1：自己的服务器
hexo jekyll https://hexo.io/zh-cn/ http://theme-next.iissnan.com/getting-started.html Hexo 是高效的静态站点生 ...
- ffmpeg保存原始数据PCM YUV
保存yuv ffmpeg -i video.mp4 -c:v rawvideo -pix_fmt yuv420p out.yuv 保存pcm ffmpeg -i input.flv -f s16le ...
- JQ 修改样式
//获取当前的url var url=document.location.href; var url_cn='http://www.macau-airport.com/cn/our-business/ ...
- python带setup.py的包的安装
如psutil-4.2.0.tar.gz tar -zxvf psutil-4.2.0.tar.gz psutil-4.2.0 cd psutil-4.2.0 sudo python setup.py ...
- 闪屏Flash动画
这个也比较简单,之前也做过不少 今天这个就为了方便日后使用,希望大家都可以借鉴借鉴啊! @ViewInject(R.id.linMain) private LinearLayout linMain; ...
- 【BZOJ4927】第一题 双指针+DP（容斥？）
[BZOJ4927]第一题 Description 给定n根直的木棍,要从中选出6根木棍,满足:能用这6根木棍拼 出一个正方形.注意木棍不能弯折.问方案数. 正方形:四条边都相等.四个角都是直角的四边 ...
- 使用ILookup<TKey, TElement> 接口查找集合
public class Program { public static void Main() { // 创建一个放入ilookup数据结构的School清单. List<School> ...