easyUI是一种基于jQuery的UI框架,可以直接阅读官网的API教程学习,最近做的项目要用到这个框架,就一边看一边做,先看一下动态添加Tab,实际项目中我们都是希望点击一个节点,增加一个iframe的窗口出来,但是昨天看着API做一个简单的点击A标签增加iframe,死活就是不行,晚上回去终于搞定,看一下官方的例
function addTab(title, url){
if ($('#tt').tabs('exists', title)){
$('#tt').tabs('select', title);
} else {
var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>';
$('#tt').tabs('add',{
title:title,
content:content,
closable:true
});
}
}
没什么复杂的,传入title和url,最后把#改成 . 就好了,我刚开始学习,不知为什么,用浏览器断点调试,如果进不去else就换成 . 号,希望以后我能找到原因。
function andTab(title,url){
var tt = $('.easyui-tabs1');
if (tt.tabs('exists', title)){
tt.tabs('select', title);
} else {
var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%; padding:10px,5px,5px,10px;"></iframe>';
tt.tabs('add',{
title:title,
content:content,
closable:true
});
}
}
下面说动态添加树形菜单,项目中需求中不同的角色对应的功能列表不一样,那树形菜单也不一样,所以就在登陆的时候由后台把树形结构的JSON
传回前台UI界面,这个在API中有说明,easyUI封装的tree,我们展开父节点要点击前面的小三角,用户体验不好,我们希望点击整个节点的时候,如果有子节点就展开当前节点,没有子节点增加一个Tab,Tab的title就是子节点的text:
var nodes = $('.sider-nav').tree('getChildren');
$('.sider-nav').tree({
onSelect: function(nodes) {
$('.sider-nav').tree('expand',nodes.target);
},
onClick: function(nodes) {
if($('.sider-nav').tree('isLeaf',nodes.target)) {
andTab(nodes.text, 'login.html');
}
}
});
这里用到了expand和isLeaf这两个方法,
expand:展开一个节点,'target'参数表示节点的DOM对象。在节点关闭或没有子节点的时候,节点ID的值(名为'id'的参数)将会发送给服务器请求子节点的数据。
isLeaf:判断指定的节点是否是叶子节点,target参数是一个节点DOM对象。
这样就解决了项目的需求,一点点的积累。