jQuery EasyUI API 中文文档 - 标签页/选项卡(Tabs)

简介: Tabs 标签页/选项卡 用$.fn.tabs.defaults重写defaults。 依赖 panel linkbutton 用法示例 创建tabs 1. 经由标记创建Tabs 从标记创建Tabs更容易,我们不需要写任何JavaScript代码。
+关注继续查看

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="width: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

目录
相关文章
|
9天前
|
存储 JavaScript 前端开发
jQuery 常用API
jQuery 常用API
15 0
|
1月前
|
缓存 JavaScript 程序员
jQuery 常用API 3
jQuery 常用API
22 0
|
1月前
|
JavaScript 前端开发 API
jQuery 常用API 2
jQuery 常用API
30 0
|
1月前
|
JavaScript API
jQuery 常用API 1
jQuery 常用API
24 0
|
8月前
|
JSON 前端开发 JavaScript
【前端】使用jQuery实现一个简单的在线页面或API接口请求功能
对于测试人员来说,借助一些测试工具非常的重要,像postman等工具,很方便就能发起api接口的请求和测试 但是,对于开发人员来说,有时候未必一开始就使用这些工具,有可能电脑原因未安装到这些工具或者太麻烦 基于这样一个情况,本篇文章就来简单实现下在线页面发起http的get或post请求的功能 作者:全栈小5 链接:https://juejin.cn/post/7107132057263800327 来源:稀土掘金 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
306 0
|
8月前
|
JSON JavaScript 前端开发
JQuery JavaScript常用API整理(前端入门必学)
JQuery JavaScript常用API整理(前端入门必学)
|
9月前
|
JSON JavaScript 前端开发
JQuery常用API(未完,持续更新)
JQuery常用API(未完,持续更新)
JQuery常用API(未完,持续更新)
|
JavaScript API
直接在UI5里使用jQuery, 而不是oData API去绑定模型
直接在UI5里使用jQuery, 而不是oData API去绑定模型
87 0
直接在UI5里使用jQuery, 而不是oData API去绑定模型
|
JavaScript API
直接在UI5里使用jQuery, 而不是oData API去绑定模型
直接在UI5里使用jQuery, 而不是oData API去绑定模型
78 0
直接在UI5里使用jQuery, 而不是oData API去绑定模型
相关产品
云迁移中心
推荐文章
更多