zoukankan      html  css  js  c++  java
  • jQuery EasyUI API 中文文档 标签页/选项卡(Tabs)

    Tabs 标签页/选项卡

    $.fn.tabs.defaults重写defaults

    依赖

    • panel
    • linkbutton

    用法示例

    创建tabs

    1. 经由标记创建Tabs

    从标记创建Tabs更容易,我们不需要写任何JavaScript代码。记住把 'easyui-tabs' 类添加到<div/>标记,每个tab panel 经由子<div/>标记被创建,其用法与Panel一样。

    1. <div id="tt" class="easyui-tabs" style="500px;height:250px;">

    2. <div title="Tab1" style="padding:20px;display:none;">

    3.         tab1  

    4. </div>

    5. <div title="Tab2" closable="true" style="overflow:auto;padding:20px;display:none;">

    6.         tab2  

    7. </div>

    8. <div title="Tab3" iconCls="icon-reload" closable="true" style="padding:20px;display:none;">

    9.         tab3  

    10. </div>

    11. </div>

    2. 编程创建Tabs

    现在我们编程创建 Tabs,我们同时捕捉 'onSelect' 事件。

    1. $('#tt').tabs({  

    2.     border:false,  

    3.     onSelect:function(title){  

    4.         alert(title+' is selected');  

    5.     }  

    6. }); 

    增加新的 tab panel

    1. // 增加一个新的 tab panel

    2. $('#tt').tabs('add',{  

    3.     title:'New Tab',  

    4.     content:'Tab Body',  

    5.     closable:true

    6. }); 

    获取选中的 Tab

    1. // 获取选中的 tab panel 和它的 tab 对象 

    2. var pp = $('#tt').tabs('getSelected');  

    3. var tab = pp.panel('options').tab;    // 相应的 tab 对象 

    特性

    名称

    类型

    说明

    默认值

    width

    number

    Tabs 容器的宽度。

    auto

    height

    number

    Tabs 容器的高度。

    auto

    plain

    boolean

    True 就不用背景容器图片来呈现 tab 条。

    false

    fit

    boolean

    True 就设置 Tabs 容器的尺寸以适应它的父容器。

    false

    border

    boolean

    True 就显示 Tabs 容器边框。

    true

    scrollIncrement

    number

    每按一次tab 滚动按钮,滚动的像素数。

    100

    scrollDuration

    number

    滚动动应该的毫秒数。

    400

    tools

    array

    右侧工具栏,每个工具选项都和 Linkbutton 一样。

    null

    事件

    名称

    参数

    说明

    onLoad

    panel

    当一个 ajax tab panel 完成加载远程数据时触发。

    onSelect

    title

    当用户选择一个 tab panel 时触发。

    onBeforeClose

    title

    当一个 tab panel 被关闭前触发,返回 false 就取消关闭动作。

    onClose

    title

    当用户关闭一个 tab panel 时触发。

    onAdd

    title

    当一个新的 tab panel 被添加时触发。

    onUpdate

    title

    当一个 tab panel 被更新时触发。

    onContextMenu

    e, title

    当一个 tab panel 被右键点击时触发。

    方法

    名称

    参数

    说明

    options

    none

    返回 tabs options

    tabs

    none

    返回全部 tab panel

    resize

    none

    调整 tabs 容器的尺寸并做布局。

    add

    options

    增加一个新的 tab paneloptions 参数是一个配置对象,更多详细信息请参见 tab panel 特性。

    close

    title

    关闭一个 tab paneltitle 参数是指被关闭的 panel

    getTab

    title

    获取指定的 tab panel

    getSelected

    none

    获取选中的 tab panel

    select

    title

    选择一个 tab panel

    exists

    title

    是指是否存在特定的 panel

    update

    param

    更新指定的 tab panelparam 包含两个特性:
    tab
    :被更新的 tab panel
    options
    panel options

    Tab Panel

    Tab panel 特性被定义在 panel 组件里,下面是一些常用的特性。

    名称

    类型

    说明

    默认值

    title

    string

    Tab panel 的标题文字。

    content

    string

    Tab panel 的内容。

    href

    string

    加载远程内容来填充 tab panel URL

    null

    cache

    boolean

    True 就在设定了有效的 href 特性时缓存这个 tab panel

    true

    iconCls

    string

    显示在tab panel 标题上的图标的 CSS 类。

    null

    width

    number

    Tab panel 的宽度。

    auto

    height

    number

    Tab panel 的高度。

    auto

    一些附加的特性

    名称

    类型

    说明

    默认值

    closable

    boolean

    当设置为 true 时,tab panel 将显示一个关闭按钮,点击它就能关闭这个tab panel

    false

    selected

    boolean

    当设置为 true 时,tab panel 将被选中。

    false

  • 相关阅读:
    最重要的是动手去做
    java中的native关键字
    用ant重新编译jdk加入调试信息
    UnSupported Encoding错误
    mysql中查看字符集的cmd指令
    java中的IO流读取文件
    分享一个jdk源码链接
    mysql dos启动出现1067错误的解决方法
    vs2010中的外部依赖项的含义
    vs2010中出现:程序管理器匹配不正确错误
  • 原文地址:https://www.cnblogs.com/hantianwei/p/2407054.html
Copyright © 2011-2022 走看看