easyUI Tabs

@author YHC

$.fn.tabs.defaults覆盖默认值

tabs显示一个panel的集合,每一次仅仅只是显示一个tab panel,所有tab panel都有标题和一些小的工具按钮,包含close按钮和其他自定义按钮;

 

使用示例:

创建示例
创建 tabs
1.创建tabs通过标记;
从标记创建tabs非常简单,我们不需要写任何的javascript代码,记得添加"easyui-panel"样式给p标记,每个tab panel的创建通过子p标记,使用和panel是一样的.
[html]
<p id="tt" class="easyui-tabs" style="width:500px;height:250px;">   
    <p title="Tab1" style="padding:20px;display:none;">   
        tab1   
    </p>   
    <p title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">   
        tab2   
    </p>   
    <p title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">   
        tab3   
    </p>   
</p>   

<p id="tt" class="easyui-tabs" style="width:500px;height:250px;"> 
    <p title="Tab1" style="padding:20px;display:none;"> 
        tab1 
    </p> 
    <p title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;"> 
        tab2 
    </p> 
    <p title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;"> 
        tab3 
    </p> 
</p> 
2.通过编程的方式创建tabs
现在我们用编程的方式创建tabs,并且捕捉"onSelect"事件;
[javascript] view plaincopyprint?$('#tt').tabs({   
    border:false,   
    onSelect:function(title){   
        alert(title+' is selected');   
    }   
});  

$('#tt').tabs({ 
    border:false, 
    onSelect:function(title){ 
        alert(title+' is selected'); 
    } 
}); 添加一个新的 tab panel
添加一个新的tab panel和小工具,小工具的icon(8*8)放在关闭按钮前面;
[javascript] view plaincopyprint?// add a new tab panel    
$('#tt').tabs('add',{   
    title:'New Tab',   
    content:'Tab Body',   
    closable:true,   
    tools:[{   
        iconCls:'icon-mini-refresh',   
        handler:function(){   
            alert('refresh');   
        }   
    }]   
});   

// add a new tab panel 
$('#tt').tabs('add',{ 
    title:'New Tab', 
    content:'Tab Body', 
    closable:true, 
    tools:[{ 
        iconCls:'icon-mini-refresh', 
        handler:function(){ 
            alert('refresh'); 
        } 
    }] 
});  得到选中 Tab
[javascript] view plaincopyprint?// 得到当前选中的tab panel和他的tab对象  
var pp = $('#tt').tabs('getSelected');   
var tab = pp.panel('options').tab;    // 对应的tab对象 

// 得到当前选中的tab panel和他的tab对象
var pp = $('#tt').tabs('getSelected'); 
var tab = pp.panel('options').tab;    // 对应的tab对象属性
Name Type Description Default
width number tab容器的宽度 . auto
height number tab容器的高度. auto
plain boolean 如果设置True渲染tab 没有背景图片. false
fit boolean 如果设置True将设置tabs容器的大小,适应父容器大小. false
border boolean True显示tabs容器border. true
scrollIncrement number 每次tab滚动按钮被按下时滚动的一个像素值  100
scrollDuration number 每一个滚动动作持续的时间的毫秒值. 400
tools array,selector 右边的工具栏. 可用值:
1. 一个指定的工具数组, 每个tool的选项和linkbutton相同.
2. 一个选择器指向<p/>包含的工具集合.

代码示例:
使用数组定义工具.

$('#tt').tabs({
 tools:[{
  iconCls:'icon-add',
  handler:function(){
   alert('add')
  }
 },{
  iconCls:'icon-save',
  handler:function(){
   alert('save')
  }
 }]
});
使用一个存在的DOM容器哦定义工具.

$('#tt').tabs({
 tools:'#tab-tools'
});
<p id="tab-tools">
 <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-add"></a>
 <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-save"></a>
</p>
 null

事件
Name Parameters Description
onLoad panel ajax tab panel加载远程服务器端数据结束时候触发.
onSelect title,index 当用户选中一个tab panel的时候触发.
onBeforeClose title,index 在tab panel关闭之前触发,该方法返回false将取消关闭动作. 下面的示例展示,如何显示一个confirm对话框在关闭tabpanel关闭之前.
$('#tt').tabs({
  onBeforeClose: function(title){
 return confirm('Are you sure you want to close ' + title);
  }
});
// using the async confirm dialog
$('#tt').tabs({
  onBeforeClose: function(title,index){
 var target = this;
 $.messager.confirm('Confirm','Are you sure you want to close '+title,function(r){
  if (r){
   var opts = $(target).tabs('options');
   var bc = opts.onBeforeClose;
   opts.onBeforeClose = function(){};  // allowed to close now
   $(target).tabs('close',index);
   opts.onBeforeClose = bc;  // restore the event function
  }
 });
 return false; // prevent from closing
  }
});
 
onClose title,index 当用户关闭一个tab panel的时候触发.
onAdd title,index 当一个新的tab panel被添加进来的时候触发.
onUpdate title,index 当一个tab panel更新的时候触发.
onContextMenu e, title,index 当在一个tab panel上右键的时候触发.

方法
Name Parameter Description
options none 返回 tab panel 的 options选项.
tabs none 返回所有的 tab panel对象.
resize none 调整tab 容器的大小布局.
add options 添加一个新的tab panel, 这个 options的参数是一个配置对象, 请见tab panel 属性获得更多详细信息. 当添加一个新的tab panel的时候,它将成为当前被选中panel.
添加一个不选中的tab panel,请记住设置 'selected' 属性为false.
// 代码示例 添加一个新的补选中的tab panel$('#tt').tabs('add',{
 title: 'new tab',
 selected: false
 //...
});
 
close which 关闭一个 tab panel, 'which' 参数可以是tab panel的title(标题)和index(下标)然后将其关闭.
getTab which 得到一个特定的 tab panel,  'which'参数可以是tab panel的title(标题)和index(下标)
getTabIndex tab 得到一个特定的tab panel的下标.
getSelected none 得到选中的tab panel. 以下示例展示 如果得到当前选择的tab panel的下标.
var tab = $('#tt').tabs('getSelected');
var index = $('#tt').tabs('getTabIndex',tab);
alert(index);//输出下标
 
select which 选中一个 tab panel, 'which' 参数可以是tab panel的title(标题)或者index(下标) .
exists which 指明如果一个特定的tab panel是存在的, 'which' 参数可以是tab panel的title(标题)或者index(下标).
update param 更新特定的 tab panel,param 参数包含2个属性:
tab: 需要更新的tab panel.
options: panel options配置选项.

示例代码:
//更新选择的panel的内容和标题
var tab = $('#tt').tabs('getSelected');  //得到选中的panel
$('#tt').tabs('update', {
 tab: tab,
 options: {
  title: 'New Title',
  href: 'get_content.php'  // 请求新的内容的URL
 }
});
 
enableTab which 启用一个特定的 tab panel,'which' 参数可以是tab panel的title(标题)或者是index(下标). 这个方法从1.3版本以后可用.
示例代码:

$('#tt').tabs('enableTab', 1); //启用第二个tab panel
$('#tt').tabs('enableTab', 'Tab2');//启用标题为'Tab2'的tab panel
 
disableTab which 禁用特定的 tab panel, 'which' 参数可以是tab panel的title(标题)或者index(下标).这个方法从1.3版本开始可用.
示例代码:

$('#tt').tabs('disableTab', 1); //禁用第二个tab panel.
 

Tab Panel
tab panel属性是定义在panel组件里,下面是一些常见的属性:
Name Type Description Default
id string tab panel的id属性. null
title string tab panel 标题文本.  
content string tab panel 内容.  
href string 一个URL加载远程数据内容来填充tab panel. null
cache boolean True 将缓存 tab panel, 当href被设置时该选项有效. true
iconCls string 一个icon 的css样式显示在tab panel标题上. null
width number  tab panel宽度. auto
height number tab panel高度. auto

一些新增的属性.

Name Type Description Default
closable boolean 当设置为 true时, tab panel将显示一个可关闭按钮,可以点击关闭tab panel. false
selected boolean 当设置为true时, tab panel将被选中. false

作者：yhc13429826359