TaoBye

jquery.lightTreeview.js树形菜单插件例子

直接复制代码到编译器上面运行就可以看到效果！
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>淘拜网</title>
		<link rel="stylesheet" href="http://www.taobye.com/pc/download/lightTreeview/jquery.lightTreeview.css" />
		<script type="text/javascript" src="http://www.taobye.com/pc/download/jquery-1.8.3.min.js" ></script>
		<script type="text/javascript" src="http://www.taobye.com/pc/download/lightTreeview/jquery.lightTreeview.pack.js" ></script>
	</head>
	<body>
	<ul id="tree">
	    <li><a href="#">环保</a>
	        <ul>
	            <li><a href="#">章节一</a></li>
	            <li><a href="#">章节二</a></li>
	            <li><a href="#">章节三</a></li>
	            <li><a href="#">章节四</a></li>
	            <li><a href="#">章节测试</a></li>
	        </ul>
	    </li>
	    <li><a href="#">给排水</a>
	        <ul>
	            <li><a href="#">章节一</a></li>
	            <li><a href="#">章节二</a></li>
	            <li><a href="#">章节三</a></li>
	            <li><a href="#">章节四</a></li>
	            <li><a href="#">章节测试</a></li>
	        </ul>
	    </li>
	    <li><a href="#">环评</a>
	        <ul>
	            <li><a href="#">章节一</a></li>
	            <li><a href="#">章节二</a></li>
	            <li><a href="#">章节三</a></li>
	            <li><a href="#">章节四</a></li>
	            <li><a href="#">章节测试</a></li>
	        </ul>
	    </li>
	</ul>
	</body>
	<script>
	$(function(){
	    $('#tree').lightTreeview({
	    collapse: true,//是否允许收缩或展开树型菜单。默认为true
	    line: true, //是否始用连接线。默认为true。你也可以直接对根节点加入类“treeview-noline”来实现同样的效果
	    nodeEvent: true, //是否将节点标题的点击也绑定菜单收缩展开的事件。默认为true
	    unique: false, //同级节点是否互斥。默认为false
	    style: 'red',  //菜单风格。目前有默认,灰色,红色,黑色,fam 共5种风格，风格可以通过添加CSS来增加。你也可以直接对根节点加入类“treeview-风格名称”来实现同样的效果
	    fileico: true, //是否显示文件的图标。默认为false。你也可以对节点的DOM加入类“treeview-file”来实现同样的效果
	    folderico: true, //是否显示节点文件夹的图标。默认为false。你也可以对节点的DOM加入类“treeview-folder”来实现同样的效果
	    animate: 400 //动画效果。0为无效果。默认为200
	    });
	})
	</script>
</html>
阅读：4364   发布：2017-08-31 16:46:00
正在加载评论...