小部件事件从根本上讲，小部件就是 JavaScript 对象，所以可以为它们设置在网站应用程序的生命周期内触发的事件。在触发这些事件时，网站提供的 JavaScript 代码捕捉到它们，也可以在小部件中处理它们（这是默认值）。
每个常用小部件的 jQuery UI 团队详细描述了所有小部件的默认实现。下面这段代码说明了如何设置事件的接收：
1
2
3
| $( "#dlg_popup" ).dialog({
drag: function(event, ui) { ... }
});
|
这个特定的例子连接到 drag 事件中，在拖动对话框时，就会触发这个事件。此例子中显示的省略号 (…) 是放置用于处理和实现事件代码的个人代码的地方。
小部件方法方法（与您熟悉的任意语言中的方法相同）与小部件有关联，允许在特定小部件上执行预先编写的功能，让它执行特定操作。下面的示例调用了一个小部件的方法：
1
| $(“#dlg_popup”).dialog("moveToTop”);
|
从概念上讲，选项与方法是有区别的。但要注意的是，可以使用类似方法的实现修改或获取某个选项的值，如下面的示例所示：
1
| $(“#dlg_popup”).dialog("option", "autoOpen", false);
|
切换主题可以在 HTML 与 JavaScript 文件中编写代码，来实现通过下拉菜单动态切换主题的功能。清单 4 显示了为了实现这种功能而对 HTML 源代码所做的修改。
清单 4. 动态改变主题1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <html xmlns="http://www.w3.org/1999/xhtml">
<head>
.
.
.
<script type="text/javascript"
src="//jqueryui.com/themeroller/themeswitchertool/">
</script>
.
.
.
</head>
<body style="font-size: 12px;">
<div id="switcher" style="padding-bottom:15px;"></div>
.
.
.
</body>
</html>
|
清单 5 显示了 JavaScript 源代码。
清单 5. 用于动态改变主题的 JavaScript 源代码1
2
3
4
5
6
| $(document).ready(function(){
$('#switcher').themeswitcher();
.
.
.
});
|
图 3 显示了完成这些修改之后的样例应用程序。
图 3. 修改代码之后的样例应用程序  再次在您的浏览器中运行 HTML 页面，并查看结果。现在您可以单击下拉列表来更改主题。所选主题会根据需要在后台下载。
使用主题切换器对于非生产性网站（用于测试与查看结果）没有什么影响，但对于生产性网站而言，这样做可能并非明智之举。该工具依靠第三方服务器提供主题，您无法保证用户看到什么样的结果。
而测试 jQuery UI 主题的另一种方法是使用 ThemeRoller 工具，它只能用于 Mozilla Firefox（在 中可以找到相关链接）。安装该工具（在 Firefox 中以书签形式存在）后，打开环境，选择主题以查看它们。选择一个主题，然后单击下载链接。下载完毕后，解压缩主题文件夹，将它放在您的 jQuery UI 文件夹中，然后将您的 HTML 文件指向它。
但此工具比简单地切换主题要有用得多。它还支持您构造自定义的主题，这比手动构造它们要轻松许多。 |
