<script type="text/javascript"> $(function(){ $('#switcher').themeswitcher(); $( ".column" ).sortable({ connectWith:".column" }); $( "#sortable" ).sortable(); }); </script> <div> <script type="text/javascript" src="https://jqueryui.com/themeroller/themeswitchertool/"></script> <div></div> </div> </div>
清单 5 中的示例展示了您能多么轻松地为现有示例 Web 页面中的 portlet 添加主题切换器工具。通过为小部件包含相关 JavaScript 文件，并创建一个作为容器的 <div> ，即可轻松定位该 <div> ，并为其应用 themeswitcher 。这种做法会得到一个包含 jQuery UI 提供的可用主题的下拉菜单。选中一个主题时，整个页面将立即更新来匹配该主题。在允许用户定制其页面时，此类小部件非常有用，其选项甚至可以保存到前面叙述的数据库中，以保存元素位置（但这种工具本身已经拥有基于 cookie 的存储，在用户刷新页面时，此前用户选中的主题将仍然保持可用）。
该库还包含有用的预构建小部件，您可轻松地将其添加到自己的页面中。每个小部件均已结构化为您的自定义主题或者您选定的主题呈现。清单 6 中的示例展示了如何在页面中利用 Tab 小部件来为用户组织某些内容，并使用现有主题加以呈现。
清单 6. 在现有主题内添加 jQuery UI 小部件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Creating Customizable Web Interfaces with the jQuery UI and Ajax </title> <link type="text/css" href="https://www.jb51.net/css/ui-lightness/jquery-ui-1.8.6.custom.css" /> <link type="text/css" href="https://www.jb51.net/css/custom.css" /> <script type="text/javascript" src="https://www.jb51.net/js/jquery-1.4.2.min.js"> </script> <script type="text/javascript" src="https://www.jb51.net/js/jquery-ui-1.8.6.custom.min.js"> </script> <script type="text/javascript"> $(function(){ $( "#tabs" ).tabs(); $('#switcher').themeswitcher(); $( ".column" ).sortable({ connectWith:".column" }); $( "#sortable" ).sortable(); }); </script> </head> <body> <h1> Creating Customizable Web Interfaces with the jQuery UI and Ajax </h1> <div> <ul> <li> <a href="#tabs-1">Portlets</a> </li> <li> <a href="#tabs-2">Profile information</a> </li> </ul> <div> <ul> <li> <div> <div> ToDo List </div> <div> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> <li>Item 7</li> </ul> </div> </div> <div> <div> Header </div> <div>content</div> </div> </li> <li> <div> <div> Header </div> <div>content</div> </div> </li> <li> <div> <div> Theme </div> <div> <script type="text/javascript" src="https://jqueryui.com/themeroller/themeswitchertool/"> </script> <div></div> </div> </div> <div> <div> Header </div> <div>content</div> </div> </li> </ul> <br /> </div> <div> <p>Show profile information here</p> </div> </div> </body> </html>
选项卡式界面包含一个作为容器的 <div> 元素，该元素具有选项卡的 ID，还有两个用作实际选项卡的列表项，包含选项卡名称，两个带有 ID 的选项卡与选项卡列表项中的锚定标记匹配。如您所见，可以轻而易举地添加恰当的 HTML，以显示选项卡和选项卡内容，随后还能轻松地将 Tab 小部件应用于选项卡容器。这将自动显示一个选项卡式界面，并根据您选择的类，应用已选主题。
使用效果增强 UI
通过 jQuery UI 库可以利用许多类别的效果，其中许多过渡都是对现有 jQuery 方法的简单扩展。每个类别都包含带有自定参数的方法，例如：
Color transitions:
------Animate.用于为一个 Web 页面实现动画和彩色效果
Visibility transitions:
------Toggle.开关一个元素的可视与否，隐藏或显示此元素
------Show.显示一个元素，可以使用下列任何动画类型实现动画效果
------Hide.隐藏一个元素，可以使用下列任何动画类型实现动画效果
Class transitions:
------addClass .可用于为一个元素添加类，可以包含类呈现的两种不同显示状态之间的动画效果
------removeClass .可用于为一个元素删除类，可以包含类呈现的两种不同显示状态之间的动画效果
------switchClass .可用于在两个类之间切换，可以包含类呈现的两种不同显示状态之间的动画效果
------toggleClass .可根据元素中是否已经包含类来为一个元素添加或删除类，可以包含类呈现的两种不同显示状态之间的动画效果
如部分方法说明所示，还有一些可与其他效果方法联合使用的动画效果。这些效果包括 Blind、Bounce、Clip、Drop、Explode、Fade、Fold、Highlight、Puff、Pulsate、Scale、Shake、Size、Slide 和 Transfer。另外利用 jQuery 插件，您还可以轻松应用其他一些高级技术。
与 jQuery UI 库中的其他内容相同，效果的应用非常容易，只需在 Web 页面中定位一个 HTML 元素或元素组，然后应用恰当的方法即可。清单 7 展示了如何对示例 Web 页面中各 portlet 内容应用的方法，以使用 Toggle 效果。在这个例子中，Toggle 效果是通过双击一个 Portlet 的标题触发的，这会导致内容在隐藏和显示之间切换。
清单 7. 应用 Toggle 效果隐藏和显示 portlet 内容