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 ...
随机推荐
- 成长这事儿，不可不说-------Day36
事实上我一直都有一个观点,从我当年刚学抛物线那会就有:人生事实上就是一条轨迹,无非是一些点的集合.只是有些在低谷,有些在高峰,放形象了看,有些熠熠生辉,有些暗淡的几若消逝,有些人总喜欢回头数着过往的痕 ...
- Linux的各个文件夹名称解释(FHS)
对于接触和已经接触过一段时间Linux的使用者来说,系统的各个文件夹名字还是挺让人费解的,什么etc,usr,var等等,大部分也是耳濡目染才有一个大概的概念,例如usr是存放自己编译安装的软件,et ...
- Android蓝牙通信具体解释
蓝牙通信的大概过程例如以下: 1.首先开启蓝牙 2,搜索可用设备 3,创建蓝牙socket.获取输入输出流 4,读取和写入数据 5.断开连接关闭蓝牙 还要发送配对码发送进行推断! 以下是全部的源码:不 ...
- eclipse导入web工程变成Java工程，解决方案
经常在eclipse中导入web项目时,出现转不了项目类型的问题,导入后就是一个java项目. 解决步骤: 1.进入项目目录,可看到.project文件,文本编辑器打开. 2.找到<nature ...
- Linux nginx部署laravel
Composer Composer 是 php 的一个依赖管理工具.它允许你申明项目所依赖的代码库,它会在你的项目中为你安装他们.运行 Composer 需要 PHP 5.3.2+ 以上版本.一些敏感 ...
- C++ 错误积累
错误一 VS2012错误:不能在成员函数 的类外部重新声明该函数 解决:检查函数的大括号匹配
- 爬虫入门【6】Selenium用法简介
Selenium 是什么? 一句话,自动化测试工具.它支持各种浏览器,包括 Chrome,Safari,Firefox 等主流界面式浏览器. 如果你在这些浏览器里面安装一个 Selenium 的插件, ...
- Cadence 15.7 win7无法启动解决方法
原帖地址:http://blog.sina.com.cn/s/blog_69a5dce90100kscf.html 按照XP下的破解方法安装Cadence15.7后, 如果不能正常启动Cadence ...
- 摘要: CentOS 6.5搭建Redis3.2.8伪分布式集群
from https://my.oschina.net/ososchina/blog/856678 摘要: CentOS 6.5搭建Redis3.2.8伪分布式集群 前言 最近在服务器上搭建了 ...
- 智能家居DIY-空气质量检测篇-获取空气污染指数
前言 话说楼主终于升级当爸了,宝宝现在5个月了,宝宝出生的时候是冬天,正是魔都空气污染严重的时候,当时就想搞个自动开启空气净化器,由于种种原因一直没有时间搞,最近终于闲下来了这个事情终于提上议程了,现 ...