Jquery Easyui选项卡组件Tab使用详解（10）

本文实例为大家分享了Jquery Easyui选项卡组件的实现代码，供大家参考，具体内容如下

加载方式

Class加载

<div class="easyui-tabs" style="width: 400px;height: 250px">
  <div title="Tab1" data-options="closable:true">
   tab1
  </div>
  <div title="Tab2" data-options="closable:true">
   tab2
  </div>
  <div title="Tab3" data-options="iconCls:'icon-reload',closable:true">
   tab3
  </div>
</div>

JS调用加载

 <div id="box" style="width: 400px;height: 250px">
  <div title="Tab1" data-options="closable:true">
   tab1
  </div>
  <div title="Tab2" data-options="closable:true">
   tab2
  </div>
  <div title="Tab3" data-options="iconCls:'icon-reload',closable:true">
   tab3
  </div>
 </div>

 <script>
  $(function () {
   $('#box').tabs({
    // 选项卡容器宽度
    width : 500,
    // 项卡容器高度
    height: 400,
    // 是否不显示控制面板背景。
    plain : false,
    // 选项卡是否将铺满它所在的容器
    fit : false,
    // 是否显示选项卡容器边框
    border : true,
    // 选项卡滚动条每次滚动的像素值
    scrollIncrement : 200,
    // 每次滚动动画持续的时间
    scrollDuration : 400,
    // 工具栏添加在选项卡面板头的左侧或右侧
    tools:[{
     iconCls : 'icon-add',
     handler : function () {
      alert('添加!');
     },
    }],
    // 工具栏位置
    toolPosition : 'left',
    // 选项卡位置
    tabPosition : 'left',
    // 选项卡标题宽度，在 tabPosition 属性设置为'left'或'right'的时候才有效
    headerWidth : 300,
    // 标签条的宽度
    tabWidth : 250,
    // 标签条的高度
    tabHeight : 25,
    // 初始化选中一个 tab 页, 从0开始
    selected : 2,
    // 是否显示 tab 页标题
    showHeader: true
   }) ;
  });
 </script>

属性列表

事件列表

 $(function () {
   $('#box').tabs({
    // 在 ajax 选项卡面板加载完远程数据的时候触发。
    onLoad : function (pannel) {
     alert(panel);
    },
    // 用户在选择一个选项卡面板的时候触发
    onSelect : function (title,index) {
     alert(title + '|' + index);
    },
    // 用户在取消选择一个选项卡面板的时候触发。
    // (选择另一个时，先触发上一个的此方法，再触发下一个的onSelect方法)
    onUnselect : function (title, index) {
     alert(title + '|' + index);
    },
    // 在选项卡面板关闭的时候触发，返回false 取消关闭操作
    onBeforeClose : function (title, index) {
     alert(title + '|' + index);
     return false;
    },
    // 在关闭一个选项卡面板的时候触发
    onClose : function (title, index) {
     alert(title + '|' + index);
    },
    // 在添加一个新选项卡面板的时候触发
    onAdd : function (title, index) {
     alert(title + '|' + index);
    },
    // 在更新一个选项卡面板的时候触发
    onUpdate : function (title, index) {
     alert(title + '|' + index);
    },
    // 在右键点击一个选项卡面板的时候触发
    onContextMenu : function (e, title, index) {
     alert(e + '|' + title + '|' + index);
    }
   }) ;
  });

方法列表

//返回属性对象
console.log($('#box').tabs('options'));
//返回所有选项卡面板
console.log($('#box').tabs('tabs'));
//新增一个选项卡
$('#box').tabs('add', {
 title : '新面板',
 selected : false,
});
//选择指定下标的选项卡
$('#box').tabs('select', 1);
//取消选择指定下标的选项卡
$('#box').tabs('select', 0);
//关闭指定下标的选项卡
$('#box').tabs('close', 1);
//重新调整面板布局和大小
$('#box').tabs('resize');
//指定下标的选项卡是否存在
console.log($('#box').tabs('exists', 4));
//获取指定下标的选项卡
console.log($('#box').tabs('getTab', 1));
//获取指定面板的索引
console.log($('#box').tabs('getTabIndex','#tab2'));
//获取被选定的选项卡
console.log($('#box').tabs('getSelected'));
//显示选项卡标题
$('#box').tabs('showHeader');
//隐藏选项卡标题
$('#box').tabs('hideHeader');
//更新一个选项卡
$('#box').tabs('update', {
 tab : $('#tab2'),
 options : {
 Title : '新标题',
 }
});
//禁用指定下标或标题的选项卡
$('#box').tabs('disableTab', 1);
$('#box').tabs('disableTab', 'Tab2');
//启用指定下标或标题的选项卡
$('#box').tabs('enableTab', 1);
$('#box').tabs('enableTab', 'Tab2');
//滚动选项卡标题，正值向左，负值向右
$('#box').tabs('scrollBy', 100);
//可以使用$.fn.tabs.defaults 重写默认值对象。
$.fn.tabs.defaults.border = false;

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# Jquery # Easyui # 选项卡组件 # Tab # jqueryUI tab标签页代码分享 # jquery-easyui关闭tab自动切换到前一个tab # jQuery EasyUI API 中文文档 - Tabs标签页/选项卡 # jQuery EasyUI Tab 选项卡问题小结 # 关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法 # jQuery UI制作选项卡（tabs） # jQuery EasyUI 选项卡面板tabs的使用实例讲解 # 为JQuery EasyUI 表单组件增加焦点切换功能的方法 # Jquery组件easyUi实现选项卡切换示例 # jquery ui 实现 tab标签功能示例【测试可用】 # 选项卡 # 加载 # 重写 # 可以使用 # 设置为 # 大家分享 # 具体内容 # 大家多多 # 是否存在 # 右键点击 # 默认值 # 滚动条 # 铺满 # iconCls # icon # reload # true # closable # options # false

返回目录在线咨询

上一篇：然后制作网站,se官网怎么进去？
下一篇：Python代码测试策略_质量保障解析【教程】

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

Jquery Easyui选项卡组件Tab使用详解（10）

您的项目需求