<html>
<head>
<meta charset="utf-8">
<title>jQuery Treeview 插件 - 基本</title>
<link rel="stylesheet" href="http://jquery.bassistance.de/treeview/jquery.treeview.css">
<link rel="stylesheet" href="http://jquery.bassistance.de/treeview/demo/screen.css">
<script src="http://jquery.bassistance.de/treeview/lib/jquery.js" type="text/javascript"></script>
<script src="http://jquery.bassistance.de/treeview/lib/jquery.cookie.js" type="text/javascript"></script>
<script src="http://jquery.bassistance.de/treeview/jquery.treeview.js" type="text/javascript"></script>
<script type="text/javascript" src="http://jquery.bassistance.de/treeview/demo/demo.js"></script>
</head>
<body>
<h1 id="banner">jQuery Treeview 插件 - 基本</h1>
<div id="main">
<h4>实例 1 - 默认</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（开始时是关闭的）</span>
<ul>
<li><span class="file">File 3.1</span></li>
</ul>
</li>
<li><span class="file">File 4</span></li>
</ul>
<h4>实例 2 - 导航</h4>
<ul id="navigation">
<li><a href="/demo/jquery-plugin-treeview.htm?1">Item 1</a>
<ul>
<li><a href="/demo/jquery-plugin-treeview.htm?1.0">Item 1.0</a>
<ul>
<li><a href="/demo/jquery-plugin-treeview.htm?1.0.0">Item 1.0.0</a></li>
</ul>
</li>
<li><a href="/demo/jquery-plugin-treeview.htm?1.1">Item 1.1</a></li>
<li><a href="/demo/jquery-plugin-treeview.htm?1.2">Item 1.2</a>
<ul>
<li><a href="/demo/jquery-plugin-treeview.htm?1.2.0">Item 1.2.0</a>
<ul>
<li><a href="/demo/jquery-plugin-treeview.htm?1.2.0.0">Item 1.2.0.0</a></li>
<li><a href="/demo/jquery-plugin-treeview.htm?1.2.0.1">Item 1.2.0.1</a></li>
<li><a href="/demo/jquery-plugin-treeview.htm?1.2.0.2">Item 1.2.0.2</a></li>
</ul>
</li>
<li><a href="/demo/jquery-plugin-treeview.htm?1.2.1">Item 1.2.1</a>
<ul>
<li><a href="/demo/jquery-plugin-treeview.htm?1.2.1.0">Item 1.2.1.0</a></li>
</ul>
</li>
<li><a href="/demo/jquery-plugin-treeview.htm?1.2.2">Item 1.2.2</a>
<ul>
<li><a href="/demo/jquery-plugin-treeview.htm?1.2.2.0">Item 1.2.2.0</a></li>
<li><a href="/demo/jquery-plugin-treeview.htm?1.2.2.1">Item 1.2.2.1</a></li>
<li><a href="/demo/jquery-plugin-treeview.htm?1.2.2.2">Item 1.2.2.2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="/demo/jquery-plugin-treeview.htm?2">Item 2</a>
<ul>
<li><span>Item 2.0</span>
<ul>
<li><a href="/demo/jquery-plugin-treeview.htm?2.0.0">Item 2.0.0</a>
<ul>
<li><a href="/demo/jquery-plugin-treeview.htm?2.0.0.0">Item 2.0.0.0</a></li>
<li><a href="/demo/jquery-plugin-treeview.htm?2.0.0.1">Item 2.0.0.1</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="/demo/jquery-plugin-treeview.htm?2.1">Item 2.1</a>
<ul>
<li><a href="/demo/jquery-plugin-treeview.htm?2.1.0">Item 2.1.0</a>
<ul>
<li><a href="/demo/jquery-plugin-treeview.htm?2.1.0.0">Item 2.1.0.0</a></li>
</ul>
</li>
<li><a href="/demo/jquery-plugin-treeview.htm?2.1.1">Item 2.1.1</a>
<ul>
<li><a href="/demo/jquery-plugin-treeview.htm?2.1.1.0abc">Item 2.1.1.0</a></li>
<li><a href="/demo/jquery-plugin-treeview.htm?2.1.1.1">Item 2.1.1.1</a></li>
<li><a href="/demo/jquery-plugin-treeview.htm?2.1.1.2">Item 2.1.1.2</a></li>
</ul>
</li>
<li><a href="/demo/jquery-plugin-treeview.htm?2.1.2">Item 2.1.2</a>
<ul>
<li><a href="/demo/jquery-plugin-treeview.htm?2.1.2.0">Item 2.1.2.0</a></li>
<li><a href="/demo/jquery-plugin-treeview.htm?2.1.2.1">Item 2.1.2.1</a></li>
<li><a href="/demo/jquery-plugin-treeview.htm?2.1.2.2">Item 2.1.2.2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="/demo/jquery-plugin-treeview.htm?3">Item 3</a>
<ul>
<li class="open"><a href="/demo/jquery-plugin-treeview.htm?3.0">Item 3.0</a>
<ul>
<li><a href="/demo/jquery-plugin-treeview.htm?3.0.0">Item 3.0.0</a></li>
<li><a href="/demo/jquery-plugin-treeview.htm?3.0.1">Item 3.0.1</a>
<ul>
<li><a href="/demo/jquery-plugin-treeview.htm?3.0.1.0">Item 3.0.1.0</a></li>
<li><a href="/demo/jquery-plugin-treeview.htm?3.0.1.1">Item 3.0.1.1</a></li>
</ul>
</li>
<li><a href="/demo/jquery-plugin-treeview.htm?3.0.2">Item 3.0.2</a>
<ul>
<li><a href="/demo/jquery-plugin-treeview.htm?3.0.2.0">Item 3.0.2.0</a></li>
<li><a href="/demo/jquery-plugin-treeview.htm?3.0.2.1">Item 3.0.2.1</a></li>
<li><a href="/demo/jquery-plugin-treeview.htm?3.0.2.2">Item 3.0.2.2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<h4>实例 3 - 快速动画，所有的树枝在开始时都是折叠的，红色的主题，基于 cookie 的持久性</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>实例 4 - 带有控制的树，黑色和灰色的主题，基于 cookie 的持久性</h4>
<div id="treecontrol">
<a title="折叠下面的树" href="#"><img src="http://jquery.bassistance.de/treeview/static/images/minus.gif"> 折叠全部</a>
<a title="展开下面的树" href="#"><img src="http://jquery.bassistance.de/treeview/static/images/plus.gif"> 展开全部</a>
<a title="切换下面的树，打开已关闭的树枝，关闭已打开的树枝" href="#">切换全部</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（开始时是关闭的）</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（开始时是关闭的）</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.7.6</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>
</body>
</html>