JQuery插件之- 树型插件jquery.treeview _Web前端

JQuery插件之-- 树型插件jquery.treeview

1. 地址：
http://dev.jquery.com/browser/trunk/plugins/treeview

可以下载 jquery.treeview.zip，其中包含了jquery.treeview.js 和压缩版，还有例子。

2. 起步

<!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=utf-8"/>
	<title>***系统</title>
	
	<link href="css/style.css" rel="stylesheet" type="text/css">
	<link rel="stylesheet" href="jquery/treeview/jquery.treeview.css" />
	<script src="jquery/jquery-1.7.2.min.js" type="text/javascript"></script>
	<script src="jquery/treeview/lib/jquery.cookie.js" type="text/javascript"></script>
	<script src="jquery/treeview/jquery.treeview.js" type="text/javascript"></script>
	
	<script type="text/javascript">
	$(document).ready(function(){
		$("#browser").treeview();
	});
	</script>
	</head>
	<body>
	<ul id="browser" class="filetree">
		<li class="folder"><span class="folder">流程管理引擎系统</span>
			<ul>
				<li class="closed"><span class="folder">故障查询</span>
					<ul>
						<li><span class="file">简单查询</span></li>
						<li><span class="file">高级查询</span></li>
					</ul>
				</li>
				<li class="closed">
					<span class="folder">故障统计</span>
					<ul>
						<li><span class="file">统计分析</span></li>
					</ul>
				</li>
	
				<li class="closed">
					<span class="folder">流程管理</span>
					<ul>
						<li><span class="file"><a href="workflow/process_definition_index.html" target="workareaFrame">流程维护</a></span></li>
						<li><span class="file">挂起流程</span></li>
						<li><span class="file">监控流程</span></li>
						<li><span class="file">设置优先级</span></li>
						<li><span class="file">催办流程</span></li>
					</ul>
				</li>	
				<li class="closed">
					<span class="folder">通知管理</span>
					<ul>
						<li><span class="file"><a href="notification/announcement_index.html" target="workareaFrame">公告管理</a></span></li>
					</ul>
				</li>					
	
				
			</ul>
		</li>
	</ul>
 
</body></html>