如何使用jQuery UI主题

如何使用jQuery UI主题2013-10-16 ibm Ken Ramirez主题并不是一个新概念。当您使用级联样式表（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 文件，它提供主题中所有小部件以及主题本身所共享的常用外观与行为。