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自动化处理PDF文档的操作完整指南

《Python自动化处理PDF文档的操作完整指南》在办公自动化中,PDF文档处理是一项常见需求,本文将介绍如何使用Python实现PDF文档的自动化处理,感兴趣的小伙伴可以跟随小编一起学习一下... 目录使用pymupdf读写PDF文件基本概念安装pymupdf提取文本内容提取图像添加水印使用pdfplum

Python从Word文档中提取图片并生成PPT的操作代码

《Python从Word文档中提取图片并生成PPT的操作代码》在日常办公场景中,我们经常需要从Word文档中提取图片,并将这些图片整理到PowerPoint幻灯片中,手动完成这一任务既耗时又容易出错,... 目录引言背景与需求解决方案概述代码解析代码核心逻辑说明总结引言在日常办公场景中,我们经常需要从 W

C#高效实现Word文档内容查找与替换的6种方法

《C#高效实现Word文档内容查找与替换的6种方法》在日常文档处理工作中,尤其是面对大型Word文档时,手动查找、替换文本往往既耗时又容易出错,本文整理了C#查找与替换Word内容的6种方法,大家可以... 目录环境准备方法一:查找文本并替换为新文本方法二:使用正则表达式查找并替换文本方法三:将文本替换为图

Python批量替换多个Word文档的多个关键字的方法

《Python批量替换多个Word文档的多个关键字的方法》有时,我们手头上有多个Excel或者Word文件,但是领导突然要求对某几个术语进行批量的修改,你是不是有要崩溃的感觉,所以本文给大家介绍了Py... 目录工具准备先梳理一下思路神奇代码来啦!代码详解激动人心的测试结语嘿,各位小伙伴们,大家好!有没有想

Go语言使用net/http构建一个RESTful API的示例代码

《Go语言使用net/http构建一个RESTfulAPI的示例代码》Go的标准库net/http提供了构建Web服务所需的强大功能,虽然众多第三方框架(如Gin、Echo)已经封装了很多功能,但... 目录引言一、什么是 RESTful API?二、实战目标:用户信息管理 API三、代码实现1. 用户数据

Python用Flask封装API及调用详解

《Python用Flask封装API及调用详解》本文介绍Flask的优势(轻量、灵活、易扩展),对比GET/POST表单/JSON请求方式,涵盖错误处理、开发建议及生产环境部署注意事项... 目录一、Flask的优势一、基础设置二、GET请求方式服务端代码客户端调用三、POST表单方式服务端代码客户端调用四

SpringBoot结合Knife4j进行API分组授权管理配置详解

《SpringBoot结合Knife4j进行API分组授权管理配置详解》在现代的微服务架构中,API文档和授权管理是不可或缺的一部分,本文将介绍如何在SpringBoot应用中集成Knife4j,并进... 目录环境准备配置 Swagger配置 Swagger OpenAPI自定义 Swagger UI 底

基于Python Playwright进行前端性能测试的脚本实现

《基于PythonPlaywright进行前端性能测试的脚本实现》在当今Web应用开发中,性能优化是提升用户体验的关键因素之一,本文将介绍如何使用Playwright构建一个自动化性能测试工具,希望... 目录引言工具概述整体架构核心实现解析1. 浏览器初始化2. 性能数据收集3. 资源分析4. 关键性能指

使用Python的requests库调用API接口的详细步骤

《使用Python的requests库调用API接口的详细步骤》使用Python的requests库调用API接口是开发中最常用的方式之一,它简化了HTTP请求的处理流程,以下是详细步骤和实战示例,涵... 目录一、准备工作:安装 requests 库二、基本调用流程(以 RESTful API 为例)1.

Python调用LibreOffice处理自动化文档的完整指南

《Python调用LibreOffice处理自动化文档的完整指南》在数字化转型的浪潮中,文档处理自动化已成为提升效率的关键,LibreOffice作为开源办公软件的佼佼者,其命令行功能结合Python... 目录引言一、环境搭建:三步构建自动化基石1. 安装LibreOffice与python2. 验证安装