原来: <ul id="tt"></ul>
现在:<ul id="RightAccordion" class="easyui-accordion" style="background: #E3F1FF">
原:
$(function() {
$("#tt").tree({
url:'/menu/loginUserMenus?id=<shiro:principal property="id" />',
onLoadSuccess: function (node, data) {
$('#tt .tree-icon').css("background", "url(/jquery-easyui-1.5/themes/icons/mini_add.png) " +
"no-repeat center center");
},
//事件属性 匿名函数
onClick: function(node) {
//如果node对象的children不为null并且数组长度大于0,就表示当前菜单是父级菜单,反之就是最终子菜单
if(!node.children || node.children.length == 0){
//链接一个地址,打开一个页面,利用Tab标签页
addTab(node.text, node.url);
}else{
//如果是父级菜单,当前是展开状态就把它收起来,如果是收起状态就把它展开
if(node.state == "open"){
$("#tt").tree("collapse", node.target);
}else{
$("#tt").tree("expand", node.target);
}
}
}
});
});
现:
<script>
$(function(){
jQuery("#RightAccordion").accordion({ //初始化accordion
fillSpace:true,
background:"#E3F1FF",
fit:true,
border:false,
animate:false
});
$.post("/menu/loginUserMenus?id=<shiro:principal property="id" />", { "id": "0" }, //获取第一层目录
function (data) {
if (data == "0") {
window.location = "/Account";
}
$.each(data, function (i, e) {//循环创建手风琴的项
var id = e.id;
$('#RightAccordion').accordion('add', {
title: e.text,
content: "<ul id='tree"+id+"' ></ul>",
selected: true,
iconCls:"icon-mini-add"//e.Icon
});
$.parser.parse();
$.post("/menu/loginUserMenuTree?id=<shiro:principal property="id" />"+"&id2="+id, function(data) {//循环创建树的项
$("#tree" + id).tree({
data: data,
onBeforeExpand:function(node,param){
$("#tree" + id).tree('options').url = "/menu/loginUserMenus?id=<shiro:principal property="id" />" + node.id;
},
onLoadSuccess: function (node, data) {
$('#RightAccordion .tree-icon').css("background", "url(/jquery-easyui-1.5/themes/icons/treenew2.png) no-repeat center center");
},
onClick: function(node) {
//如果node对象的children不为null并且数组长度大于0,就表示当前菜单是父级菜单,反之就是最终子菜单
if(!node.children || node.children.length == 0){
//链接一个地址,打开一个页面,利用Tab标签页
addTab(node.text, node.url);
}else{
//如果是父级菜单,当前是展开状态就把它收起来,如果是收起状态就把它展开
if(node.state == "open"){
$("#RightAccordion").tree("collapse", node.target);
}else{
$("#RightAccordion").tree("expand", node.target);
}
}
}
});
}, 'json');
});
}, "json");
});
/*添加Tab标签页*/
function addTab(title, url){
var exists = $("#tabs").tabs("exists", title);
if(exists){
//如果该Tab标签页存在,就选中它,并且刷新它
$("#tabs").tabs("select", title);
//获取选中的面板对象[如果id选择器错误,将会报一个很难查找的错误]
var tab = $('#tabs').tabs('getSelected');
//刷新它
$('#tabs').tabs('update', {
tab: tab,
options: {}
});
}else{
//如果该Tab标签页不存在,就添加
$("#tabs").tabs("add",{
title: title,
fit:true,
selected:true, //添加当前Tab标签页之后立即选中当前标签页
closable:true, //显示关闭按钮
content:'<iframe src="'+url+'" scrolling="auto" frameborder="0" framespacing="0" width="99%" height="99%"></iframe>'
});
}
}
</script>
再介绍一下更改手风琴颜色
原本颜色
<style type="text/css">
.accordion .accordion-header{
background:#E3F1FF; //头部样式
}
.accordion .accordion-header .panel-title{
font-weight:normal;
}
.accordion .accordion-header-selected .panel-title{
background:#3b5998;
font-weight:bold;
}
.accordion-noborder .accordion-header{
border-width:0 0 1px;
}
.accordion-noborder .accordion-body{
background:#E3F1FF;
color: #a99b9b;
border-width:0px;
}
</style>
改变颜色后