动态加载菜单栏
1 从数据库获得菜单项。 (AJAX方式提交, 字符串方式返回到前台 ) 例如:
<?xml version="1.0" encoding="UTF-8"?>
<rows>
<row id="1">
<cell>73</cell>
<cell>我要购买的服务</cell>
<cell />
<cell>0</cell>
</row>
<row id="2">
<cell>74</cell>
<cell>我已购买的服务</cell>
<cell />
<cell>0</cell>
</row>
<row id="3">
<cell>75</cell>
<cell>我的绩效评价</cell>
<cell />
<cell>0</cell>
</row>
<row id="4">
<cell>78</cell>
<cell>查询统计</cell>
<cell />
<cell>0</cell>
</row>
<row id="5">
<cell>79</cell>
<cell>互动交流</cell>
<cell />
<cell>0</cell>
</row>
<row id="6">
<cell>84</cell>
<cell>办理事项</cell>
<cell>/yw/yw003/searchdbsx.do</cell>
<cell>73</cell>
</row>
<row id="7">
<cell>87</cell>
<cell>办理事项</cell>
<cell>/yw/yw004_Ygmfw_searchBlsx.do</cell>
<cell>74</cell>
</row>
<row id="8">
<cell>90</cell>
<cell>办理事项</cell>
<cell>/pj/pj001_jxpj_ysdw.do</cell>
<cell>75</cell>
</row>
<row id="9">
<cell>99</cell>
<cell>购买服务查询</cell>
<cell>/cx/cx002_wygmfw_search.do</cell>
<cell>78</cell>
</row>
<row id="10">
<cell>105</cell>
<cell>常见问题</cell>
<cell>/hd/hd001/cjwtlistinit.do?type=qt</cell>
<cell>79</cell>
</row>
<row id="11">
<cell>106</cell>
<cell>我的咨询</cell>
<cell>/hd/hd002/searchlxwm.do?type=user</cell>
<cell>79</cell>
</row>
</rows>
$(function(){
var gn = "<c:out value="${param.gn}"/>";
$.post("<%=basePath%>/getGns.do","",function(res){
var rows = res.getElementsByTagName("row");
for(i = 0; i < rows.length; i++) {
alert( $( ".ullevel1" ).html() );
var chld = $(rows[i]).children();
if($(chld[3]).text()=="0")
$("#gns").append("<li class=lishow><div menu style='cursor: pointer'>" + $(chld[1]).text() + "</div><ul gnid=" + $(chld[0]).text() + " class=ullevel2></ul></li>");
else {
var elm = "<li gnid=" + $(chld[0]).text() + "><a href='/zfgmfw" + $(chld[2]).text();
if($(chld[2]).text().indexOf("?") == -1)
elm += "?";
else
elm += "&";
elm += "gn=" + $(chld[0]).text() + "'>" + $(chld[1]).text() + "</a>";
if($(chld[0]).text() == gn)
elm += " <img src='/zfgmfw/public2/images/menu_li.gif'/>";
elm += "</li>";
$("ul[gnid=" + $(chld[3]).text() + "]").append(elm);
}
}
$("li div[menu]").click(function(){
if($(this).parent().hasClass("lishow")) {
$(this).parent().removeClass("lishow");
$(this).parent().addClass("lihide");
$(this).next().hide("slow");
} else {
$(this).parent().removeClass("lihide");
$(this).parent().addClass("lishow");
$(this).next().show("slow");
}
});
});
});
.lishow {
background: url(../images/menu_li_1.gif) no-repeat 7px 15px;
}
.lihide {
background: url(../images/menu_li.gif) no-repeat 7px 15px;
}