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

本文主要是介绍jQuery EasyUI API 中文文档 - Tabs标签页/选项卡,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

jQuery EasyUI API 中文文档 - 标签页/选项卡(Tabs),学习jQuery EasyUI的朋友可以参考下。

Tabs 标签页/选项卡 

用$.fn.tabs.defaults重写defaults。


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

复制代码代码如下:

<div id="tt" class="easyui-tabs" style="width:500px;height:250px;"> 
<div title="Tab1" style="padding:20px;display:none;"> 
tab1 
</div> 
<div title="Tab2" closable="true" style="overflow:auto;padding:20px;display:none;"> 
tab2 
</div> 
<div title="Tab3" iconCls="icon-reload" closable="true" style="padding:20px;display:none;"> 
tab3 
</div> 
</div> 

2. 编程创建Tabs 
现在我们编程创建 Tabs,我们同时捕捉 'onSelect' 事件。 
复制代码代码如下:

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

}); 

增加新的 tab panel 
复制代码代码如下:

// 增加一个新的 tab panel 
$('#tt').tabs('add',{ 
title:'New Tab', 
content:'Tab Body', 
closable:true 
}); 

获取选中的 Tab 
复制代码代码如下:

// 获取选中的 tab panel 和它的 tab 对象 
var pp = $('#tt').tabs('getSelected'); 
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 panel,options 参数是一个配置对象,更多详细信息请参见  tab panel 特性。

close

title

关闭一个 tab panel,title 参数是指被关闭的 panel。

getTab

title

获取指定的 tab panel。

getSelected

none

获取选中的 tab panel。

select

title

选择一个 tab panel。

exists

title

是指是否存在特定的 panel。

update

param

更新指定的 tab panel,param 包含两个特性:
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

一些附加的特性


这篇关于jQuery EasyUI API 中文文档 - Tabs标签页/选项卡的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1004620

相关文章

使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)

《使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)》PPT是一种高效的信息展示工具,广泛应用于教育、商务和设计等多个领域,PPT文档中常常包含丰富的图片内容,这些图片不仅提升了... 目录一、引言二、环境与工具三、python 提取PPT背景图片3.1 提取幻灯片背景图片3.2 提取

Android实现在线预览office文档的示例详解

《Android实现在线预览office文档的示例详解》在移动端展示在线Office文档(如Word、Excel、PPT)是一项常见需求,这篇文章为大家重点介绍了两种方案的实现方法,希望对大家有一定的... 目录一、项目概述二、相关技术知识三、实现思路3.1 方案一:WebView + Office Onl

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Python实现word文档内容智能提取以及合成

《Python实现word文档内容智能提取以及合成》这篇文章主要为大家详细介绍了如何使用Python实现从10个左右的docx文档中抽取内容,再调整语言风格后生成新的文档,感兴趣的小伙伴可以了解一下... 目录核心思路技术路径实现步骤阶段一:准备工作阶段二:内容提取 (python 脚本)阶段三:语言风格调

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

使用Java将DOCX文档解析为Markdown文档的代码实现

《使用Java将DOCX文档解析为Markdown文档的代码实现》在现代文档处理中,Markdown(MD)因其简洁的语法和良好的可读性,逐渐成为开发者、技术写作者和内容创作者的首选格式,然而,许多文... 目录引言1. 工具和库介绍2. 安装依赖库3. 使用Apache POI解析DOCX文档4. 将解析

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行