<!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=gb2312" />
<title>lightTreeview - jQuery树型菜单插件 download by http://www.codefans.net</title>
<link href="jquery.lightTreeview.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="remove/jquery.lightTreeview.js"></script>
<script type="text/javascript">
$(function() {
$('#demo4').lightTreeview({
collapse: true,
line: true,
nodeEvent: true,
unique: false,
style: 'gray',
animate: 100,
fileico: true,
folderico: true
});
});
</script>
<style type="text/css">
body {
font-size: 12px;
font-family: "宋体";
}
pre {
font-family: Courier New;
font-size: 14px;
border:#CCCCCC 1px solid;
padding:3px;
background-color: #E0FBFA;
}
p {
line-height: 150%;
margin: 0;
}
.btn {
cursor: pointer;
color: #0066FF;
}
.exp {
font-family: "Courier New","宋体";
font-size: 12px;
color: gray;
}
</style>
</head>
<body>
<h2>jquery.lightTreeview.js</h2>
<p>版本：1.0.0
<br />
在以下浏览器中测试通过：<br />
IE6.0
<br />
IE7.0<br />
Firefox 2.0.0
<br />
Opera 9.10<br />
Safari 3.04
<br />
<br />
绯雨制作，请至<a href="http://feiyu.asgard.cn" target="_blank">http://feiyu.asgard.cn</a>留言 <br /> <br />
<a href="http://www.codefans.net/soft/4472.shtml">点此下载（含Demo）</a></p>
<h2>详细解释</h2>
<pre>$('#demo3').lightTreeview({ <span class="exp">//指定需要转化成treeview的ul或ol</span>
collapse: true, <span class="exp">//是否允许收缩或展开树型菜单。默认为true</span>
line: true, <span class="exp">//是否始用连接线。默认为true。你也可以直接对根节点加入类“treeview-noline”来实现同样的效果</span>
nodeEvent: true, <span class="exp">//是否将节点标题的点击也绑定菜单收缩展开的事件。默认为true</span>
unique: false, <span class="exp">//同级节点是否互斥。默认为false</span>
animate: 200, <span class="exp">//动画效果。0为无效果。默认为200</span>
style: 'red', <span class="exp">//菜单风格。目前有默认,灰色,红色,黑色,fam 共5种风格，风格可以通过添加CSS来增加。你也可以直接对根节点加入类“treeview-风格名称”来实现同样的效果</span>
fileico: false, <span class="exp">//是否显示文件的图标。默认为false。你也可以对节点的DOM加入类“treeview-file”来实现同样的效果</span>
folderico: false <span class="exp">//是否显示节点文件夹的图标。默认为false。你也可以对节点的DOM加入类“treeview-folder”来实现同样的效果</span>
});</pre>
<pre>
<span class="exp">//开启指定的菜单，第一个参数为指定菜单的选择器，第二个参数为动画效果</span>
$.lightTreeview.open('#demo3 ul',200);
<span class="exp">//关闭指定的菜单，第一个参数为指定菜单的选择器，第二个参数为动画效果</span>
$.lightTreeview.close('#demo3 ul',200);
<span class="exp">//切换指定的菜单的样式（关闭变打开，打开变关闭），第一个参数为指定菜单的选择器，第二个参数为动画效果</span>
$.lightTreeview.toggle('#demo3 ul',200);
</pre>
<h2>Demo4</h2>
<p class="description">通过Plugin提供的$.lightTreeview.open(selector);$.lightTreeview.close(selector);$.lightTreeview.toggle(selector);三个函数，您可以自己收缩或展开需要的节点</p>
<span class="btn" onclick="$.lightTreeview.open('#demo4 ol,#demo4 ul')">展开全部</span> |
<span class="btn" onclick="$.lightTreeview.close('#demo4 ol,#demo4 ul')">收缩全部</span> |
<span class="btn" onclick="$.lightTreeview.toggle('#demo4 ol,#demo4 ul')">切换全部</span> |
<span class="btn" onclick="$.lightTreeview.toggle('#demo4 ul:last')">切换广东节点</span>
<ul id="demo4"><div>树形下拉列表</div>
<li><div>北京</div>
</li>
<li>
<div>浙江</div>
<ul style="display:none">
<li>
<div>杭州</div>
<ul style="display:none">
<li><div>上城区</div>
<ul style="display:none">
<li><div>广州</div></li>
<li><div>湛江</div></li>
<li><div>佛山</div></li>
</ul>
</li>
<li><div>下城区</div></li>
<li><div>江干区</div></li>
<li><div>西湖区</div></li>
</ul>
</li>
<li><div>宁波</div></li>
<li><div>绍兴</div></li>
</ul>
</li>
<li>
<div>广东</div>
<ul style="display:none">
<li><div>广州</div></li>
<li><div>湛江</div></li>
<li><div>佛山</div></li>
</ul>
</li>
<li><div>上海</div></li>
</ul>
</body>
</html>
jquery写的一个树形控件包含测试页面
4星 · 超过85%的资源 需积分: 10 62 浏览量
2011-05-23
10:36:18
上传
评论 1
收藏 82KB RAR 举报 
jquery.lightTreeview-1.0.0.rar （22个子文件） 
jquery.lightTreeview-1.0.0 
jquery-1.3.2.js 118KB jquery.lightTreeview.pack.js 2KB remove jquery-1.2.6.js 30KB jquery.lightTreeview.js 3KB jquery.lightTreeview.min.js 2KB jquery.lightTreeview.css 3KB images 
treeview-default-line.gif 2KB treeview-black.gif 1KB folder-open.gif 106B treeview-gray-line.gif 2KB treeview-gray.gif 1KB treeview-famfamfam.gif 1KB folder-close.gif 105B Thumbs.db 24KB treeview-default.gif 1KB from-download.gif 9KB treeview-red.gif 1KB treeview-black-line.gif 2KB file.gif 110B treeview-red-line.gif 2KB treeview-famfamfam-line.gif 807B
index.html 4KB
- 1
- 2
前往页