前言

本章讲解的是easyui tabs控件，以及案例演示。

tabs控件介绍

从标记创建标签页（Tabs）更容易，我们不需要写任何 JavaScript 代码。
记住把 ‘easyui-tabs’ class 添加到

标记。
每个标签页面板（tab panel）通过子
标记被创建，其用法与面板（panel）一样。

<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="padding:20px;display:none;">
        tab3
    </div>
</div>

属性

在这里插入图片描述

事件

方法

在这里插入图片描述

tabs选项卡案例演示

效果演示

在这里插入图片描述
1.jsp页面布局

<input type="hidden" id="ctx" value="${pageContext.request.contextPath }">
<body class="easyui-layout">
 <div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">north region</div>
 <div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">
  <ul id="tt"></ul>  
 </div>
 <div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>
 <div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
 <div data-options="region:'center',title:'Center'">
<div id="bookTabs" class="easyui-tabs" style="width:100%;height:100%;">   
    <div title="首页" style="padding:20px;display:none;">本章各种数据指标</div>   
       </div>      
 </div>
</body>

2.js代码

$(function(){
    
    
 var ctx=$("#ctx").val();
 $('#tt').tree({
    
        
     url:ctx+'/permission.action?methodName=menuTree',
     onClick: function(node){
    
    
     //alert(node.text); 
      //debugger;
      //目前存在的问题，重复的tab页反复打开
      //针对于上面存在的问题进行分析，判断单前是否存在对应的title的选项卡
      //如果存在，就切换到对应的选项卡，不存在就重新打开一个
         //console.loh($('#bookTabs').tabs('exists',node.text));
         if($('#bookTabs').tabs('exists',node.text)){
    
    
          //切换选项卡
          $('#bookTabs').tabs('select',node.text);
         }else{
    
    
         //新增选项 
          //存在问题：非页子节点按照开发角度来说，是不能够打开页面的
          //分析，非叶子节点都没有跳转页面的
          var src=ctx+node.attributes.self.url;
          if(src){
    
    
           var content='<iframe scrolling="no" frameborder="0" src="'+src+'" width="99%" height="99%"></iframe>';
            
     $('#bookTabs').tabs('add',{
    
        
         title:node.text,    
         content:content,    
         closable:true,    
tools:[{
    
        
             iconCls:'icon-mini-refresh',    
             handler:function(){
    
        
                 alert('refresh');    
             }    
         }]    
     }); 
     
          }
           }
      
     }  
 });  
 })

Easyui--tabs控件

目录

前言

tabs控件介绍

tabs选项卡案例演示

猜你喜欢