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);
});