书签分享收藏举报版权申诉 / 14

立即下载加入VIP,免费下载

当前位置：首页 > 高等教育 > 其它 > jQuery UI结合Ajax创建可定制的Web界面.docx

jQuery UI结合Ajax创建可定制的Web界面.docx

文档编号：1171170
上传时间：2022-10-18
格式：DOCX
页数：14
大小：20.86KB

《jQuery UI结合Ajax创建可定制的Web界面.docx》由会员分享，可在线阅读，更多相关《jQuery UI结合Ajax创建可定制的Web界面.docx（14页珍藏版）》请在冰豆网上搜索。

jQuery UI结合Ajax创建可定制的Web界面.docx

jQueryUI结合Ajax创建可定制的Web界面

　　这篇文章主要为大家详细介绍了jQueryUI结合Ajax创建可定制的Web界面，如何利用Ajax和jQueryUI创建具有各种定制功能的高度可定制的UI，感兴趣的小伙伴们可以参考一下

　　如今，网站比以往更具可定制性，允许用户更改其空间，根据自己的喜好对其进行个性化。

个性化的主页或仪表板页面（例如iGoogle、MyYahoo!

和MyAOL）日渐普及，大多数Web应用程序内甚至也整合了类似的功能。

jQuery库简化了此类复杂JavaScript交互的编写，随着jQueryUI的引入，这项功能得到了进一步的简化，该库以易于访问的jQuery插件的形式提供了常用用户界面类型。

　　本文介绍了如何利用Ajax和jQueryUI创建具有各种定制功能的高度可定制的UI。

您将了解如何定制Web页面的各个方面，以及如何使用Ajax保存首选项。

此外，您还将利用拖放操作等技术来排序列表项，以及组织页面元素和UI小部件来切换主题和配色方案—一切都能在单独一个Web页面中完成。

　　创建定制UI功能

　　jQueryUI是一个UI库，其中包含易于编写的交互、动画和效果，还包括可轻松定制主题的小部件。

您可以对下载进行定制，选择您希望包含的主题，还可以提取组件，例如UI内核（必需）、交互、小部件或效果。

要使用jQueryUI，您还需要最新版本的jQuery库。

下载部分包含此库，但您也可以在稍后需要更新此库时直接从jQuery网站下载最新版本的库。

清单1展示了如何在Web页面中包含jQueryUI库和其他必备文件。

　　清单1.创建包含jQueryUI代码的Web页面

　　<!

DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="utf-8">

　　<title>

　　CreatingCustomizableWebInterfaceswiththejQueryUIandAjax

　　</title>

　　<linktype="text/css"href="css/ui-lightness/jquery-ui-1.8.6.custom.css"

　　rel="stylesheet"/>

　　<linktype="text/css"href="css/custom.css"rel="stylesheet"/>

　　<scripttype="text/javascript"src="js/jquery-1.4.2.min.js"></script>

　　<scripttype="text/javascript"src="js/jquery-ui-1.8.6.custom.min.js">

　　</script>

　　</head>

　　<body>

　　</body>

　　</html>

　　所包含的第一个CSS提供了所选主题ui-lightness的代码。

这是默认主题，是在jQueryUI下载过程中选定的，但您可以将其更改为所提供的任意主题。

如果您已经下载了该库，希望更新正在使用的主题，只需访问ThemeRoller，从库中下载现有主题即可，也可以利用它来定制您自己的主题。

代码中包含的第二个CSS提供了定制类，用于设定页面样式，或者覆盖所选主题内使用的属性。

最后，代码中包含的JavaScript文件是jQuery和jQueryUI库。

　　利用jQueryUI创建拖放式界面

　　拖放功能如今越来越常见，可用于排序列表和组织页面元素，许多Web应用程序的个性化主页中也使用了这种功能。

jQueryUISortable插件提供了为Web页面添加可排序功能的快捷方法，带有许多选项和事件，支持您按照自己希望的方式定制交互。

　　清单2中的示例展示了如何利用Sortable插件创建简单的可排序列表。

您可以利用此插件让简单的HTML列表成为可排序的拖放式列表。

首先要为此列表添加一个标识符—本例中指定sortable作为ID，以便使用jQuery轻松找到此列表，并为其添加可排序函数调用。

还要为各项添加ui-state-default类，以便保持其样式与所选主题一致。

　　清单2.利用jQueryUISortable插件创建一个简单的可排序列表

　　<!

DOCTYPEhtml>

　　<html>

　　<head>

　　 <metacharset="utf-8">

　　 <title>

　　CreatingCustomizableWebInterfaceswiththejQueryUIandAjax

　　</title>

　　 <linktype="text/css"href="css/ui-lightness/jquery-ui-1.8.6.custom.css"

　　rel="stylesheet"/>

　　<linktype="text/css"href="css/custom.css"rel="stylesheet"/>

　　 <scripttype="text/javascript"src="js/jquery-1.4.2.min.js"></script>

　　 <scripttype="text/javascript"src="js/jquery-ui-1.8.6.custom.min.js">

　　</script>

　　 <scripttype="text/javascript">

　　 $（function（）{

　　 $（"#sortable"）.sortable（）;

　　 }）;

　　 </script>

　　</head>

　　<body>

　　 <h1>

　　CreatingCustomizableWebInterfaceswiththejQueryUIandAjax

　　</h1>

　　 <ulid="sortable">

　　 <liid="item1"class="ui-state-default">Item1</li>

　　 <liid="item2"class="ui-state-default">Item2</li>

　　 <liid="item3"class="ui-state-default">Item3</li>

　　 <liid="item4"class="ui-state-default">Item4</li>

　　 <liid="item5"class="ui-state-default">Item5</li>

　　 <liid="item6"class="ui-state-default">Item6</li>

　　 <liid="item7"class="ui-state-default">Item7</li>

　　 </ul>

　　</body>

　　</html>

　　如果需要保存列表项位置，可能必须将详细信息保存到cookie或数据库，以便正确呈现页面，从而支持后续的页面查看。

如果您使用的是数据库，就可以使用Ajax将此数据发送到服务器端脚本，使之能够将值写入数据库，并在随后初始页面加载时返回带有恰当位置的XML或JSON响应，以将各元素放置在正确的位置。

清单3中的示例代码展示了如何将位置值发送到服务器端PHP脚本。

　　清单3.将位置值发送到服务器端脚本

　　$（"#sortable"）.sortable（{

　　stop:

function（event,ui）{

　　 $（"#sortableli"）.each（

　　 function（index）{

　　 $.ajax（{

　　 type:

'POST',

　　 url:

'filename.php',

　　 data:

'method=updateposition&id='+$（this）.attr（'id'））+'&positions='+index,

　　 success:

function（xml）{

　　 //Success

　　 }

　　 }）;

　　 }

　　）;

　　 }

　　}）;

　　要保存可排序列表中项的位置，需要利用一个事件来确定排序项的时间。

您可以利用多种可排序事件，但这个示例需要stop事件，因为只有该事件能够在所有可排序元素完成排序后触发。

这一点非常重要，因为您需要在尝试保存位置之前，确保所有元素都处于新位置。

触发stop事件之后，您要遍历各列表项，以获取其在列表中的索引，随后检索各项的ID，再利用Ajax将这些值发送到一个PHP文件，这会将结果保存到数据库，以便在稍后您返回该页面时排序元素。

　　所用的Sortable插件还提供了许多可实现其他定制的选项，例如：

　　----定义一个占位符类，设定拖动一项时占位符元素的样式

　　----连接列表，使元素可以拖放到相同Web页面中的另一个可排序列表

　　----

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：: 如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
特殊限制：: 部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
关键词：: jQuery UI结合Ajax创建可定制的Web界面 UI 结合 Ajax 创建定制 Web 界面

冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。

关于本文

本文标题：jQuery UI结合Ajax创建可定制的Web界面.docx
链接地址：https://www.bdocx.com/doc/1171170.html

jQuery UI结合Ajax创建可定制的Web界面.docx

热门标签