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

$(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"); }); });

上面提及的所有小部件均使用这段代码进行构造。对话框和按钮为特定事件指定了功能。例如，系统会告诉按钮的单击事件，它应该在被单击的时候打开对话框。而对于对话框，它被指定为在每次打开时修改文本，以指示滑动条的当前值。

修改小部件的外观有两种方法。可以将值和所有小部件所需的构造器参数传递给构造器。例如：

$("#dlg_popup").dialog( { autoOpen: false, draggable: true });

或者也可以在创建小部件后调用小部件的方法，如下所示：

$("#dlg_popup").dialog({ draggable: false });

大多数常用小部件都有很多可以进行设置的相关选项。另外，如果您选择忽略这些选项，那么小部件会将这些选项设置为默认值，您可以根据需要设置和修改它们。

小部件事件

从根本上讲，小部件就是 JavaScript 对象，所以可以为它们设置在网站应用程序的生命周期内触发的事件。在触发这些事件时，网站提供的 JavaScript 代码捕捉到它们，也可以在小部件中处理它们（这是默认值）。

每个常用小部件的 jQuery UI 团队详细描述了所有小部件的默认实现。下面这段代码说明了如何设置事件的接收：

$( "#dlg_popup" ).dialog({ drag: function(event, ui) { ... } });

这个特定的例子连接到 drag 事件中，在拖动对话框时，就会触发这个事件。此例子中显示的省略号 (…) 是放置用于处理和实现事件代码的个人代码的地方。

小部件方法

方法（与您熟悉的任意语言中的方法相同）与小部件有关联，允许在特定小部件上执行预先编写的功能，让它执行特定操作。下面的示例调用了一个小部件的方法：

$(“#dlg_popup”).dialog("moveToTop”);

从概念上讲，选项与方法是有区别的。但要注意的是，可以使用类似方法的实现修改或获取某个选项的值，如下面的示例所示：

$(“#dlg_popup”).dialog("option", "autoOpen", false);

切换主题

可以在 HTML 与 JavaScript 文件中编写代码，来实现通过下拉菜单动态切换主题的功能。清单 4 显示了为了实现这种功能而对 HTML 源代码所做的修改。

清单 4. 动态改变主题

清单 5 显示了 JavaScript 源代码。

清单 5. 用于动态改变主题的 JavaScript 源代码

$(document).ready(function(){ $('#switcher').themeswitcher(); . . . });

图 3 显示了完成这些修改之后的样例应用程序。

图 3. 修改代码之后的样例应用程序

图像显示了修改代码之后的样例应用程序

再次在您的浏览器中运行 HTML 页面，并查看结果。现在您可以单击下拉列表来更改主题。所选主题会根据需要在后台下载。

使用主题切换器对于非生产性网站（用于测试与查看结果）没有什么影响，但对于生产性网站而言，这样做可能并非明智之举。该工具依靠第三方服务器提供主题，您无法保证用户看到什么样的结果。

而测试 jQuery UI 主题的另一种方法是使用 ThemeRoller 工具，它只能用于 Mozilla Firefox（在中可以找到相关链接）。安装该工具（在 Firefox 中以书签形式存在）后，打开环境，选择主题以查看它们。选择一个主题，然后单击下载链接。下载完毕后，解压缩主题文件夹，将它放在您的 jQuery UI 文件夹中，然后将您的 HTML 文件指向它。

但此工具比简单地切换主题要有用得多。它还支持您构造自定义的主题，这比手动构造它们要轻松许多。

创建独一无二的主题

使用 ThemeRoller 网站（在大多数流行的浏览器中均可与运行；在中可以找到相关链接）可以对现有的 jQuery 主题（作为起点）进行修改，从而创建一个独一无二的主题。这样就不必从头开始创建主题。这还意味着不需要很精通 CSS，该工具允许您动态查看对现有主题和小部件所做的修改。图 4 显示了 ThemeRoller 网站（不要将它与 Firefox 中运行的 ThemeRoller 书签混淆）。

图 4. ThemeRoller 网站

图像显示了 ThemeRoller 网站

单击 Gallery 可以选择任意一个现有主题。这样做可以切换样例小部件用于反映修改的 CSS 样式和图片。单击与主题有关的 Edit 按钮，此时将会显示 "Roll Your Own" 选项卡，您可以在上面修改与主题相关的 CSS 样式。如果没有选择主题进行编辑，而且在没有选择主题的情况下开始使用 "Roll Your Own" 选项卡，那么您将从头开始构造一个主题。

最后，单击 Download theme 下载所选择的主题，自定义主题中包含所有的主题修改。请注意，jQuery UI 及其主题支持众多 CSS3 特性，这意味着支持所有主要的浏览器（Windows Internet Explorer 的早期版本除外）。

ThemeRoller 的 "Roll Your Own" 选项卡的布局很合理，因此您可以快速定位并修改要查找的内容。该选项卡包含以下重要的区域：