java tabs 同名_java web前端easyui（layout+tree+双tabs）布局+树+2个选项卡tabs

1.列出要实现的样式：

2.实现的代码：

分三大部分：

1)：页面主体部分：mian.vm

Ks UI

#parse("ui:include")

tabs_content.tabs({

border:false,

fit:true});//添加tab页面

functionaddTabs(tab){

tabs_content.tabs("add",{

title:tab.text,

closable:true,

content :''});

}

$("#tree_menu").tree({

onClick:function(node){

console.log(node);if(!tabs_content.tabs('exists',node.text)){if(node.url){

addTabs(node);

}

}else{

tabs_content.tabs("select",node.text);

}

}

});//添加欢迎页面

addTabs({

text:'欢迎使用Ks UI',

url:'/cn/com/ksplatform/ui/demo/main/views/fcomponents/welcome.vm'});

});

说明：这部分代码负责完成效果页面的整体框架和效果页面center上面的tabs，重点看tabs是如何实现的(代码

2)：center中竖着的tabs部分：

就是index.vm文件

#parse("ui:include")

$("#tt").tabs({

tabPosition:'left',

fit:true,

onSelect:function(title,index){

open(index);

}

});functionopen(index){var tab = $("#tt").tabs("getTab",index);//console.log(tab);

//console.log(tab[0]);

//不重复打开

if(tab.attr("opend")){return;

}var url = tab.panel("options").url;//var op=tab.panel("options");

//console.log(op);

if(url){

$(tab[0]).html('');

tab.attr("opend",true);

}

}

open(0);

});