tree的话顾名思义就是数形菜单如下图所示
我们接下来要使用tree和tabs也就是选项卡来实现点击弹出的效果
在easyUi官方下载的解压包找到dome找到tree案例
找到后我们进入eclipse中在使用tree控件时需要另起一个包来载入
引入好后接下来是代码展示实现前面所说的效果
//页面载入函数
$(function() {
//加载树的数据 ajax
$('#myTree').tree({
url : ctx + '/module.do',//请求地址servlet
animate : true,//让节点显示动画效果
onDblClick : function(node) {//节点=对象
//alert(node.text); // 在用户点击双击的时候提示
//alert(node.iconCls);
//alert(node.url);
//判断是否是子节点
var nodes = $('#myTree').tree('getChildren',node.target);
//alert(nodes.length);
if(nodes.length==0){//说明没有子节点
//判断选项卡是否存在
var f = $('#myTab').tabs('exists',node.text);
if(!f){//说明不存在
//不存在就新增加一个选项卡
$('#myTab').tabs('add',{//iconCls:'icon-mini-refresh'
title:node.text,//标题
content:'<iframe width="100%" height="100%" scrolling="no" frameborder="0" src="'+node.url+'" ></iframe>',//内容
closable:true,//是否可以关闭
iconCls:node.iconCls//图标
});
}
else{//存在就让其对应选中
$('#myTab').tabs('select',node.text);
}
}
//iframe内嵌框架
}
});
})
</script>
效果图