JQuery EasyUI(10)

广楚

2023-12-01

第十章：Tabs（选项卡）组件

学习要点：

加载方式
属性列表
事件列表
方法列表
选项卡面板

一、加载方式：

1.class加载方式：

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <div id="box" class="easyui-tabs" style="width:500px;height:300px;">
      <div title="Tab1">tab1</div> 
      <div title="Tab2">tab2</div>
      <div title="Tab3">tab3</div>     
  </div>
</html>

2.JS调用：

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <div id="box" style="width:500px;height:300px;">
      <div title="Tab1">tab1</div> 
      <div title="Tab2">tab2</div>
      <div title="Tab3">tab3</div>     
  </div>
</html>

$(function(){

   $('#box').tabs();
});

二、属性列表：

Tabs属性
属性名	值	说明
width	number	选项卡容器宽度，默认值为auto
height	number	选项卡容器高度，默认值为auto
plain	boolean	设置为true时，将不显示控制面板背景。默认值为：false
fit	boolean	设置为true时，选项卡的大小将铺满他所在的容器。默认值为：false
border	boolean	设置为true时，显示选项卡容器边框。默认值为：false
scrollIncrement	number	选项卡滚动条每次滚动的像素值，默认值为100
scrollDuration	number	每次滚动动画持续的时间，单位：毫秒。默认值400
tools	array,selector	工具栏添加在选项卡面板头的左侧或者右侧。可用的值有：1.一个菜单工具数据，每一个工具选项都和linkbutton相同。2.一个指向<div/>容器工具菜单的选择器。默认值为null。
toolPosition	string	工具栏位置，可用值：'letf'，'right'，默认值为：right
tabPosition	string	选项卡位置，可用值：'top','buttom','left','right'。默认值：top
headerWidth	number	选项卡标题宽度，在tabPosition属性设置为'left'或'right'的时候才有效。默认值：150。
tabWidth	number	标签条的宽度，默认值：auto
tabHight	number	标签条的高度，默认值：27
selected	number	初始化选中一个tab页。默认值：0
showHeader	boolean	设置为true时，显示tab页标题，默认值：true

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <div id="box" style="width:500px;height:300px;">
      <div title="Tab1">tab1</div> 
      <div title="Tab2">tab2</div>
      <div title="Tab3">tab3</div>     
  </div>

  <div id="tt">
      <a class="icon-add" onclick="javascript:alert('add')">&nbsp;&nbsp;</a>
      <a class="icon-edit" onclick="javascript:alert('edit')"></a>
      <a class="icon-cut" onclick="javascript:alert('cut')"></a>    
  </div>
</html>

$(function(){

  $('#box').tabs({
       //width:300,
       //height:100,
       //plain:true,
       //fit:true,
       //border:false,
       //tabWidth:300,
       //tabHeight:50,
       //scrollIncrement:50,
       //scrollDuration:1000,
    
       /*
       tools：[{
         iconCls:'icon-add',
         handler:function(){
           alert('add');
         },
        },{}],
       */

       //tools:'#tt',
       //toolPosition:'left',
       //tabPosition:'left',
       //headerWidth:300,
       //selected:1,
       //showHeader:false,

    });
});

三、事件列表：

Tabs事件
事件名	传参	说明
onLoad	panel	在ajax选项卡面板加载完远程数据的时候触发。
onSelect	title,index	用户在选择一个选项卡面板的时候触发。
onUnselect	title,index	用户在取消选择一个选项卡面板的时候触发。
onBeforeClose	title,index	在选项卡面板关闭的时候触发，返回false取消关闭操作，下面的例子展示了，在关闭选项卡面板之前以何种方式显示确认对话框。
onClose	title,index	在用户关闭一个选项卡面板的时候触发。
onAdd	title,index	在添加一个新的选项卡面板的时候触发。
onUpdate	titlte,index	在更新一个选项卡面板的时候触发。
onContextMenu	e,tilte,index	在右键点击一个选项卡面板的时候触发

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <div id="box" style="width:500px;height:300px;">
      <div title="Tab1">tab1</div> 
      <div title="Tab2" data-options="colsable:true;">tab2</div>
      <div title="Tab3">tab3</div>     
  </div>

  <div id="tt">
      <a class="icon-add" onclick="javascript:alert('add')">&nbsp;&nbsp;</a>
      <a class="icon-edit" onclick="javascript:alert('edit')"></a>
      <a class="icon-cut" onclick="javascript:alert('cut')"></a>    
  </div>
</html>

$(function(){

  $('#box').tabs({
 
    /* 

    onSelect:function(title,index){
         alert('title' + '|' + 'index');
      },

    onUnselect:function(title,index){
         alert('title' + '|' + 'index');
      },

    onBeforeClose:function(title,index){
         alert('title' + '|' + 'index');
      },

    onClose:function(title,index){
         alert('title' + '|' + 'index');
      },
    */

    onContentMenu:function(e,title,index){
         alert(e.type + '|' + 'title' + '|' + 'index');
      },

    });
});

四、方法列表：

Tabs方法
方法名	传参	说明
options	none	返回选项卡属性
tabs	none	返回所有选项卡面板
resize	none	调整选项卡容器大小和布局
add	options	添加一个新选项卡面板，选项参数是一个配置对象，查看选项卡面板属性的更多细节。在添加一个新的选项卡面板的时候它将变成可选的。
close	which	关闭一个选项卡面板，'which'参数可以是选项卡面板的标题或者索引。以指定要关闭的面板。
getTab	which	获取指定选项卡面板。'which'参数可以是选项卡面板的标题或者索引。
getTabIndex	tab	获取指定选项卡面板的索引。
getSelected	none	获取选择的选项卡面板。下面的例子展示了如何获取选择的选项卡面板索引。
select	which	选择一个选项卡面板，'which'参数可以是选项卡面板的标题或着索引。
unselect	which	取消选择一个选项卡面板，'which'参数可以是选项卡面板的标题或者索引。
showHeader	none	显示选项卡的标签头。
hideHeader	none	隐藏选项卡的标签头。
exists	which	表名指明的面板是否存在。
update	param	更新指定的选项卡面板，'param'参数包含2个属性：tab：要更新的选项卡面板，options：面板的属性。
enableTab	which	启用指定的选项卡面板，'which'参数可以是选项卡面板的标题或者索引。
disadleTab	which	禁用指定的选项卡面板，'which'参数可以是选项卡面板的标题或者索引。
scrollBy	deltaX	滚动选项卡标题指定的像素数量，负值则向右滚动，正值则向左滚动。

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <div id="box" style="width:500px;height:300px;">
      <div title="Tab1">tab1</div> 
      <div title="Tab2" id="tab2" data-options="colsable:true;">tab2</div>
      <div title="Tab3">tab3</div>     
  </div>

  <div id="tt">
      <a class="icon-add" onclick="javascript:alert('add')"></a>
      <a class="icon-edit" onclick="javascript:alert('edit')"></a>
      <a class="icon-cut" onclick="javascript:alert('cut')"></a>    
  </div>
</html>

$(function(){

  $('#box').tabs({
 
    /* 

    onSelect:function(title,index){
         alert('title' + '|' + 'index');
      },

    onUnselect:function(title,index){
         alert('title' + '|' + 'index');
      },

    onBeforeClose:function(title,index){
         alert('title' + '|' + 'index');
      },

    onClose:function(title,index){
         alert('title' + '|' + 'index');
      },

    onContentMenu:function(e,title,index){
         alert(e.type + '|' + 'title' + '|' + 'index');
      },

      //tabWidth:300,        
       onAdd:function(title,index){
             alert('title' + '|' + 'index');
        },
      
       onLoad:function(panel){
             alert(panel);
        },

    */ 
       onUpdate:function(title,index){
             alert('title' + '|' + 'index');
        },

    //}).css('display','none');
    });

   //console.log($('#box').tabs('tabs'));
  
   //$(document).click(function(){
   //     $('#box').tabs().css('display','block');
   //     $('#box').tabs('resize');        
   //   });

    /*

    $('box').tabs('add',{
        id:'bbbb',
        title:'新选项卡',
        content:'新模板',
        href:'content.xml',
        iconCls:'add',
        width:1,
        height:1,
        collapsible:true,
        closable:true,
        selected:false,
    });

    */

    //$('#box').tabs('close',1);
    //console.log($('#box').tabs('getTab',1));
    //console.log($('#box').tabs('getTabIndex',$('#tab2')));
    //console.log($('#box').tabs('getSelected'));
    //$('#box').tabs('select',1);
    //$('#box').tabs('unselect',0);
    //$('#box').tabs('hideHeader');
    //$('#box').tabs('showHeader');
    //console.log($('#box').tabs('exists',1));
    

$(document).click(function(){
    $('#box').tabs('update',{
        tab:$('#tab2'),
        options:{
          title:'修改标题',
         },
     });
   });


    //$('#box').tabs('disableTab',1);
    //$('#box').tabs('unableTab',1);
    //$('#box').tabs('scrollBy',100);
});

//content.xml文件
content

五、选项卡面板：

选项卡面板继承了panel一些属性，以下是公共属性。

选项卡面板属性
方法名	参数	说明
id	string	选项卡面板的ID属性，默认值为null
title	string	选项卡面板的标题文本。默认值空
context	string	选项卡面板的内容，默认值空
href	string	从URL加载远程数据内容填充到选项卡面板，默认值null
cache	boolean	如果为true，在'href'属性设置了有效值的时候缓存选项卡面板，默认值true
iconCls	string	定义了一个图标的CSS类ID显示到选项卡面板标题，默认值null
width	number	选项卡面板宽度。默认值为auto
height	number	选项卡面板高度。默认值为auto
collapsible	boolean	如果为true,则允许选项卡折叠，默认值false

选项卡面板独有属性
方法名	参数	说明
closable	boolean	设置为true时，选项卡面板将显示一个关闭的按钮，在点击的时候会关闭选项卡面板，默认为false。
selected	boolean	设置为true时，选项卡面板会被选中，默认为false。

作者：Roger_CoderLife

链接：https://blog.csdn.net/Roger_CoderLife/article/details/102859534

本文根据网易云课堂JQuery EasyUI视频教程翻译成文档，转载请注明原文出处，欢迎转载

JQuery EasyUI(10)

第十章：Tabs（选项卡）组件

学习要点：

一、加载方式：

二、属性列表：

三、事件列表：

四、方法列表：

五、选项卡面板：

相关阅读

相关文章

相关问答

相关文档