您的位置:首页 > Web前端 > CSS

easyui加载菜单样式不生效

2014-03-19 17:28 363 查看
easyui框架动态生成多级菜单时样式没有生效,
原因为jsp页面为先加载了样式
然后才执行$(".easyui-accordion").append($menu);
导致($menu)中的样式不生效
解决方法为在添加了菜单后重新渲染样式$.parser.parse($(".easyui-accordion"));

以下为javascript代码
<script language='javascript'>
$(function(){
//获取当前登录用户的菜单数据
var turl = "common/ui/treeUiManage.do";
$.ajax({
url: turl,
async: false,
cache: false,
success: function(data){
var jsonObj = eval("("+data+")");
var errorCode = jsonObj.error[0].code;
var errorMsg = jsonObj.error[0].msg;
if (errorCode!='0') //异常时提示,按下确定后回调函数处理:重新载入登录页
{
alert(0);
$.messager.alert('提示',errorMsg,'info');
}
else
{
setTimeout(function(){InitLeftMenu(jsonObj);}, 500);
}
return;
},
error: function(data){
$.messager.alert('提示','获取菜单出错,请联系系统管理员!','info');
return;
}
});

//菜单初始化
function InitLeftMenu(_menus){
$(".easyui-accordion").empty();
var $menu = $("<ul id='menu' class='easyui-tree'></ul>");
$menu = eachMenu($menu,_menus.menus,0);

$(".easyui-accordion").append($menu);
$(".easyui-accordion").accordion({fit:true, border:false});
[size=large][color=red]$.parser.parse($(".easyui-accordion"));[/color][/size]

//菜单中链接的处理,包括样式的变化
$('.easyui-tree li a').click(function() {
var tabTitle = $(this).text();
var url = $(this).attr("link");
addTab(tabTitle,url);
$('.easyui-tree li').removeClass("checked");
$(this).parent().addClass("checked");
}).hover(function(){
$(this).parent().addClass("hover");
},function(){
$(this).parent().removeClass("hover");
});

//生效
$(".easyui-accordion").accordion();
$("#menu_loading").css("display", "none"); //隐藏加载图片
}

//迭代菜单
function eachMenu($menu,_menus,pid){
if(_menus.length!=0){
$.each(_menus,function(i){
if(this.pid == pid){
var $li;
if(this.url != '#'){
$li = $('<li><span><a target="mainFrame" href="javascript:void(0);" link= "'+ this.url +'" style="color:#0066FF">'+this.name+'</a></span></li>');
// $li = $('<li><span><a target="mainFrame" href="' + this.url + '" link= "'+ this.url +'" >'+this.name+'</a></span></li>');
}else{
$li = $('<li><span>'+this.name+'</span></li>');
}
$ul = eachMenu($("<ul></ul>"),_menus,this.id);
if($ul.html())
$li.append($ul);
$menu.append($li);
delete _menus[i];
}
});;
}
return $menu;
}



//添加Tab页
function addTab(subtitle,url) {
if(!$('#tabs').tabs('exists',subtitle)){ //不存在时添加
$('#tabs').tabs('add',{
//iconCls:"icon-tip",
title:subtitle,
content:createFrame(url), //调用创建iframe
closable:true,
width:$('#mainPanle').width()-10,
height:$('#mainPanle').height()-26
});
}else{
$('#tabs').tabs('select',subtitle); //否则时定位Tab页
}
//tabClose();
}



//添加Tab页时创建iframe指向URL
function createFrame(url)
{
var s = '<iframe name="mainFrame" id="mainFrame" scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>';
return s;
}


//用户退出系统处理
$("#loginOut").click(function(){
$.messager.confirm('提示','您确定要退出系统吗?',function(r){
if (r) {
var turl = "logoutManage.do?command=100";
$.ajax({
url: turl,
async: false,
cache: false,
success: function(data){
var errorJSON = eval("("+data+")");
var errorCode = errorJSON.error[0].code;
var errorMsg = errorJSON.error[0].msg;
if (errorCode!='0') //异常时提示,按下确定后回调函数处理:重新载入登录页
{
$.messager.alert('提示',errorMsg,'info');
return;
}
else
{
window.location.replace('index.jsp');
return;
}
},
error: function(data){
$.messager.alert('提示','系统异常,请联系系统管理员!','info');
}
});
}
});
});
});
</script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: