菜单栏主要是两轮加载,但是只要活得nodeid就可以了。
菜单中的数据就是从数据库中获取的,不是写死的,对应的nodeid。
这个主要就是采用cookie缓存iframe的nodeid节点。
主要的代码如下:
$(document).ready(function() {
var indexurl=window.location.href;
if(indexurl.indexOf("#") > 0) {
var strcookie=document.cookie;
var menu_n1="";
var menu_n2="";
if (strcookie.length > 0) {
var arrcookie=strcookie.split(";");
for(var i=0; i<arrcookie.length; i++){
var arrvalue=arrcookie[i].split("=");
var keyname=arrvalue[0].trim();
if(keyname == "menu_n1") {
menu_n1=arrvalue[1].trim();
}else if(keyname == "menu_n2") {
menu_n2=arrvalue[1].trim();
}
}
}
init_menu1();
change_menu(menu_n1, menu_n2);
}else {
// 第一次加载
$("#contentframe").attr("src", "${ctx }/finedo/redirect/index");
init_menu1();
change_menu("${n1}", "${n2}");
}
});
//data:跳转需要传递的参数,目标页面使用{param.index_transition_data}获取,参数使用^或*分隔
function change_menu(n1,n2,data){
if(n1){
menu_1_touch(n1, true);
if(n2){
menu_1_touch(n1,data);
}
}
}
function init_menu1(){
var userrightlist=$.parseJSON('${LOGINDOMAIN_KEY.userrightlist}');
var arr = userrightlist;
var j = arr.length;
for(var i=0;i<j;i++){
if(arr[i].parentnodeid=="0"){
if("N10"==arr[i].nodeid){
$("#sy-nav").append('<li style=\'-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;\' id="li_'+arr[i].nodeid+'" ><a href="javascript:;" id="a_'+arr[i].nodeid+'" οnclick="menu_1_touch(\''
+arr[i].nodeid+'\', true)">'+arr[i].nodename+'</a>'
+((arr[i].nodename=='首页')?('<div class="sy-menu" id="li_div_'+arr[i].nodeid+'" style="display: none;"></div>'):'')+'</li>');
console.log(arr[i].nodeid);
}else{
$("#sy-nav").append('<li id="li_'+arr[i].nodeid+'"><a target="contentframe" style="text-decoration:none;color:#FFFFFF;" οnclick="menu_1_touch(\''
+arr[i].nodeid+'\', true)">'+arr[i].nodename+'</a>'+'<div class="sy-menu" id="li_div_'+arr[i].nodeid+'" style="display: none"></div></li>');
init_menu2(arr[i].nodeid);
}
}
menu_1_touch("N10",false);
finedo.message.hideWaiting();
}
}
function init_menu2(nodeid){
var href="";
var userrightlist=$.parseJSON('${LOGINDOMAIN_KEY.userrightlist}');
var j = userrightlist.length;
for(var i=0;i<j;i++){
if(userrightlist[i].parentnodeid==nodeid && userrightlist[i].isnavigation=='是'){
href=ctx+userrightlist[i].rightentry;
$("#li_div_"+nodeid).append('<p><a href='+href+' target="contentframe" style="text-decoration:none;color:#FFFFFF;" οnclick="menu_1_touch(\''
+userrightlist[i].nodeid+'\', true)">'+userrightlist[i].nodename+'</a></p>');
}
}
$("#li_"+nodeid).hover(function(){
$("#li_div_"+nodeid).show();
},function(){
$("#li_div_"+nodeid).hide();
});
}
function menu_1_touch(nodeid,reloadflag){
//激励当前页面的数据到cookie,解决刷新回到首页的问题
document.cookie = "menu_n1="+nodeid;
history.pushState({},"",window.location.pathname+"#"+nodeid);
if(nodeid=='N10'){
//初始化首页
if(reloadflag){
$("#contentframe").attr("src",ctx+"/finedo/redirect/index");
}
return ;
}
var userrightlist=$.parseJSON('${LOGINDOMAIN_KEY.userrightlist}');
var arr = userrightlist;
var j = arr.length;
for(var i =0;i<j;i++){
if(arr[i].nodeid==nodeid){
$("#contentframe").attr("src",ctx+arr[i].rightentry);
}
}
}
这样子刷新就可以直接在当前页面了。
html页面如下:
<body >
<!---头部--->
<div class="head">
<div class="com-pad">
<li><img src="${ctx}/syzw_service/include/images/logo.png" /></li>
<li> <ul class="sy-nav" style="z-index: 99;" id="sy-nav"></ul></li>
<li style="float:right;"> <div class="user-info" style="width: 180px;" >
<div class="userImg" style="float: left; margin-left: 10px;"><img src="${ctx}/syzw_service/include/images/user.png"> </div>
<span style="display:inline:block; height:40px; line-height:40px;">${sessionScope.LOGINDOMAIN_KEY.sysuser.personname}</span>
<a style="position: relative;display:block; top:-30px;z-index:999;" href="${ctx }/finedo/auth/logout">
<img style="float:right; display:inline-block; width:30px; margin-left:10px; margin-top:-20px;" src="${ctx}/syzw_service/include/images/exit.png" >
</a></li>
</div>
</div>
</div>
<!---头部结束--->
<iframe class="content" src="" id="contentframe" name="contentframe" frameborder="0" width="100%" scrolling="auto" marginheight="0" marginwidth="0" onLoad="setIframeHeight(this.id)" style="padding-top:60px;"></iframe>
<script type="text/javascript">
function getDocHeight(doc) {
doc = doc || document;
var body = doc.body, html = doc.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
return height;
}
function setIframeHeight(id) {
var ifrm = document.getElementById(id);
var doc = ifrm.contentDocument? ifrm.contentDocument:
ifrm.contentWindow.document;
ifrm.style.visibility = 'hidden';
ifrm.style.height = "10px";
ifrm.style.height = getDocHeight( doc ) + 4 + "px";
ifrm.style.visibility = 'visible';
}
</script>
</body>
这样就可以了。