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)
{
21
window.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,
{
4
swapClass: function(c1, c2)
{
5
var c1Elements = this.filter('.' + c1);
6
this.filter('.' + c2).removeClass(c2).addClass(c1);
7
c1Elements.removeClass(c1).addClass(c2);
8
return this;
9
},
10
replaceClass: function(c1, c2)
{
11
return this.filter('.' + c1).removeClass(c1).addClass(c2).end();
12
},
13
hoverClass: function(className)
{
14
className = className || "hover";
15
return this.hover(function()
{
16
$(this).addClass(className);
17
}, function()
{
18
$(this).removeClass(className);
19
});
20
},
21
heightToggle: function(animated, callback)
{
22
animated ?
23
this.animate(
{ height: "toggle" }, animated, callback) :
24
this.each(function()
{
25
jQuery(this)[ jQuery(this).is(":hidden") ? "show" : "hide" ]();
26
if(callback)
27
callback.apply(this, arguments);
28
});
29
},
30
heightHide: function(animated, callback)
{
31
if (animated)
{
32
this.animate(
{ height: "hide" }, animated, callback);
33
} else
{
34
this.hide();
35
if (callback)
36
this.each(callback);
37
}
38
},
39
prepareBranches: function(settings)
{
40
if (!settings.prerendered)
{
41
// mark last tree items
42
this.filter(":last-child:not(ul)").addClass(CLASSES.last);
43
// collapse whole tree, or only those marked as closed, anyway except those marked as open
44
this.filter((settings.collapsed ? "" : "." + CLASSES.closed) + ":not(." + CLASSES.open + ")").find(">ul").hide();
45
}
46
// return all items with sublists
47
return this.filter(":has(>ul)");
48
},
49
applyClasses: function(settings, toggler)
{
50
this.filter(":has(>ul):not(:has(>a))").find(">span").click(function(event)
{
51
toggler.apply($(this).next());
52
}).add( $("a", this) ).hoverClass();
53
54
if (!settings.prerendered)
{
55
// handle closed ones first
56
this.filter(":has(>ul:hidden)")
57
.addClass(CLASSES.expandable)
58
.replaceClass(CLASSES.last, CLASSES.lastExpandable);
59
60
// handle open ones
61
this.not(":has(>ul:hidden)")
62
.addClass(CLASSES.collapsable)
63
.replaceClass(CLASSES.last, CLASSES.lastCollapsable);
64
65
// create hitarea
66
this.prepend("<div class=\"" + CLASSES.hitarea + "\"/>").find("div." + CLASSES.hitarea).each(function()
{
67
var classes = "";
68
$.each($(this).parent().attr("class").split(" "), function()
{
69
classes += this + "-hitarea ";
70
});
71
$(this).addClass( classes );
72
});
73
}
74
75
// apply event to hitarea
76
this.find("div." + CLASSES.hitarea).click( toggler );
77
},
78
treeview: function(settings)
{
79
80
settings = $.extend(
{
81
cookieId: "treeview"
82
}, settings);
83
84
if (settings.add)
{
85
return this.trigger("add", [settings.add]);
86
}
87
88
if ( settings.toggle )
{
89
var callback = settings.toggle;
90
settings.toggle = function()
{
91
return callback.apply($(this).parent()[0], arguments);
92
};
93
}
94
95
// factory for treecontroller
96
function treeController(tree, control)
{
97
// factory for click handlers
98
function handler(filter)
{
99
return function()
{
100
// reuse toggle event handler, applying the elements to toggle
101
// start searching for all hitareas
102
toggler.apply( $("div." + CLASSES.hitarea, tree).filter(function()
{
103
// for plain toggle, no filter is provided, otherwise we need to check the parent element
104
return filter ? $(this).parent("." + filter).length : true;
105
}) );
106
return 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
118
function 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 );
133
if ( 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
148
function serialize()
{
149
function binary(arg)
{
150
return arg ? 1 : 0;
151
}
152
var data = [];
153
branches.each(function(i, e)
{
154
data[i] = $(e).is(":has(>ul:visible)") ? 1 : 0;
155
});
156
$.cookie(settings.cookieId, data.join("") );
157
}
158
159
function deserialize()
{
160
var stored = $.cookie(settings.cookieId);
161
if ( stored )
{
162
var data = stored.split("");
163
branches.each(function(i, e)
{
164
$(e).find(">ul")[ parseInt(data[i]) ? "show" : "hide" ]();
165
});
166
}
167
}
168
169
// add treeview class to activate styles
170
this.addClass("treeview");
171
172
// prepare branches and find all tree items with child lists
173
var branches = this.find("li").prepareBranches(settings);
174
175
switch(settings.persist)
{
176
case "cookie":
177
var toggleCallback = settings.toggle;
178
settings.toggle = function()
{
179
serialize();
180
if (toggleCallback)
{
181
toggleCallback.apply(this, arguments);
182
}
183
};
184
deserialize();
185
break;
186
case "location":
187
var current = this.find("a").filter(function()
{ return this.href.toLowerCase() == location.href.toLowerCase(); });
188
if ( current.length )
{
189
current.addClass("selected").parents("ul, li").add( current.next() ).show();
190
}
191
break;
192
}
193
194
branches.applyClasses(settings, toggler);
195
196
// if control option is set, create the treecontroller and show it
197
if ( settings.control )
{
198
treeController(this, settings.control);
199
$(settings.control).show();
200
}
201
202
return 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
217
var CLASSES = $.fn.treeview.classes =
{
218
open: "open",
219
closed: "closed",
220
expandable: "expandable",
221
expandableHitarea: "expandable-hitarea",
222
lastExpandableHitarea: "lastExpandable-hitarea",
223
collapsable: "collapsable",
224
collapsableHitarea: "collapsable-hitarea",
225
lastCollapsableHitarea: "lastCollapsable-hitarea",
226
lastCollapsable: "lastCollapsable",
227
lastExpandable: "lastExpandable",
228
last: "last",
229
hitarea: "hitarea"
230
};
231
232
// provide backwards compability
233
$.fn.Treeview = $.fn.treeview;
234
235
})(jQuery);
4、css文件的内容
1
dl,dd,dt,ul,li{
}{
2
margin:0;
3
padding:0;
4
list-style:none;
5
color:#333;}
6
#wenzhang{
}{
7
width:160px;
8
text-align:center;
9
font-size:12px;
10
border-left:1px solid #dedede;
11
border-right:1px solid #dedede;
12
border-bottom:1px solid #dedede;
13
}
14
#wenzhang dd dl dt{
}{
15
border-top:1px solid #dedede;
16
background:#f2f2f2; height:25px;
17
line-height:25px; font-weight:bold;
18
background-image:url(../images/menu-out.jpg);
19
}
20
#wenzhang ul{
}{
21
background:#f9f9f9;
22
}
23
#wenzhang li{
}{
24
border-top:1px solid #efefef;
25
line-height:25px;
26
}