使用 jQuery UI 主题_H5之家 - 中国HTML5教程资源分享第一站

主题并不是一个新概念。当您使用级联样式表 (CSS) 样式与类设计网站的外观时，很可能已经使用了一些主题。使用框架标准化设计方法，可以减少工作量和需要编写的代码量。

jQuery UI 现在已经成为主题实现的行业标准。虽然还存在其他的选择，比如 Dojo（与 Dijit 耦合在一起）或 Ext JS，但 jQuery UI 将主题与小部件的使用结合在一起，小部件是用户与日期选择器或按钮进行交互时需要使用的元素。构成 jQuery UI 主题的文件的内部工作原理就是 CSS 与 JavaScript。但是，已经融入 CSS 与 JavaScript 使用中的思维过程和标准化使得 jQuery UI 成为打造网站外观的优秀平台。

基础知识

本文假设您熟悉 Document Object Model (DOM) 以及它在 HTML 元素之间建立关系的方式。

您还应该熟悉 CSS，特别是 CSS3，因为它是目前流行的 Web 浏览器（和 JavaScript），使用频率最高，而且还是支持程度最高的 CSS 标准。这种脚本语言在运行时将 DOM 元素与 CSS 绑定在一起，提供 jQuery UI（及其主题和小部件）实现的完整用户体验。

请注意，小部件从 DOM 接收它们与其他 HTML 元素之间的关系，并使用 CSS 接收使用已定义类（如前所述）的样式。事件和功能是通过 JavaScript 实现的，JavaScript 负责在运行时操作 DOM 并指定各种 CSS 样式。

jQuery 根据网站应用程序的需要或请求创建和实现小部件。还要注意的是，可以删除小部件，但这样做只会删除小部件产生的外观变动。

jQuery UI 主题

jQuery UI 平台包含两个子框架：小部件框架和 CSS 框架，前者包含 Widget Factory 和一组常用的小部件。Widget Factory 为所有 jQuery UI 小部件提供基础，包括小部件集合中包含的那些常用小部件。创建小部件时，既可以从集合中的任意一个常用小部件开始创建，也可以从头开始创建。了解常用小部件所在的位置之后，就可以在您最喜欢的编辑器中打开它们并查看代码。在编辑器中，既可以通过修改代码来生成自定义的小部件（使用其他任何小部件作为起点），也可以使用相似的结构创建一个小部件。

jQuery UI 主题文件夹结构

在继续查看各种文件及其内容之前，从 jQuery UI 平台（在中可以找到相关链接）下载任意一个主题。下载得到的 ZIP 文件包含三个文件夹：css、js 和 development-bundle。development-bundle 文件夹包含一个名为 themes 的文件夹，该文件夹用于保存开发中 jQuery UI 主题。themes 文件夹还包含一个名为所选/所下载主题（比如 UI lightness）的文件夹，以及一个名为 base 的文件夹。base 文件夹包含您自己的主题的起点。无论是否选择主题，都会下载 base 文件夹。

css 文件夹包含一个名为所下载主题的文件夹。这个主题文件夹包含一个 CSS 文件，它包含应用于所有组件或小部件的 CSS 标记。然而，development-bundle 文件夹还包含一个 themes/[theme-name] 文件夹（此处的 [theme-name] 是所选主题的实际名称），其中包含单独应用于每个组件或小部件的 CSS 文件。这种结构让查找与修改主题的变动变得很简单。图 1 显示了主题文件夹的结构。

图 1. 主题文件夹的结构

图像显示了主题文件夹的结构

图 1 中并未列出 [theme-name] 文件夹中的所有文件，但列出了所有最重要的文件。jquery.ui.all.css 文件导入 jquery.ui.base.css 和 jquery.ui.theme.css 文件，仅使用 jquery.ui.all.css file 文件导入文件十分容易。jquery.ui.base.css 文件导入 jquery.ui.core.css 文件以及来自相同文件夹的其他所有组件和小部件文件（没有显示在图 1 中）。jquery.ui.core.css 文件包含所有小部件文件之间共享的常用类。它为（主题中）所有 jQuery UI 小部件提供了基础的 CSS 类，并为小部件提供常用的可见性与布置。最后一个重要的文件是 jquery.ui.theme.css 文件，它提供主题中所有小部件以及主题本身所共享的常用外观与行为。

jquery.ui.theme.css 文件有三种不同的样式：

常用小部件

本节给出了使用一些常用小部件的示例代码，以构建一个样例应用程序。这个样例包含一个滑动条小部件、一个可以打开对话框的按钮，以及一个每次打开时都会显示滑动条的当前值的对话框。图 2 显示了该应用程序的一个快照。

图 2. 一个使用常用小部件的样例应用程序

图像显示了一个使用常用小部件的样例应用程序

清单 1 列出了 HTML 索引文件。

清单 1. 使用常用小部件的样例应用程序

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Slider Value Example</title> <link href="jqueryui/css/ui-lightness/jquery-ui-1.8.23.custom.css" type="text/css" /> <script type="text/javascript" src="jqueryui/js/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="jqueryui/js/jquery-ui-1.8.23.custom.min.js"> </script> <script type="text/javascript" src="index.js"></script> </head> <body> <div></div> <button>Display Value</button> <div></div> </body> </html>

清单 2 显示了相关的 JavaScript 文件 (index.js)。

清单 2. 与样例应用程序相关的 JavaScript 文件

$(document).ready(function(){ $('#sld_value').slider({ min: 1, max: 10 }); $("#dlg_value").dialog( { autoOpen: false, title: "Slider Value", open: function(){ $("#dlg_value").html("The current value is: " + $("#sld_value").slider( "option", "value" )); } } ); $("#btn_value").button().click(function(){ $("#dlg_value").dialog("open"); }); });

初始设置发生在下面的代码中：

在完成 CSS 中的链接之后，JavaScript 文件被包含进来。

此应用程序中的三个小部件主要使用 <div> 语句进行定义（按钮除外，它在 HTML 中已经有了一个标签）。这些小部件均在下面的代码中定义：

<div></div> <button>Display Value</button> <div></div>

最后，在 JavaScript 代码中，将小部件的实际构造推迟到浏览器完全加载页面的时候，如清单 3 中所示。

清单 3. 构造小部件