课程目标
需求点：
1.点击左侧侧显示右侧Tab
1.1给菜单添加点击事件
1.2调用tabs选项卡，打开对应的页面
选项卡打开
选项卡对应的页面展示
2.不能打开重复的Tab
拿到目前打开的tabs选项卡，与将要打开的选项卡做对比（exists）
存在true:不打开
不存在false:d打开
3.对于已经存在的tab选项卡，被点击的时候，应该默认被选中
4.点击菜单，能够访问对应的页面，而非文字内容
一，导入资源
1.tree_data1.json文件，放入webcontent目录下
2.新建一个index.js文件，放在js目录下
3.用js方法调用导入的tree_data1.json
$(function(){
$('#tt').tree({
url:'tree_data1.json'
});
})4.在index主界面要调用js
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/index.js"></script>点击左侧侧显示右侧Tab
$('#stuMenu').tree({
url:'tree_data1.json',
onClick:function(node){
//alert(node.text);//在用户点击的时候提示
}之后去tree_data1.json中修改内容
导入源码
<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;">
<div id="stuTabs" class="easyui-tabs" style="width:100%;height:100%;">
</div>
</div>注意，div里的id要与js文件中的id所对应
这是easyUI中的增加的一个方法，下面是源码
// add a new tab panel
$('#tt').tabs('add',{
title:'New Tab',
content:'Tab Body',
closable:true,
tools:[{
iconCls:'icon-mini-refresh',
handler:function(){
alert('refresh');
}
}]
});
导入展示
不能打开重复的Tab
var一个exists,用于判断页面是否存有打开的页面
如果存有，不打开页面
如果没有，打开将要打开的页面
//判断当前要打开的选项卡是否存在
var exists=$('#stuTabs').tabs('exists',node.text);
if(exists){
$('#stuTabs').tabs('select',node.text);
}else{
//iframe
$('#stuTabs').tabs('add',{
title:node.text,
content:'<iframe width="100%" height="100%" src="'+node.attributes.url+'"></iframe>',
closable:true,
tools:[{
iconCls:'icon-mini-refresh',
handler:function(){
alert('refresh');
}
}]
});
}界面展示
对于已经存在的tab选项卡，被点击的时候，应该默认被选中
$('#stuMenu').tree({
url:'tree_data1.json',
onClick:function(node){
//alert(node.text);//在用户点击的时候提示
// add a new tab panel
//判断当前要打开的选项卡是否存在
var exists=$('#stuTabs').tabs('exists',node.text);
if(exists){
$('#stuTabs').tabs('select',node.text);
}else{
//iframe
$('#stuTabs').tabs('add',{
title:node.text,
content:node.text+'Tab Body'',
closable:true,
tools:[{
iconCls:'icon-mini-refresh',
handler:function(){
alert('refresh');
}
}]
});
}点击菜单，能够访问对应的页面，而非文字内容
利用<iframe>标签进行操作
将上段代码中的content改为
'<iframe width="100%" height="100%" src="'+node.attributes.url+'"></iframe>'最后展示的界面，将文本内容改成了界面展示
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之家整理，本文链接：https://www.bmabk.com/index.php/post/12247.html
