jqueryui结合ajax创建可定制的web界面_jquery

《jqueryui结合ajax创建可定制的web界面_jquery》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、jQueryUI结合Ajax创建可定制的Web界面如今，网站比以往更具可定制性，允许用户更改其空间，根据自己的喜好对其进彳亍个性化。个性化的主页或仪表板页而（例如iGooglc>MyYahoo!和MyAOL）Fl渐普及，大多数Web应用程序内甚至也整合了类似的功能。jQuery库简化了此类复杂JavaScript交互的编写，随着jQueryUI的引入，这项功能得到了进-步的简化，该库以易于访问的jQuery插件的形式提供了常用用户界面类型。本文介绍了如何利用Ajax和jQueryUI创建具有各种定制功能的高度可定制的U1。您将了解如何定制Web页面的各个方面，

2、以及如何使用Ajax保存首选项。此外，您还将利用拖放操作等技术來排序列表项，以及组织页面元素和UI小部件来切换主题和配色方案——切都能在单独一个Web页面中完成。创建定制UI功能jQueryUI是一个UI库，其中包含易于编写的交互、动画和效果，述包括可轻松定制主题的小部件。您可以对下载进行定制，选择您希槊包含的主题，还可以提取组件，例如UI内核（必需）、交互、小部件或效果。要使用jQueryUI,您还需耍最新版木的jQuery库。下载部分包含此库，但您也可以在稍后需耍更新此库时直接从jQuery网站下载最新版本的库。清单1展示了如何在Web页面小包含jQuer

3、yUI库和其他必备文件。清单1.创建包含jQueryUI代码的Web页面〈linktype二〃tcxt/css〃href-^css/ui-lightness/jquery-ui-l.8.6.custom.css〃rel二〃stylesheet"/>

4、el二〃stylesheet"/>〈/script>〈/body〉所包含的第一个CSS捉供了所选主题Ui-lightness的代码。这是默认主题，是在jQueryUI下载过程中选定的，但您可以将其更改为所提供的任意主题。如果您已经下载了该库，希望更新正

5、在使用的主题，只需访问ThemeRoller,从库中下载现有主题即可，也可以利用它來定制您自己的主题。代码中包含的第二个CSS提供了定制类，用于设定页面样式，或者覆盖所选主题内使用的屈性。最后，代码中包含的JavaScript文件是jQucry和jQucryUI库。利用jQueryUI创建拖放式界面拖放功能如今越来越常见，可用于排序列表和组织页面元素，许多Web应用程序的个性化主页中也使用了这种功能。jQueryUlSortable插件提供了为Web页面添加口J排序功能的快捷方法，带有许多选项和事件，支持您按照自己希頊的方式定制交互。清单2中的示例展示了如何利

6、用Sortable插件创建简单的可排序列表。您可以利用此插件让简单的HTML列表成为可排序的拖放式列表。首先要为此列表添加一个标识符一本例中指定sortable作为ID,以便使用jQuery轻松找到此列表，并为其添加可排序函数调用。还要为各项添加ui-state-default类，以便保持其样式与所选主题一致。清单2.利用jQueryUISortable插件创建一个简单的可排序列表〈linktypc二〃tcxt/css〃href-^css/ui-lightness/jquery-ui-l.8.6.custom.css〃rel二〃stylesheet"/>

8、ry-ui-1.8.6.custom,