easyui主界面生成分析-4

到目前为止，还剩下主窗口的界面生成没有讲。主窗口中采用了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;

}