首页  |  知识库  |  资源下载  |  在线工具  |  A-Z  •  JAR  •  名词查         

jquery_treeview实现树型demo代码完整示例下载

标签:jquery,treeview,树型,demo示例,jquery.treeview.js     发布时间:2019-02-26   

一、演示说明

基于jquery的jquery.treeview组件,实现tree型效果代码示例,如下图所示

二、示例源码

<!DOCTYPE html>@b@<html>@b@<head>@b@<meta charset="utf-8">@b@	<title>jQuery Treeview demo</title>@b@@b@	<link rel="stylesheet" href="http://www.xwood.net/js/jquery/treeview/jquery.treeview.css" />@b@@b@	<script src="http://www.xwood.net/js/jquery-1.6.2.min.js"></script>@b@	<script src="http://www.xwood.net/js/jquery/cookie/jquery.cookie-min.js"></script>@b@	@b@	<script src="http://www.xwood.net/js/jquery/treeview/jquery.treeview.js" type="text/javascript"></script>@b@@b@	<script type="text/javascript">@b@	$(document).ready(function(){@b@		$("#browser").treeview({@b@			toggle: function() {@b@				console.log("%s was toggled.", $(this).find(">span").text());@b@			}@b@		});@b@@b@		$("#add").click(function() {@b@			var branches = $("<li><span class='folder'>New Sublist</span><ul>" +@b@				"<li><span class='file'>Item1</span></li>" +@b@				"<li><span class='file'>Item2</span></li></ul></li>").appendTo("#browser");@b@			$("#browser").treeview({@b@				add: branches@b@			});@b@		});@b@	});@b@	</script>@b@	</head>@b@	<body>@b@@b@	<h1 id="banner">jQuery Treeview</h1>@b@	<div id="main">@b@@b@	@b@@b@	<ul id="browser" class="filetree treeview-famfamfam">@b@		<li><span class="folder">Folder 1</span>@b@			<ul>@b@				<li><span class="folder">Item 1.1</span>@b@					<ul>@b@						<li><span class="file">Item 1.1.1</span></li>@b@					</ul>@b@				</li>@b@				<li><span class="folder">Folder 2</span>@b@					<ul>@b@						<li><span class="folder">Subfolder 2.1</span>@b@							<ul id="folder21">@b@								<li><span class="file">File 2.1.1</span></li>@b@								<li><span class="file">File 2.1.2</span></li>@b@							</ul>@b@						</li>@b@						<li><span class="folder">Subfolder 2.2</span>@b@							<ul>@b@								<li><span class="file">File 2.2.1</span></li>@b@								<li><span class="file">File 2.2.2</span></li>@b@							</ul>@b@						</li>@b@					</ul>@b@				</li>@b@				<li class="closed"><span class="folder">Folder 3 (closed at start)</span>@b@					<ul>@b@						<li><span class="file">File 3.1</span></li>@b@					</ul>@b@				</li>@b@				<li><span class="file">File 4</span></li>@b@			</ul>@b@		</li>@b@	</ul>@b@@b@	<button id="add">Add!</button>@b@@b@	@b@@b@</div>@b@@b@</body></html>
  • 云盘下载:
  • 本地下载: