Jquery Easyui選項卡組件Tab使用詳解（10）

更新時間：2016年12月18日 16:50:50 作者：Jsakura

這篇文章主要為大家詳細介紹了Jquery Easyui菜單組件Menu的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Jquery Easyui選項卡組件的實現(xiàn)代碼，供大家參考，具體內(nèi)容如下

加載方式

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調(diào)用加載

 <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,
    // 每次滾動動畫持續(xù)的時間
    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 選項卡面板加載完遠程數(shù)據(jù)的時候觸發(fā)。
    onLoad : function (pannel) {
     alert(panel);
    },
    // 用戶在選擇一個選項卡面板的時候觸發(fā)
    onSelect : function (title,index) {
     alert(title + '|' + index);
    },
    // 用戶在取消選擇一個選項卡面板的時候觸發(fā)。
    // (選擇另一個時，先觸發(fā)上一個的此方法，再觸發(fā)下一個的onSelect方法)
    onUnselect : function (title, index) {
     alert(title + '|' + index);
    },
    // 在選項卡面板關閉的時候觸發(fā)，返回false 取消關閉操作
    onBeforeClose : function (title, index) {
     alert(title + '|' + index);
     return false;
    },
    // 在關閉一個選項卡面板的時候觸發(fā)
    onClose : function (title, index) {
     alert(title + '|' + index);
    },
    // 在添加一個新選項卡面板的時候觸發(fā)
    onAdd : function (title, index) {
     alert(title + '|' + index);
    },
    // 在更新一個選項卡面板的時候觸發(fā)
    onUpdate : function (title, index) {
     alert(title + '|' + index);
    },
    // 在右鍵點擊一個選項卡面板的時候觸發(fā)
    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);
//重新調(diào)整面板布局和大小
$('#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;

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: