1、left.html 頁面內容
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2<html>
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5<title>后臺管理系統</title>
6<link rel="stylesheet" type="text/css" href="css/style.css">
7<script src="js/jquery.js" type="text/javascript"></script>
8<script src="js/jquery.treeview.js" type="text/javascript"></script>
9
<script type="text/javascript">
10
$(document).ready(function(){
11
$("#wenzhang>dd>dl>dd").hide();
12 $.each($("#wenzhang>dd>dl>dt"), function(){
13$(this).click(function(){
14$("#wenzhang>dd>dl>dd ").not($(this).next()).slideUp();
15$(this).next().slideToggle(500);
16
});
17});
18 });
19
20 function goSpace(obj){
21window.parent.main.location.href=obj;
22
}
23</script>
24
25
26</head>
27<body>
28<dl id="wenzhang">
29 <dd>
30 <dl>
31 <dt>權限系統</dt>
32 <dd>
33 <ul>
34 <li><a href="javascript:goSpace('queryOrgType.html')">機構類型管理</a></li>
35 <li><a href="javascript:goSpace('queryOrg.html')">機構崗位管理</a></li>
36 <li>用戶管理</li>
37 <li>角色管理</li>
38 <li>菜單管理</li>
39 <li>數據字典</li>
40 </ul>
41 </dd>
42
43 </dl>
44 </dd>
45 <dd>
46 <dl>
47 <dt>系統設置</dt>
48 <dd>
49 <ul>
50 <li>test1</li>
51 <li>test1</li>
52 <li>test1</li>
53 <li>test1</li>
54 </ul>
55 </dd>
56 </dl>
57 </dd>
58 <dd>
59 <dl>
60 <dt>我的工作</dt>
61 <dd>
62 <ul>
63 <li>work</li>
64 <li>work</li>
65 <li>work</li>
66 <li>work</li>
67 </ul>
68 </dd>
69 </dl>
70 </dd>
71 </dl>
72</body>
73</html>
2、jquery.js 自己在jquery官方網站上下載，筆者采用的是1.4.2的版本
3、jquery.treeview.js 的內容如下
1;(function($) {
2
3$.extend($.fn, {
4swapClass: function(c1, c2) {
5var c1Elements = this.filter('.' + c1);
6this.filter('.' + c2).removeClass(c2).addClass(c1);
7c1Elements.removeClass(c1).addClass(c2);
8return this;
9},
10replaceClass: function(c1, c2) {
11return this.filter('.' + c1).removeClass(c1).addClass(c2).end();
12},
13hoverClass: function(className) {
14className = className || "hover";
15return this.hover(function() {
16$(this).addClass(className);
17}, function() {
18$(this).removeClass(className);
19});
20},
21heightToggle: function(animated, callback) {
22animated ?
23this.animate({ height: "toggle" }, animated, callback) :
24this.each(function(){
25jQuery(this)[ jQuery(this).is(":hidden") ? "show" : "hide" ]();
26if(callback)
27callback.apply(this, arguments);
28});
29},
30heightHide: function(animated, callback) {
31if (animated) {
32this.animate({ height: "hide" }, animated, callback);
33} else {
34this.hide();
35if (callback)
36this.each(callback);
37}
38},
39prepareBranches: function(settings) {
40if (!settings.prerendered) {
41// mark last tree items
42this.filter(":last-child:not(ul)").addClass(CLASSES.last);
43// collapse whole tree, or only those marked as closed, anyway except those marked as open
44this.filter((settings.collapsed ? "" : "." + CLASSES.closed) + ":not(." + CLASSES.open + ")").find(">ul").hide();
45}
46// return all items with sublists
47return this.filter(":has(>ul)");
48},
49applyClasses: function(settings, toggler) {
50this.filter(":has(>ul):not(:has(>a))").find(">span").click(function(event) {
51toggler.apply($(this).next());
52}).add( $("a", this) ).hoverClass();
53
54if (!settings.prerendered) {
55// handle closed ones first
56this.filter(":has(>ul:hidden)")
57.addClass(CLASSES.expandable)
58.replaceClass(CLASSES.last, CLASSES.lastExpandable);
59
60// handle open ones
61this.not(":has(>ul:hidden)")
62.addClass(CLASSES.collapsable)
63.replaceClass(CLASSES.last, CLASSES.lastCollapsable);
64
65 // create hitarea
66this.prepend("<div class=\"" + CLASSES.hitarea + "\"/>").find("div." + CLASSES.hitarea).each(function() {
67var classes = "";
68$.each($(this).parent().attr("class").split(" "), function() {
69classes += this + "-hitarea ";
70});
71$(this).addClass( classes );
72});
73}
74
75// apply event to hitarea
76this.find("div." + CLASSES.hitarea).click( toggler );
77},
78treeview: function(settings) {
79
80settings = $.extend({
81cookieId: "treeview"
82}, settings);
83
84if (settings.add) {
85return this.trigger("add", [settings.add]);
86}
87
88if ( settings.toggle ) {
89var callback = settings.toggle;
90settings.toggle = function() {
91return callback.apply($(this).parent()[0], arguments);
92};
93}
94
95// factory for treecontroller
96function treeController(tree, control) {
97// factory for click handlers
98function handler(filter) {
99return function() {
100// reuse toggle event handler, applying the elements to toggle
101// start searching for all hitareas
102toggler.apply( $("div." + CLASSES.hitarea, tree).filter(function() {
103// for plain toggle, no filter is provided, otherwise we need to check the parent element
104return filter ? $(this).parent("." + filter).length : true;
105}) );
106return false;
107};
108}
109// click on first element to collapse tree
110$("a:eq(0)", control).click( handler(CLASSES.collapsable) );
111// click on second to expand tree
112$("a:eq(1)", control).click( handler(CLASSES.expandable) );
113// click on third to toggle tree
114$("a:eq(2)", control).click( handler() );
115}
116
117// handle toggle event
118function toggler() {
119$(this)
120.parent()
121// swap classes for hitarea
122.find(">.hitarea")
123.swapClass( CLASSES.collapsableHitarea, CLASSES.expandableHitarea )
124.swapClass( CLASSES.lastCollapsableHitarea, CLASSES.lastExpandableHitarea )
125.end()
126// swap classes for parent li
127.swapClass( CLASSES.collapsable, CLASSES.expandable )
128.swapClass( CLASSES.lastCollapsable, CLASSES.lastExpandable )
129// find child lists
130.find( ">ul" )
131// toggle them
132.heightToggle( settings.animated, settings.toggle );
133if ( settings.unique ) {
134$(this).parent()
135.siblings()
136// swap classes for hitarea
137.find(">.hitarea")
138.replaceClass( CLASSES.collapsableHitarea, CLASSES.expandableHitarea )
139.replaceClass( CLASSES.lastCollapsableHitarea, CLASSES.lastExpandableHitarea )
140.end()
141.replaceClass( CLASSES.collapsable, CLASSES.expandable )
142.replaceClass( CLASSES.lastCollapsable, CLASSES.lastExpandable )
143.find( ">ul" )
144.heightHide( settings.animated, settings.toggle );
145}
146}
147
148function serialize() {
149function binary(arg) {
150return arg ? 1 : 0;
151}
152var data = [];
153branches.each(function(i, e) {
154data[i] = $(e).is(":has(>ul:visible)") ? 1 : 0;
155});
156$.cookie(settings.cookieId, data.join("") );
157}
158
159function deserialize() {
160var stored = $.cookie(settings.cookieId);
161if ( stored ) {
162var data = stored.split("");
163branches.each(function(i, e) {
164$(e).find(">ul")[ parseInt(data[i]) ? "show" : "hide" ]();
165});
166}
167}
168
169// add treeview class to activate styles
170this.addClass("treeview");
171
172// prepare branches and find all tree items with child lists
173var branches = this.find("li").prepareBranches(settings);
174
175switch(settings.persist) {
176case "cookie":
177var toggleCallback = settings.toggle;
178settings.toggle = function() {
179serialize();
180if (toggleCallback) {
181toggleCallback.apply(this, arguments);
182}
183};
184deserialize();
185break;
186case "location":
187var current = this.find("a").filter(function() { return this.href.toLowerCase() == location.href.toLowerCase(); });
188if ( current.length ) {
189current.addClass("selected").parents("ul, li").add( current.next() ).show();
190}
191break;
192}
193
194branches.applyClasses(settings, toggler);
195
196// if control option is set, create the treecontroller and show it
197if ( settings.control ) {
198treeController(this, settings.control);
199$(settings.control).show();
200}
201
202return this.bind("add", function(event, branches) {
203$(branches).prev()
204.removeClass(CLASSES.last)
205.removeClass(CLASSES.lastCollapsable)
206.removeClass(CLASSES.lastExpandable)
207.find(">.hitarea")
208.removeClass(CLASSES.lastCollapsableHitarea)
209.removeClass(CLASSES.lastExpandableHitarea);
210$(branches).find("li").andSelf().prepareBranches(settings).applyClasses(settings, toggler);
211});
212}
213});
214
215// classes used by the plugin
216// need to be styled via external stylesheet, see first example
217var CLASSES = $.fn.treeview.classes = {
218open: "open",
219closed: "closed",
220expandable: "expandable",
221expandableHitarea: "expandable-hitarea",
222lastExpandableHitarea: "lastExpandable-hitarea",
223collapsable: "collapsable",
224collapsableHitarea: "collapsable-hitarea",
225lastCollapsableHitarea: "lastCollapsable-hitarea",
226lastCollapsable: "lastCollapsable",
227lastExpandable: "lastExpandable",
228last: "last",
229hitarea: "hitarea"
230};
231
232// provide backwards compability
233$.fn.Treeview = $.fn.treeview;
234
235})(jQuery);
4、css文件的內容
1dl,dd,dt,ul,li{}{
2margin:0;
3padding:0;
4list-style:none;
5color:#333;}
6#wenzhang{}{
7width:160px;
8text-align:center;
9font-size:12px;
10border-left:1px solid #dedede;
11border-right:1px solid #dedede;
12border-bottom:1px solid #dedede;
13}
14#wenzhang dd dl dt{}{
15border-top:1px solid #dedede;
16background:#f2f2f2; height:25px;
17line-height:25px; font-weight:bold;
18background-image:url(../images/menu-out.jpg);
19}
20#wenzhang ul{}{
21background:#f9f9f9;
22}
23#wenzhang li{}{
24border-top:1px solid #efefef;
25line-height:25px;
26}