到目前为止,还剩下主窗口的界面生成没有讲。主窗口中采用了iframe框架加载每个界面,其思路就是在点击左边菜单时,首先找到此次点击的对应菜单所对应的界面,然后在iframe中加载此界面就可以了。由于菜单是动态生成的。点击事件的加载看起来不知如何去加载哪个DOM元素。还是按第3节所讲的一样,如果不是动态生成,而是固定生成,那么其代码类似如下
<div title="权限设置" iconCls="icon-ok" selected="true">
<ul>
<li>
<div>
<a href="#" url="/jsp/permissions/allmenu.jsp">
<span class=""></span>
菜单管理
</a>
</div>
</li>
<li>
<div>
<a href="#" url="/jsp/permissions/role.jsp">
<span class=""></span>
角色管理
</a>
</div>
</li>
<li>
<div>
<a href="#" url="/jsp/permissions/aiuser.jsp">
<span class=""></span>
用户管理
</a>
</div><
/li>
</ul>
</div>
在一级菜单点中时,我们是展开,而在二级菜单点中时,这时是加载其对应的界面。一级菜单的点击展开,这个easyui已经帮我实现了。我们自已要实现的就是二级菜单点中时,首先是如何加载其事件。观察上面的例子。二级菜单点击都是在<a>这个元素上。所以事件绑定可以如下写
$("easyui-accordion li a").click(function(){
var tabTitle = $(this).text();
var url = $(this).attr("url");
addTab(tabTitle,url);
$(".easyui-accrodion li div").removeclass('selected");
$(this).parent().addClass("selected");
}).hover(function(){
$(this).parent().addClass("hover");
},function(){
$(this).parent().removeClass("hover");
});
}
function addTab(subtile,url){
if(!$('#tabs‘).tabs('exists',subtitle)){
$('#tabs').tabs('add',{
title:subtitle,
content:createFrame(url);
});
}else{
$('#tabs').tabs('select',subttile);
}
}
function createFrame(url){
var s='<iframe scrolling="auto" frameborder="0" src="'+url+’“ style=”width:100%;height:100%;"></frame>';
return s;
}