《jQuery UI 开发指南》——2.3 tabs ()方法

2.3 tabs ()方法

tabs()方法可以按以下两种形式使用:

  • $(selector, context).tabs (options)
  • $(selector, context).tabs ("action", params)

2.3.1 tabs (options)方法
tabs(options)方法声明把一个HTML元素(及其内容)当作选项卡来管理。options参数是一个对象,用来指定选项卡的外观及行为。options参数有不同类型的值,它们要么是直接用于管理选项卡,要么就是管理和选项卡有关的事件。

1.选项卡的外观和行为
表2-1描述了修改选项卡的外观和行为的选项。

2.管理与选项卡相关的事件
有些选项可用于管理选项卡,如选择、添加和删除选项卡。这些选项(表2-2列出的)接收event参数,随后的参数是发生事件的tab对象。这个tab对象由以下属性组成:
index,发生事件的选项卡的索引(0表示第一个选项卡):
panel,对应选项卡内容的

元素。


2.3.2 tabs ("action", params)方法
和前面的tabs (options)方法不同,这个新形式的方法能在创建选项卡后修改选项卡的行为。

tabs ("action", params)方法允许通过JavaScript程序操作选项卡,比如选择、禁用、添加或者删除选项卡。第一个参数是一个字符串,指定是什么操作(例如,"add"表示添加选项卡),随后的是和这个操作有关的参数(例如,选项卡的索引)。

调用这些方法有时会引起一个和操作同名的事件发生(add事件由"add"这个操作触发)。这些在options中处理的事件已经讨论过了,表2-3列出了可以执行的 操作。

时间: 2025-01-18 23:18:46

《jQuery UI 开发指南》——2.3 tabs ()方法的相关文章

《jQuery UI 开发指南》——2.2 格式化内容

2.2 格式化内容 使用tabs ()方法会彻底改变页面中HTML元素的外观.实际上,该方法遍历了(jQuery UI内部实现)HTML代码,并给相关的元素(这里是选项卡)添加了新的CSS类,赋予了它们适当的样式. 图2-3展示了jQuery UI生成的HTML,tabs ()方法改变了HTML DOM(文档对象模型)树(代码是用Firefox的Firebug扩展查看的). 可以修改元素的CSS类来自定义元素的显示样式.比如,如果修改了与元素关联的ui-state-default CSS类,将会

《jQuery UI 开发指南》——2.4 bind ()方法

2.4 bind ()方法 除了在tabs (options)方法的选项中使用事件方法外,jQuery UI还支持使用bind ()方法来管理这些事件.jQuery UI为选项卡创建了不同的事件,在表2-4列出.

《jQuery UI 开发指南》——2.5 使用选项卡的示例

2.5 使用选项卡的示例 在本节中,我们将运用所学到的有关选项卡的知识. 2.5.1 动态创建选项卡 我们想用JavaScript动态创建选项卡(及其内容).在下面显示的代码中,首先用HTML代码创建了3个选项卡,然后用JavaScript添加了第4个: 请注意我们是如何将第一个tabs ()方法和第二个tabs ()方法链接起来的.第一个tabs ()方法是必需的,因为是它把编写的HTML代码转变成了显示选项卡的代码(使用jQuery UI自动添加的CSS类),第二个tabs ()方法执行了"

《jQuery UI 开发指南》——第2章 选项卡2.1 选项卡的基本用法

第2章 选项卡 在目前的网站中,使用选项卡(tab)的HTML页面已经是很常见了.你可以使用选项卡按话题来组织一个站点的信息,这样用户选择相关的选项卡就可以快速方便地找到相关信息了. 2.1 选项卡的基本用法假设我们想要编写一段HTML代码来显示图2-1所示的选项卡.它有一个选项卡栏(包含3个选项卡)并且每个选项卡里面的内容是不同的. 要用jQuery UI创建这种类型的页面,需要以下内容: 一个包含整个选项卡的块: 一个构成选项卡栏的元素: 每个选项卡对应的一个元素: 每个选项卡的窗口对应的一

《jQuery UI 开发指南》——1.4 在HTML页面中应该引入哪些文件

1.4 在HTML页面中应该引入哪些文件 在前面的几节中,我们知道了jQuery UI是由不同的CSS和JavaScript文件组成的.此外,有些文件是压缩过的,而有些却没有压缩.因此问题就来了:要使用jQuery UI,我们的HTML页面中应该引入哪些文件呢? 1.4.1 未压缩文件 未压缩的文件位于jQuery UI安装目录(jqueryui)下的development-bundle目录. 1.JavaScript文件 ui目录(位于development-bundle下)包含了JavaSc

《jQuery UI 开发指南》——第1章 jQuery UI介绍1.1 jQuery UI的安装

第1章 jQuery UI介绍 jQuery UI是jQuery的一个插件集,为jQuery的核心库添加了新的功能.本章我们将安装jQuery UI库,并简略地看一下它的内容.接下来的几章将会详细介绍jQuery UI的每一个插件的功能. 1.1 jQuery UI的安装 单击稳定版本(Stable)的下载链接,此链接直接指向了一个ZIP文件,它包含了jQuery UI的源代码.示例及文档.文件下载完成后,把它解压缩到一个名为jqueryui的目录中. 现在,这个jqueryui目录包含了以下内

《jQuery UI 开发指南》——1.3 什么是CSS主题

1.3 什么是CSS主题 我们之前提到的CSS主题是什么呢?为了弄清楚这个,只需按主题选择下载一个新的jQuery UI的定制版本.为此,打开http://jqueryui.com/downloa ,显示的页面如图 1-3所示. 选择右边下拉框列表中的UI lightness主题,然后单击Download(下载)按钮获取该主题的ZIP文件.这个ZIP文件的目录和之前下载的ZIP文件的目录是一模一样的,只是css目录中的CSS文件换成了新主题的对应文件.打开jqueryui中新的index.htm

《jQuery UI 开发指南》——1.2 jQuery UI概览

1.2 jQuery UI概览 为了简要了解jQuery UI,请在浏览器中打开index.html文件(如图1-1所示).在这个文件中,你可以看到jQuery UI添加的不同功能,如图1-2所示,包括: 折叠菜单(accordion menu): 输入框的自动补全机制(autocompletion mechanism): 漂亮的按钮(button)和复选框(checkbox): 便于页面展示的选项卡机制(tab mechanism): 显示在页面最上层的对话框(dialog box): 自定义

《jQuery UI 开发指南》——1.6 准备开始

1.6 准备开始 在快速浏览了jQuery UI能为我们的HTML页面做什么之后,接下来我们将深入了解每个组件的细节,首先是选项卡.