JQUERY读取JSON来生成主菜单及点击主菜单项显示相应子菜单

工作需要.把菜单单独保存为一个静态文件.页面在载入时读取之.以利于维护...

 

1.写JSON文件.新建一文本文档.存储格式用UTF-8(GB2312会显示乱码)

1. {menumain:
2. [{title:"主菜单1",url:"#",className:"icon_myclub",stat:"",
3.   submenu:[
4.         {title:"子菜单1",url:"index.aspx"},
5.         {title:"子菜单2",url:"index.aspx"},
6.         {title:"子菜单3",url:"index.aspx"}
7.         ]
8. },
9. {title:"主菜单2",url:"#",className:"icon_user",stat:"new",
10.   submenu:[
11.         {title:"子菜单1",url:"index.aspx"},
12.         {title:"子菜单2",url:"index.aspx"},
13.         {title:"子菜单3",url:"index.aspx"}
14.         ]
15. },
16. {title:"主菜单3",url:"#",className:"icon_help",stat:"hot",
17.   submenu:[
18.         {title:"子菜单1",url:"index.aspx"},
19.         {title:"子菜单2",url:"index.aspx"},
20.         {title:"子菜单3",url:"index.aspx"}
21.         ]   
22. },
23. {title:"主菜单4",url:"#",className:"icon_support",stat:"qiang",
24.   submenu:[
25.         {title:"子菜单1",url:"index.aspx"},
26.         {title:"子菜单2",url:"index.aspx"},
27.         {title:"子菜单3",url:"index.aspx"}
28.         ]   
29. }]
30. }

其中.title为主菜单项显示内容.url为主菜单指向(本例中绑定为单击事件).className为菜单项的图标.用CSS设置.stat则为菜单项右侧会有一个 "hot"."new"."强"的图标(也是CSS)

submenu为主菜单相应的子菜单项.title为title.url为URL.

 

2.写JS.首先包含JQUERY.然后写代码

1. <script type="text/javascript">
2. var saveMainItem;
3. var saveSubItem;
4. var tempData;
6. //绑定CLASS
7. function bindClass(selected)
8. {
9.     $("#nav_node > li").each(function(i) { //遍历菜单
10.         if(i == selected) //当前单击的按钮
11.         {
12.             $(this).addClass("select"); //选定之
13.         }else
14.         {
15.             $(this).removeClass(); //删除样式
16.         }
17.     });
18. }
20. //根据用户点击的按钮来生成子按钮列表
21. function initSubMenu(selected)
22. {
23.     $("#submenu").html(""); //清空子菜单各项
24.     tempSubData = tempData.menumain[selected].submenu; //提取子菜单列表
25.     
26.     for(var i=0 ;i< tempSubData.length ;i++) //遍历节点
27.     {
28.         var tempItem = saveSubItem.clone(); //克隆节点
29.         
30.         tempItem.find("a").attr("href",tempSubData[i].url); //设置HREF
31.         tempItem.find("a").text(tempSubData[i].title); //设置TEXT
32.         
33.         $("#submenu").append(tempItem); //添加到子菜单中
34.     }
35.     
36.     bindClass(selected);
37. }
39. //初始化菜单
40. function initMenu(selected)
41. {
42.     $("#nav_node").html(""); //清空主菜单各项
43.     
44.     for(var i=0 ;i< tempData.menumain.length ;i++) //遍历节点
45.     {
46.         var tempItem = saveMainItem.clone(); //克隆一个节点
47.         
48.         tempItem.find("a").attr("href",tempData.menumain[i].url); //设置HREF
49.         tempItem.find("a").attr("class",tempData.menumain[i].className); //设置ICON
50.         tempItem.find("a").html("<span></span>" + tempData.menumain[i].title); //设置标题
51.         tempItem.find("sup").attr("class",tempData.menumain[i].stat); //设置边上的那个按钮..
52.         
53.         tempItem.find("a").attr("onclick","initSubMenu(" + i + ")" );  //设置单击事件.
54.         
55.         $("#nav_node").append(tempItem); //添加节点
56.     }
57.     
58. }
60. //绑定数据
61. function bind()
62. {
63.     $.ajax({
64.         type: "get",//使用get方法访问后台
65.         dataType: "json",//返回json格式的数据
66.         url: "menu.js",//要访问的后台地址
67.         data: "",//要发送的数据
68.         success: function(msg){//msg为返回的数据，在这里做数据绑定
69.             tempData = msg;
70.             initMenu(0); //初始化菜单
71.             initSubMenu(0); //初始化子菜单
72.             }
73.     });
74. }
76. $(document).ready(function() {
77.    saveSubItem = $("#submenu > li").clone(); //子菜单项
78.    saveMainItem = $("#nav_node > li").clone(); //主菜单项
80.    bind();
81. });
83. </script>

3.HTML的内容为

1. <div class="menu_head">
2.       <ul id="nav_node" class="clear">
3.         <li><span><a href="#" class=""><span></span></a><sup class=""></sup></span></li>
4.       </ul>
5.       <ul class="clear Menuul" id="submenu">
6.         <li><a href="#"></a></li>
7.       </ul>
8. </div>

 

4.讲下思路

  (1). 页面载入的时候..保存页面的两个节点(父菜单项和子菜单项).以作CLONE用.

  (2). 读入JSON数据.然后根据JSON数据来初始化父菜单.

         初始化的时候.先清空父菜单.然后进行循环.

              .每次循环 : CLONE一个父菜单项.设置父菜单项属性.构造副菜单项单击调用的函数.最后添加到父菜单中.

  (3).初始化子菜单项.清空子菜单.然后进行循环.

              每次循环 : CLONE一个子菜单项.设置子菜单属性.添加到子菜单中.

  (4).设置父菜单项按钮CLASS.

       清空所有父菜单项的CLASS.设置当前选定项的CLASS.

5.问题

   貌似遗漏了如果父菜单没有子菜单.直接URL转向咋办...其实很简单.在绑定父菜单的时候判断一下URL是否为#.不是#就不初始化ONCLICK属性就可以了...