二级横菜单显示+sitemesh母板应用
效果图：
代码如下：
View Code
1 /** 2 * 二级横菜单，sitemesh通用模版 3 * 主要思想：菜单项点击后，变激活色，经过其他的变背景色 4 * 增加层$("<div></div>") $('div[menuId='+tem1+']') $("div[id^=sk]") $('#'+i) $("div.menu") 代表层的5种方法 5 */ 6 var menustate=""; 7 var substate="";//判断是否被点击 8 $().ready(function(){ 9 getTestData(showData);//调用的比较晚，callback回调函数 10 }); 11 12 function getTestData(callback){ 13 var url="menuData.json"; 14 $.getJSON(url,null,function(data){testData=data;callback(data);});//url可以是action ，param是传给action的 15 } 16 17 function showData(data){ 18 for(var id in data) 19 { 20 var menuiddiv = $("div#sk" + id);//可以不需要 那种下拉的 需要再添加一个层 21 menuiddiv=$("<div></div>").addClass("menuItem").attr({id:"sk" + id,menuId:id}).appendTo($("div.menu")); 22 $("<div></div>").html(data[id]["name"]).appendTo(menuiddiv); 23 menuiddiv.mouseover(function(){ 24 if($(this).attr("menuId")!=menustate) $(this).css("background-color","yellow"); 25 }).mouseout(function(){ 26 if($(this).attr("menuId")!=menustate) 27 $(this).css("background-color","white"); 28 }).click(function(event){ 29 $("div[id^=sk]").css("background-color","white"); //其他所有的层，^表示开头，$表示结束 正则表达式 30 $(this).css("background-color","red");menustate=$(this).attr("menuId");showSub(this); 31 }); 32 } 33 //下面的是为母板服务的 34 var valArry = window.location.href.split("="); 35 if(valArry.length > 1){//区分是否有参数，如编辑和增加那个模块 36 var temp = valArry[1].split("_"); 37 var tem1 = temp[0]; var tem2=temp[1]; 38 $('div[menuId='+tem1+']').css("background-color","red");showSub($('div[menuId='+tem1+']'));//一级菜单背景色改变，并显示二级菜单 39 $('div[subId='+tem2+']').css("background-color","blue");substate=tem2;//选中的子菜单变背景色，且标志它 40 } 41 } 42 function showSub(param){ 43 var menuId=$(param).attr("menuId"); 44 var a=testData[menuId]["subMenu"]; 45 $("div.submenu").html(''); 46 for(var j in a)//j指一个小json 47 $("<div></div>").addClass("menuItem").html(a[j]["name"]).attr({action:a[j]["action"],subId:j}).appendTo($("div.submenu")).mouseover(function(){ 48 if($(this).attr("subId")!=substate) 49 $(this).css("background-color","yellow");}).mouseout(function(){ 50 if($(this).attr("subId")!=substate)$(this).css("background-color","white");}).click(function(){ 51 var param=menuId+"_"+$(this).attr("subId"); 52 var action = $(this).attr("action")+"?id="+param;//传显示子菜单的参数 53 window.location = action; 54 55 }); 56 }
涉及知识点回顾：
1、jquery 3类属性(8个) attr 、removeAttr / addClass 、removeClass 、hasClass 、toggolClass / html 、val
2、jquery 选择器 $("")或者是带参数$(''+param+'')格式 5+4+4+7+10+4 6类34个
通用5个（*，#id，.class，element，.class.class）如$("ul li :eq(3)")
配用4个（:first，:last，:even，:odd）
索引4个（:eq(index)，:qt(no)，:lt(no)，:not(selsctor)） 如 $("input :not(:empty)")
正则表达式常用符号 ^&http://www.cnblogs.com/yirlin/archive/2006/04/12/373222.html 如$("div^=d")
指所有的元素7个 （:head，:animated，:contains(text)，:empty，:hidden，:visible，s1,s2,s3）
属性元素4个 （[attribute]，[attribute=value]，[attribute!=value]，[attribute$=value]）$("[href$='.jpg']")
input元素10个（:input，:text，:password，:radio，:checkbox，:submit，:reset，:button，:image，:file）
input动作元素4个 （:enabled，:disabled，:selected，:checked）
3、jquery 文档操作
4、jquery事件
5、jquery css
6、jquery Ajax callback jQuery.getJSON()
