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

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

加载方式

Class加载

  

   tab1
  
  

   tab2
  
  

   tab3
  

JS调用加载

 

  

   tab1
  
  

   tab2
  
  

   tab3
  
 

 

属性列表

事件列表

 $(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;

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