Div easyui-tab

来自ling
跳转至: 导航搜索

asyui-layout div easyui-window div easyui-panel a easyui-linkbutton input/textarea easyui-validatebox ul easyui-tree table easyui-datagrid div easyui-tab div menu-sep a easyui-splitbutton div easyui-accordion select easyui-combobox select easyui-combotree body/div easyui-layout div easyui-menu a easyui-menubutton input easyui-numberbox timerSpan

                1)width:容器宽度,自动列宽。
                2)height:容器高度,自动列高。
                3)idSeed:该根id衍生成标签面板DOM id属性。默认0
                4)plain:当true时,该Tab渲染不使用容器背景图片。默认false
                5)fit:当true时,设置该Tab大小以适应它的父容器。默认false
                6)border:当true时,显示该Tab边框。
                7)scrollIncrement:
                8)scrollDuration:
  • 事件如下:
                1)onLoad:当一个ajax Tab面板需要加载远程数据时激活。该参数跟jQuery.ajax的'success'函数效果相同。
                2)onSelect:当用户选择一个Tab面板时激活。
                3)onClose:当用户关闭一个Tab面板时激活。
  • 方法如下:
                1)resize:重绘该Tab容器的布局。
                2)add:新增加一个Tab面板,该选项参数是一个配置对象,看Tab面板属性可获取更多信息。
                3)close:关闭该Tab面板,标题参数显示你要关闭的对象。
                4)select:选择一个Tab面板。
                5)exists:如果该Tab面板存在即显示。
  • Tab面板属性如下:
                1)id:该Tab面板DOM id属性。
                2)text:该Tab面板标题文本。
                3)content:该Tab面板内容。
                4)href:一个URL,加载远程内容以填充Tab面板。
                5)cache:当true时,缓存Tab面板,当href 属性设置后有效。默认true
                6)icon:增加一个CSS class图标以显示在Tab面板的标题旁。
                7)closable:当true时,该Tab面板将显示可关闭按钮,点击能关闭该Tab面板。默认false
                8)selected:当true时,该Tab面板将被选中。默认false
                9)width:面板宽度,自动列宽。
               10)height:面板高度,自动列高。
<div class="easyui-tabs" style="width:400px;height:100px;">
    <div title="First Tab" style="padding:10px;">
        First Tab
    </div>
    <div title="Second Tab" closable="true" style="padding:10px;">
        Second Tab
    </div>
    <div title="Third Tab" iconCls="icon-reload" closable="true" style="padding:10px;">
        Third Tab
    </div>
</div>
 var e =$('#main').tabs('exists','accordion');
 if(e==true){
  $('#main').tabs('select','accordion');
  return ;
 }
 $('#main').tabs('add',{
  title:'accordion',
  href:'accordion.html',
  closable:true
 });

$('#tt').tabs({ 
border:false, 
onSelect:function(title){ 
//alert(title+' is selected'); 
}