jQuery EasyUI API Chinese documentation - Tabs tabs/tabs

jQuery EasyUI API Chinese documentation - Tabs tabs/tabs_jquery

WBOY

Release： 2016-05-16 18:01:29

Original

1402 people have browsed it

Tabs tabs/tabs

overrides defaults with $.fn.tabs.defaults.

Dependencies
panel
linkbutton
Usage example
Create tabs
1. Via tags Creating Tabs
Creating Tabs from markup is easier, we don’t need to write any JavaScript code. Remember to add the 'easyui-tabs' class to the

tag. Each tab panel is created via a child

tag and can be used in the same way as a Panel.

Copy code The code is as follows:

2. Create Tabs programmatically
Now we create Tabs programmatically, and we also capture the 'onSelect' event.

Copy code The code is as follows:

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

Add new tab panel

Copy code The code is as follows:

 
// Add a new tab panel 
$('#tt').tabs('add',{ 
title:'New Tab', 
content:'Tab Body', 
closable:true 
}); 

Get the selected Tab

Copy code The code is as follows:

 
/ / Get the selected tab panel and its tab object 
var pp = $('#tt').tabs('getSelected'); 
var tab = pp.panel('options').tab; / / Corresponding tab object 

特性

名称

类型

说明

默认值

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。

Related labels：

tabs Bookmark page Tab

source：php.cn

Previous article：jQuery EasyUI API Chinese Documentation - Pagination_jquery Next article：jQuery EasyUI API Chinese Document Adjustable Size_jquery

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn