码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript菜单树

时间:2014-05-14 10:04:05      阅读:427      评论:0      收藏:0      [点我收藏+]

标签:style   blog   class   code   java   c   

OA系统,ERP系统这样的管理自动化系统。设计者们,总喜欢将菜单放在左侧。菜单太多了,分类折叠是必然的选择。这样既可以有力于菜单模块的管理,也可以方便操作。如下的一个菜单示例:

 

bubuko.com,布布扣

这样的菜单,我做了一个简单的。自己写了一个TheTree的类,效果还不错,贴上样式,还是杠杠的。

详细的源码可以访问我的github:

git@github.com:YeRuGeMiMi/TheTree.git

 

下面是我的开发过程:

 

1、生成菜单

我第一步写的菜单是直接硬编码在html中:

1 <ul>
2 <li><a href=‘#‘> 等待提交</a></li>
3 <li><a href=‘#‘ title=‘‘> 等待发布</a></li>
4 <li><a href=‘#‘ title=‘‘> 正式项目</a></li>
5 <li><a href=‘#‘ title=‘‘> 点此新增</a></li>
6 </ul>

可是,真是项目中因为权限控制的原因,是将这个菜单放在数据库中,根据权限来取得菜单树的。所以我想到了,能不能使用一个json保存菜单的数据,然后写个方法来生成菜单:

定义一个json:

1 var eljson=[{"name":"等待提交","link":"#"},{"name":"等待发布","link":"#"},{"name":"正式项目","link":"#"},{"name":"点此新增","link":"#"}];
2  var usjson=[{"name":"查看用户","link":"#"},{"name":"用户列表","link":"#"},{"name":"会员用户","link":"#"},{"name":"超级用户","link":"#"}];
3  var orjson=[{"name":"订单详情","link":"#"},{"name":"要货单","link":"#"},{"name":"退货单","link":"#"},{"name":"补货单","link":"#"}];

然后写一个一个TheTree的对象,定义一个生成方法:

bubuko.com,布布扣
 1 function TheTree(tlist,eljson){
 2     this.list = document.querySelector(tlist);
 3     this.create(eljson);
 4     this.start();
 5 }
 6 
 7 //菜单的初始状态
 8 TheTree.prototype.start=function(){
 9     this.list.style.display="none";
10 }
11 
12 //创建节点
13 TheTree.prototype.create=function(eljson){
14     if(!eljson){
15         return false;
16     }
17 
18     var ul=document.createElement("ul");
19     //var eljson=eval(elements);
20     for(var i=0;i<eljson.length;i++){
21         var li=document.createElement("li");
22         var a=document.createElement("a");
23         a.setAttribute("href",eljson[i].link);
24         var text=document.createTextNode(eljson[i].name);
25         a.appendChild(text);
26         li.appendChild(a);
27         ul.appendChild(li);
28     }
29 
30     this.list.appendChild(ul);
31 
32 }
bubuko.com,布布扣

start方法:定义菜单块的初始状态,我设定的是隐藏的(一般也是这样的)。

create方法:创建节点的方法,遍历json取得值。

而后,只要根据json和菜单的div创建一个TheTree的对象就可以了:

1 var tt = new TheTree(".FAQlist",eljson);
2 var pp = new TheTree(".Userlist",usjson);
3 var oo = new TheTree(".Orderlist",orjson);

菜单成功被创建了!

 

2、菜单动作

菜单的动作无非是“隐藏”,和“显示”。所以只要写个方法来控制它们的样式就可以了。

bubuko.com,布布扣
 1 //动作
 2 TheTree.prototype.jh=function(){
 3     if (this.list.style.display == "none") {
 4         this.list.style.display = "block";
 5         this.status=true;
 6     }else{
 7         this.list.style.display = "none";
 8         this.status=false;
 9     }
10 }
bubuko.com,布布扣

做到这里,我本以为大功告成了。结果,却还有一个问题。

 

3、只打开一个

菜单分类之后,我需要的是:

bubuko.com,布布扣

可是,如果我的代码只写到上面这个地步,只能这样的:

bubuko.com,布布扣

为此,我想了想,突然来一个奇思妙想!

我为TheTree添加了一个属性status:

//属性状态
TheTree.prototype.status=false;

这个属性是用来记录,当前TheTree对象是否是展开的。因此,我可以讲建立所有的TheTree对象放到一个数组中:

1 var oarray=new Array();
2      oarray[0]=tt;
3      oarray[1]=pp;
4      oarray[2]=oo;

再建立一个方法,判断这个数组中,除了对象自己本身外的其他对象的状态:

bubuko.com,布布扣
 1 //只允许一个被点开
 2 TheTree.prototype.open=function(objectArray){
 3     for(var i = 0;i<objectArray.length;i++){
 4 
 5         //判断对象是否是其本身
 6         if (objectArray[i] === this) {
 7             continue;
 8         };
 9 
10         if (objectArray[i].status) {
11             objectArray[i].jh();4
12         };
13         
14     }
15 }
bubuko.com,布布扣

调用这个open方法,就大功告成了!

bubuko.com,布布扣
 1 document.getElementById("btn").onclick=function(){
 2          tt.jh();
 3          tt.open(oarray);
 4      };
 5 
 6 document.getElementById("btn1").onclick=function(){
 7          pp.jh();
 8          pp.open(oarry);
 9      };
10 
11 document.getElementById("btn2").onclick=function(){
12          oo.jh();
13          oo.open(oarray);
14      }
bubuko.com,布布扣

 

总结

写了一下这个类,突然发现自己对JavaScript的面向对象知识生疏了,貌似我懂得太少了。写这么一个简单的类,都问了谷歌老师十几次,哎!看来要再去学习一下JavaScript面向对象的知识。

 

 

JavaScript菜单树,布布扣,bubuko.com

JavaScript菜单树

标签:style   blog   class   code   java   c   

原文地址:http://www.cnblogs.com/chengxuyuanxiaoye/p/3725389.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!