Easyui--tabs控件

目录

  • 前言
    • tabs控件介绍
      • tabs选项卡案例演示

前言

本章讲解的是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>

属性

Easyui--tabs控件_第1张图片

事件
Easyui--tabs控件_第2张图片

方法

Easyui--tabs控件_第3张图片Easyui--tabs控件_第4张图片

tabs选项卡案例演示

效果演示

Easyui--tabs控件_第5张图片
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='';
            
     $('#bookTabs').tabs('add',{    
         title:node.text,    
         content:content,    
         closable:true,    
tools:[{    
             iconCls:'icon-mini-refresh',    
             handler:function(){    
                 alert('refresh');    
             }    
         }]    
     }); 
     
          }
           }
      
     }  
 });  
 })

你可能感兴趣的:(js,javascript,css,easyui)