jQuery EasyUI API Chinese documentation - Tabs tabs/tabs_jquery

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:

tab1
< ;/div>

tab2

tab3

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。

Statement：

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

Previous article：jQuery EasyUI API Chinese Documentation - Pagination_jqueryNext article：jQuery EasyUI API Chinese Documentation - Pagination_jquery

Related articles

See more

• An in-depth analysis of the Bootstrap list group component
• Detailed explanation of JavaScript function currying
• Complete example of JS password generation and strength detection (with demo source code download)
• Angularjs integrates WeChat UI (weui)
• How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills

Public welfare online PHP training，Help PHP learners grow quickly！

About usDisclaimerSitemap

© php.cn All rights reserved