Easyui实例--tabs

   在前面说到的tree的基础上，这次说到了tabs，在layout布局时，点击树节点会在center中展示节点对应的数据信息，基本上都是以table或者easyUI中的datagrid来实现。

官方给出的API文档实现起来挺简单的，定义一个div，并给div标注tabs，在center中添加，点击节点的时候去添加一个tab。

1.API参考

官网提供了两种创建方式：

• HTML方式创建

<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">    <div title="Tab1" style="padding:20px;display:none;">        tab1    </div>    <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">        tab2    </div>    <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="display:none;">        tab3    </div></div>

• JS方式创建

API提供的tabs方法：

<div data-options="region:'center',title:'数据管理',split:true" style="text-align:center">    <div id="tt" class="easyui-tabs"  style="width:100%;height:100%;">   </div>    </div>

JS中：通过iframe来实现

var tt = $("#tt");       if(tt.tabs('exists',id)){     tt.tabs('select',id);      }else{          url = url+"id="+id;          var content="<iframe frameborder='0' scrolling='auto' style='width:100%;height:100%' src="+url+"></iframe>";          tt.tabs('add',{              title:text,              closable:true,              content:content          });     }   

2.代码实现

2.1 HTML

<div data-options="region:'center',title:'数据管理',split:true" style="text-align:center">    <div id="tt" class="easyui-tabs"  style="width:100%;height:100%;">   </div>    </div>

在这里需要注意的是，一定要在id=tt，你所绑定的div中，加上easyUI-tabs这个样式，他跟tree用js生成不一样

这个样式是必须的，否则会报错，如下。一开始我认为是easyUI和jquery的版本问题，后来发现不是，应为官网下载的包里面包含我们所需要的easyUI和jquery。在jsp页面引入的时候，直接引入它包里面自带的jquery就行，不需要额外的下载其他的jquery文件。当人还有类似的比如"tabs","options"等还有其他的错，都是undefined的错。

如果碰到这这种错误，请确认一下你们的jsp页面是不是引入了它的样式类。

       

2.2  JS创建

tree节点的onclick事件：

onClick:function(node){// 添加tab                   if(node.attributes){                       node1=$("#tree").tree('getParent',node.target);                       console.info(node1);                     openTab(node.text,node.attributes,node.id);                   }               },  

   判断并添加新的tab：

//添加lab标签function openTab(text,url,id){ var tt = $("#tt");       if(tt.tabs('exists',id)){     tt.tabs('select',id);      }else{          url = url+"id="+id;          var content="<iframe frameborder='0' scrolling='auto' style='width:100%;height:100%' src="+url+"></iframe>";          tt.tabs('add',{              title:text,              closable:true,              content:content          });     }   }  

效果图如下：