jquery 左侧 树形菜单

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><href="javascript:goSpace('queryOrgType.html')">机构类型管理</a></li> 
35                <li><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}
 

posted on 2010-11-02 21:31 麟德 阅读(5548) 评论(1)  编辑  收藏 所属分类: jquery

评论

# re: jquery 左侧 树形菜单 2011-06-03 15:13 胡旋

能把图片给我们就好了!  回复  更多评论   


只有注册用户登录后才能发表评论。


网站导航:
 
<2011年6月>
2930311234
567891011
12131415161718
19202122232425
262728293012
3456789

导航

统计

常用链接

留言簿

随笔分类(2)

随笔档案(2)

文章分类(23)

文章档案(23)

最新随笔

搜索

积分与排名

最新评论

阅读排行榜

评论排行榜