jQuery UI结合Ajax成立可定制的Web分界面

简介: 对于那些使用
JavaScript 和 jQuery 库从桌面应用程序转向 Web
应用程序的开发人员来说,他们还不习惯去考虑应用程序基本的外观,因为这些以前都是由操作系统来处理的。了解
jQuery UI,一个基于 jQuery 的 UI
工具箱,使创建漂亮的界面更为容易。本文同时也介绍了一些 jQuery
插件,可以加速 Web
开发并有助于创建我们所熟悉的,且流畅、直观、灵活的界面。

如今,网站比以往更具可定制性,允许用户更改其空间,根据自己的喜好对其进行个性化。个性化的主页或仪表板页面(例如
iGoogle、MyYahoo! 和 MyAOL)日渐普及,大多数 Web
应用程序内甚至也整合了类似的功能。jQuery 库简化了此类复杂 JavaScript
交互的编写,随着 jQuery UI
的引入,这项功能得到了进一步的简化,该库以易于访问的 jQuery
插件的形式提供了常用用户界面类型。
本文介绍了如何利用 Ajax 和 jQuery UI 创建具有各种定制功能的高度可定制的
UI。您将了解如何定制 Web 页面的各个方面,以及如何使用 Ajax
保存首选项。此外,您还将利用拖放操作等技术来排序列表项,以及组织页面元素和
UI 小部件来切换主题和配色方案 —一切都能在单独一个 Web 页面中完成。
创建定制 UI 功能
jQuery UI 是一个 UI
库,其中包含易于编写的交互、动画和效果,还包括可轻松定制主题的小部件。您可以对下载进行定制,选择您希望包含的主题,还可以提取组件,例如
UI 内核(必需)、交互、小部件或效果。要使用 jQuery
UI,您还需要最新版本的 jQuery
库。下载部分包含此库,但您也可以在稍后需要更新此库时直接从 jQuery
网站下载最新版本的库。清单 1 展示了如何在 Web 页面中包含 jQuery UI
库和其他必备文件。

jQuery UI结合Ajax创建可定制的Web界面,jqueryajax

如今,网站比以往更具可定制性,允许用户更改其空间,根据自己的喜好对其进行个性化。个性化的主页或仪表板页面(例如
iGoogle、MyYahoo! 和 MyAOL)日渐普及,大多数 Web
应用程序内甚至也整合了类似的功能。jQuery 库简化了此类复杂 JavaScript
交互的编写,随着 jQuery UI
的引入,这项功能得到了进一步的简化,该库以易于访问的 jQuery
插件的形式提供了常用用户界面类型。
本文介绍了如何利用 Ajax 和 jQuery UI 创建具有各种定制功能的高度可定制的
UI。您将了解如何定制 Web 页面的各个方面,以及如何使用 Ajax
保存首选项。此外,您还将利用拖放操作等技术来排序列表项,以及组织页面元素和
UI 小部件来切换主题和配色方案 —一切都能在单独一个 Web 页面中完成。
创建定制 UI 功能
jQuery UI 是一个 UI
库,其中包含易于编写的交互、动画和效果,还包括可轻松定制主题的小部件。您可以对下载进行定制,选择您希望包含的主题,还可以提取组件,例如
UI 内核(必需)、交互、小部件或效果。要使用 jQuery
UI,您还需要最新版本的 jQuery
库。下载部分包含此库,但您也可以在稍后需要更新此库时直接从 jQuery
网站下载最新版本的库。清单 1 展示了如何在 Web 页面中包含 jQuery UI
库和其他必备文件。

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

 <!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="css/ui-lightness/jquery-ui-1.8.6.custom.css" 
 rel="stylesheet" /> 
 <link type="text/css" href="css/custom.css" rel="stylesheet" /> 
 <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
 <script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"> 
 </script> 
 </head> 
 <body> 
 </body> 
 </html> 

所包含的第一个 CSS 提供了所选主题 ui-lightness 的代码。
这是默认主题,是在 jQuery UI
下载过程中选定的,但您可以将其更改为所提供的任意主题。如果您已经下载了该库,希望更新正在使用的主题,只需访问
ThemeRoller,从库中下载现有主题即可,也可以利用它来定制您自己的主题。代码中包含的第二个
CSS
提供了定制类,用于设定页面样式,或者覆盖所选主题内使用的属性。最后,代码中包含的
JavaScript 文件是 jQuery 和 jQuery UI 库。
利用 jQuery UI 创建拖放式界面
拖放功能如今越来越常见,可用于排序列表和组织页面元素,许多 Web
应用程序的个性化主页中也使用了这种功能。jQuery UISortable 插件提供了为
Web
页面添加可排序功能的快捷方法,带有许多选项和事件,支持您按照自己希望的方式定制交互。
清单 2 中的示例展示了如何利用 Sortable
插件创建简单的可排序列表。您可以利用此插件让简单的 HTML
列表成为可排序的拖放式列表。首先要为此列表添加一个标识符 —本例中指定
sortable 作为 ID,以便使用 jQuery
轻松找到此列表,并为其添加可排序函数调用。还要为各项添加
ui-state-default 类,以便保持其样式与所选主题一致。

清单 2. 利用 jQuery UI Sortable
插件创建一个简单的可排序列表 
 <!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="css/ui-lightness/jquery-ui-1.8.6.custom.css" 
 rel="stylesheet" /> 
 <link type="text/css" href="css/custom.css" rel="stylesheet" /> 
  <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
  <script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"> 
 </script> 
  <script type="text/javascript"> 
    $(function(){ 
      $( "#sortable" ).sortable(); 
    }); 
  </script> 
 </head> 
 <body> 

  <h1> 
 Creating Customizable Web Interfaces with the jQuery UI and Ajax 
 </h1> 

  <ul id="sortable"> 
    <li id="item1" class="ui-state-default">Item 1</li> 
    <li id="item2" class="ui-state-default">Item 2</li> 
    <li id="item3" class="ui-state-default">Item 3</li> 
    <li id="item4" class="ui-state-default">Item 4</li> 
    <li id="item5" class="ui-state-default">Item 5</li> 
    <li id="item6" class="ui-state-default">Item 6</li> 
    <li id="item7" class="ui-state-default">Item 7</li> 
  </ul> 

 </body> 
 </html>

如果需要保存列表项位置,可能必须将详细信息保存到 cookie
或数据库,以便正确呈现页面,从而支持后续的页面查看。如果您使用的是数据库,就可以使用
Ajax
将此数据发送到服务器端脚本,使之能够将值写入数据库,并在随后初始页面加载时返回带有恰当位置的
XML 或 JSON 响应,以将各元素放置在正确的位置。清单 3
中的示例代码展示了如何将位置值发送到服务器端 PHP 脚本。

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

 $( "#sortable" ).sortable({ 
 stop: function(event, ui) { 
  $("#sortable li").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 页面中的另一个可排序列表
—-在网格中显示和限制可排序元素
—-创建多栏界面,支持在各栏间拖动和排序元素
清单 4 中的示例展示了如何创建包含拖放式元素的三栏界面。这三个栏使用
CSS 中三个彼此相邻的 <div> 元素表示。为使
Sortable插件处理分栏结构,只需使用 connectWith
选项,并将其值设置为各分栏元素上使用的 column 类。选项 connectWith
允许使用多栏界面,在各栏间拖动和排序元素。

清单 4. 三栏拖放式界面

 <!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="css/ui-lightness/jquery-ui-1.8.6.custom.css"
 rel="stylesheet" /> 
 <link type="text/css" href="css/custom.css" rel="stylesheet" /> 
 <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
 <script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"> 
 </script> 
 <script type="text/javascript"> 
 $(function(){ 
  $( ".column" ).sortable({ 
  connectWith:".column"
  }); 

  $( "#sortable" ).sortable(); 
 }); 
 </script> 
 </head> 
 <body> 

 <h1> 
 Creating Customizable Web Interfaces with the jQuery UI and Ajax 
 </h1> 

 <ul id="page"> 
 <li class="column"> 
 <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"> 
 <div class="portlet-header ui-widget-header ui-corner-all">ToDo List</div> 
 <div class="portlet-content"> 
  <ul id="sortable"> 
  <li class="ui-state-default">Item 1</li> 
  <li class="ui-state-default">Item 2</li> 
  <li class="ui-state-default">Item 3</li> 
  <li class="ui-state-default">Item 4</li> 
  <li class="ui-state-default">Item 5</li> 
  <li class="ui-state-default">Item 6</li> 
  <li class="ui-state-default">Item 7</li> 
  </ul> 
 </div> 
 </div> 

 <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"> 
 <div class="portlet-header ui-widget-header ui-corner-all">Header</div> 
 <div class="portlet-content">content</div> 
 </div> 
 </li> 

 <li class="column"> 
 <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"> 
 <div class="portlet-header ui-widget-header ui-corner-all">Header</div> 
 <div class="portlet-content">content</div> 
 </div> 
 </li> 

 <li class="column"> 
 <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"> 
 <div class="portlet-header ui-widget-header ui-corner-all">Header</div> 
 <div class="portlet-content">content</div> 
 </div> 

 <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"> 
 <div class="portlet-header ui-widget-header ui-corner-all">Header</div> 
 <div class="portlet-content">content</div> 
 </div> 
 </li> 
 </ul> 

 </body> 
 </html> 

为保持这些元素的样式与您选择的 jQuery UI 主题一致,您要使用某些 CSS
类将各元素定义为包含标头和内容的 portlet。 这些 CSS 类构成了 jQuery UI
CSS 框架,允许您轻松设定 UI 元素的主题。
jQuery UI CSS 框架 至此为止,您已经用到了 jQuery UI CSS
框架中的一些类。在这一节中,我们将进一步探索,学习如何利用这些类让用户能动态更改其个性化仪表板页面的外观。该框架包含许多类,涵盖了常见的
UI
元素。应用这些类时,它们会根据您选择的主题自动为您的小部件设定主题。可用类的类别包括布局帮助元素、小部件容器、交互状态、交互线索、图标(包括状态、图像和图标类型)以及其他可视化元素,例如圆角帮助元素、覆盖和阴影。
使用该框架中的类时,可以轻松在可用主题间切换。清单 5 展示了利用
ThemeRoller 提供的主题切换器工具能多么轻松地完成此过程。

清单 5. 用于为示例 Web 页面上的定制
portlet 添加主题切换器的 JavaScript 和 HTML 

 <script type="text/javascript"> 
 $(function(){ 
 $('#switcher').themeswitcher(); 

 $( ".column" ).sortable({ 
  connectWith:".column"
 });    

 $( "#sortable" ).sortable(); 
 }); 
 </script> 

 <div class="portlet-content"> 
 <script type="text/javascript" 
 src="http://jqueryui.com/themeroller/themeswitchertool/"></script> 
 <div id="switcher"></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="css/ui-lightness/jquery-ui-1.8.6.custom.css" 
 rel="stylesheet" /> 
 <link type="text/css" href="css/custom.css" rel="stylesheet" /> 
  <script type="text/javascript" src="js/jquery-1.4.2.min.js"> 
  </script> 
  <script type="text/javascript" src="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 id="tabs"> 
 <ul> 
 <li> 
  <a href="#tabs-1">Portlets</a> 
 </li> 
 <li> 
  <a href="#tabs-2">Profile information</a> 
 </li> 
 </ul> 
 <div id="tabs-1"> 

 <ul id="page"> 
 <li class="column"> 
 <div class="portlet 
       ui-widget 
       ui-widget-content 
       ui-helper-clearfix 
       ui-corner-all"> 
 <div class="portlet-header ui-widget-header ui-corner-all"> 
 ToDo List 
 </div> 
 <div class="portlet-content"> 
  <ul id="sortable"> 
  <li class="ui-state-default">Item 1</li> 
  <li class="ui-state-default">Item 2</li> 
  <li class="ui-state-default">Item 3</li> 
  <li class="ui-state-default">Item 4</li> 
  <li class="ui-state-default">Item 5</li> 
  <li class="ui-state-default">Item 6</li> 
  <li class="ui-state-default">Item 7</li> 
  </ul> 
 </div> 
 </div> 

 <div class="portlet 
 ui-widget 
 ui-widget-content 
 ui-helper-clearfix 
 ui-corner-all"> 
 <div class="portlet-header ui-widget-header ui-corner-all"> 
 Header 
 </div> 
 <div class="portlet-content">content</div> 
 </div> 
 </li> 

 <li class="column"> 
 <div class="portlet 
 ui-widget 
 ui-widget-content 
 ui-helper-clearfix 
 ui-corner-all"> 
 <div class="portlet-header ui-widget-header ui-corner-all"> 
 Header 
 </div> 
 <div class="portlet-content">content</div> 
 </div> 
 </li> 

 <li class="column"> 
 <div class="portlet 
 ui-widget 
 ui-widget-content 
 ui-helper-clearfix 
 ui-corner-all"> 
 <div class="portlet-header ui-widget-header ui-corner-all"> 
 Theme 
 </div> 
 <div class="portlet-content"> 
  <script 
  type="text/javascript" 
  src="http://jqueryui.com/themeroller/themeswitchertool/"> 
  </script> 
  <div id="switcher"></div> 
 </div> 
 </div> 

 <div class="portlet 
 ui-widget 
 ui-widget-content 
 ui-helper-clearfix 
 ui-corner-all"> 
 <div class="portlet-header ui-widget-header ui-corner-all"> 
 Header 
 </div> 
 <div class="portlet-content">content</div> 
 </div> 
 </li> 
 </ul> 
 <br class="clear" /> 
 </div> 
 <div id="tabs-2"> 
 <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 内容 

 <script type="text/javascript"> 
 $(function(){ 
 $( ".portlet-header" ).dblclick(function(){ 
  $(this).parent().find(".portlet-content").toggle(); 
 }); 
 }); 
 </script> 

portlet 的内容是通过遍历标头元素实现的,随后利用 jQuery find
方法定位带有 portlet-content 类的相关元素。
结束语
利用 jQuery UI 增强 Web
页面非常简单,基本上只需要包含恰当的文件,并执行一次函数调用即可。在
jQuery 和 jQuery UI
 这样的库出现之前,构建高度交互式的界面极为困难,因为必须从零开始编写代码,而且需要执行大量测试来保证代码能在所有主流浏览器中正常工作。如今,您只要包含一个文件并执行一次函数调用即可创造效果和可排序的元素,或者更改主题。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持帮客之家。

UI结合Ajax创建可定制的Web界面,jqueryajax
如今,网站比以往更具可定制性,允许用户更改其空间,根据自己的喜好对其进行个性化。个…

简介

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

如果您是一个传统桌面应用程序开发人员,并且正在转向开发 Web
应用程序,在学习 HTML 和 CSS
方面您可能不会遇到什么困难,但为应用程序设计一个漂亮的外观可能会是一个挑战。jQuery
UI 和各种 jQuery 插件对于快速将 Web
应用程序组合在一起有极大的帮助,只需在 GUI 设计上花费少量的时间。

 <!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="css/ui-lightness/jquery-ui-1.8.6.custom.css" 
 rel="stylesheet" /> 
 <link type="text/css" href="css/custom.css" rel="stylesheet" /> 
 <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
 <script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"> 
 </script> 
 </head> 
 <body> 
 </body> 
 </html> 

JavaScript 和 jQuery

所包含的第一个 CSS 提供了所选主题 ui-lightness 的代码。
这是默认主题,是在 jQuery UI
下载过程中选定的,但您可以将其更改为所提供的任意主题。如果您已经下载了该库,希望更新正在使用的主题,只需访问
ThemeRoller,从库中下载现有主题即可,也可以利用它来定制您自己的主题。代码中包含的第二个
CSS
提供了定制类,用于设定页面样式,或者覆盖所选主题内使用的属性。最后,代码中包含的
JavaScript 文件是 jQuery 和 jQuery UI 库。
利用 jQuery UI 创建拖放式界面
拖放功能如今越来越常见,可用于排序列表和组织页面元素,许多 Web
应用程序的个性化主页中也使用了这种功能。jQuery UISortable 插件提供了为
Web
页面添加可排序功能的快捷方法,带有许多选项和事件,支持您按照自己希望的方式定制交互。
清单 2 中的示例展示了如何利用 Sortable
插件创建简单的可排序列表。您可以利用此插件让简单的 HTML
列表成为可排序的拖放式列表。首先要为此列表添加一个标识符 —本例中指定
sortable 作为 ID,以便使用 jQuery
轻松找到此列表,并为其添加可排序函数调用。还要为各项添加
ui-state-default 类,以便保持其样式与所选主题一致。

如果您希望页面有任何形式的动态内容或者交互,那么 JavaScript 一直是构建
Web 页面的一个固有部分。如果没有
JavaScript,您想要在运行时更新页面,都必须刷新页面,这会导致界面不便于操作。在最近几年中,JavaScript
日益重要,因为它使得 Web 应用程序变得更加强大。JavaScript
甚至通过像 Node.js (一个服务端 JavaScript
引擎)这样的技术,在服务端也能找到一席之地。如果您想温习 JavaScript
的基本内容以及了解关于 Node.js 的更多信息,请查看 参考资料 的链接。

清单 2. 利用 jQuery UI Sortable
插件创建一个简单的可排序列表 
 <!DOCTYPE html> 

jQuery 是一个主要使用客户端 JavaScript 代码的库。它可以大幅度提高编写 UI
代码的速度,并提供了许多常用操作的快捷方式。它还包括了一个灵活的、用于创建动态界面并且浏览器兼容的 Ajax
库。更多信息链接请查看 参考资料,包括该库开发版和产品版拷贝的下载链接。产品代码已经是
“最小化的”,这意味着所有不必要的空白和注释都被删除了。如果您想了解该库的内部实现,那么强烈建议使用开发版拷贝,因为它更容易阅读。在使用任何第三方库之前,您都需要对其进行审查,以保证您理解并喜欢它的质量和功能。

 <html> 
 <head> 
  <meta charset="utf-8"> 
  <title> 
 Creating Customizable Web Interfaces with the jQuery UI and Ajax 
 </title> 
  <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.6.custom.css" 
 rel="stylesheet" /> 
 <link type="text/css" href="css/custom.css" rel="stylesheet" /> 
  <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
  <script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"> 
 </script> 
  <script type="text/javascript"> 
    $(function(){ 
      $( "#sortable" ).sortable(); 
    }); 
  </script> 
 </head> 
 <body> 

  <h1> 
 Creating Customizable Web Interfaces with the jQuery UI and Ajax 
 </h1> 

  <ul id="sortable"> 
    <li id="item1" class="ui-state-default">Item 1</li> 
    <li id="item2" class="ui-state-default">Item 2</li> 
    <li id="item3" class="ui-state-default">Item 3</li> 
    <li id="item4" class="ui-state-default">Item 4</li> 
    <li id="item5" class="ui-state-default">Item 5</li> 
    <li id="item6" class="ui-state-default">Item 6</li> 
    <li id="item7" class="ui-state-default">Item 7</li> 
  </ul> 

 </body> 
 </html>

jQuery UI

如果需要保存列表项位置,可能必须将详细信息保存到 cookie
或数据库,以便正确呈现页面,从而支持后续的页面查看。如果您使用的是数据库,就可以使用
Ajax
将此数据发送到服务器端脚本,使之能够将值写入数据库,并在随后初始页面加载时返回带有恰当位置的
XML 或 JSON 响应,以将各元素放置在正确的位置。清单 3
中的示例代码展示了如何将位置值发送到服务器端 PHP 脚本。

jQuery UI 是一个 UI 小部件和 CSS
样式表的集合,它们被打包到一起以完成常用的任务,例如通过 JavaScript 和
CSS
来创建一个向用户提示信息的自定义窗口,而不是使用旧有的弹出窗口。当您访问
jQuery UI 网站时(链接请查看 参考资料),您会发现并没有直接下载的选项。相反,网站提供了一个构建自定义下载的链接。点击该链接,您可以组装适合您自己的个性化包,您可以去掉任何不需要使用的组件(例如 Accordion 或者 Datepicker 小部件)来缩小库的大小。

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

当您下载自己的 jQuery UI
包时,还需要注意其他一些文件。development-bundle 目录下包含了 demonstrationsdocumentation,它们虽然有用但不是产品环境下部署所必需的。但是,在
css 和 js 目录下的文件,必须部署到您的 Web 应用程序中。js 目录包含
jQuery 和 jQuery UI 库;而 css 目录包括 CSS
文件和所有生成小部件和样式表所需的图片。

 $( "#sortable" ).sortable({ 
 stop: function(event, ui) { 
  $("#sortable li").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 页面中的另一个可排序列表
—-在网格中显示和限制可排序元素
—-创建多栏界面,支持在各栏间拖动和排序元素
清单 4 中的示例展示了如何创建包含拖放式元素的三栏界面。这三个栏使用
CSS 中三个彼此相邻的 <div> 元素表示。为使
Sortable插件处理分栏结构,只需使用 connectWith
选项,并将其值设置为各分栏元素上使用的 column 类。选项 connectWith
允许使用多栏界面,在各栏间拖动和排序元素。

jQuery UI
除了提供从主页上组装下载之外,您还可以选择使用某个特定主题。为了节省时间,jQuery
UI
页面提供了一个工具,可以用来查看网站当前可用的不同主题,或者您也可以在网站上通过指定喜欢的颜色,来创建属于您自己的主题。这样做主要是为您自动组装所需的
CSS 设置,以便节省一些时间。例如,图 1 展示了 Humanity 主题(顶部)与
Start 主题(底部)的对比。每个主题都包括所有对应的图标集合。

清单 4. 三栏拖放式界面

图 1. Humanity 主题与 Start 主题的对比 

 <!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="css/ui-lightness/jquery-ui-1.8.6.custom.css"
 rel="stylesheet" /> 
 <link type="text/css" href="css/custom.css" rel="stylesheet" /> 
 <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
 <script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"> 
 </script> 
 <script type="text/javascript"> 
 $(function(){ 
  $( ".column" ).sortable({ 
  connectWith:".column"
  }); 

  $( "#sortable" ).sortable(); 
 }); 
 </script> 
 </head> 
 <body> 

 <h1> 
 Creating Customizable Web Interfaces with the jQuery UI and Ajax 
 </h1> 

 <ul id="page"> 
 <li class="column"> 
 <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"> 
 <div class="portlet-header ui-widget-header ui-corner-all">ToDo List</div> 
 <div class="portlet-content"> 
  <ul id="sortable"> 
  <li class="ui-state-default">Item 1</li> 
  <li class="ui-state-default">Item 2</li> 
  <li class="ui-state-default">Item 3</li> 
  <li class="ui-state-default">Item 4</li> 
  <li class="ui-state-default">Item 5</li> 
  <li class="ui-state-default">Item 6</li> 
  <li class="ui-state-default">Item 7</li> 
  </ul> 
 </div> 
 </div> 

 <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"> 
 <div class="portlet-header ui-widget-header ui-corner-all">Header</div> 
 <div class="portlet-content">content</div> 
 </div> 
 </li> 

 <li class="column"> 
 <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"> 
 <div class="portlet-header ui-widget-header ui-corner-all">Header</div> 
 <div class="portlet-content">content</div> 
 </div> 
 </li> 

 <li class="column"> 
 <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"> 
 <div class="portlet-header ui-widget-header ui-corner-all">Header</div> 
 <div class="portlet-content">content</div> 
 </div> 

 <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"> 
 <div class="portlet-header ui-widget-header ui-corner-all">Header</div> 
 <div class="portlet-content">content</div> 
 </div> 
 </li> 
 </ul> 

 </body> 
 </html> 

主题提供了一个简单获取所有美观的 UI 组件的方式,而无需您花费大量时间修改
CSS 值或者使用图片编辑器制作静态图片元素。本文中的示例使用了 Humanity
主题。但是,使用皮肤并不意味着您不能使用自己的 CSS 来满足或者重写 jQuery
UI CSS。清单 1 提供了一个基本的使用 jQuery 和 jQuery UI 的 HTML
模板,并且包括了一个自定义的 CSS
文件,app.css,其重写了按钮中文本周围的空间大小。它还包括了app.js,您可以在此编写特定于应用程序的
JavaScript 代码。
清单 1. 一个加载 jQuery UI 的基本 HTML 模板

为保持这些元素的样式与您选择的 jQuery UI 主题一致,您要使用某些 CSS
类将各元素定义为包含标头和内容的 portlet。 这些 CSS 类构成了 jQuery UI
CSS 框架,允许您轻松设定 UI 元素的主题。
jQuery UI CSS 框架 至此为止,您已经用到了 jQuery UI CSS
框架中的一些类。在这一节中,我们将进一步探索,学习如何利用这些类让用户能动态更改其个性化仪表板页面的外观。该框架包含许多类,涵盖了常见的
UI
元素。应用这些类时,它们会根据您选择的主题自动为您的小部件设定主题。可用类的类别包括布局帮助元素、小部件容器、交互状态、交互线索、图标(包括状态、图像和图标类型)以及其他可视化元素,例如圆角帮助元素、覆盖和阴影。
使用该框架中的类时,可以轻松在可用主题间切换。清单 5 展示了利用
ThemeRoller 提供的主题切换器工具能多么轻松地完成此过程。

01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

清单 5. 用于为示例 Web 页面上的定制
portlet 添加主题切换器的 JavaScript 和 HTML 

02   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <script type="text/javascript"> 
 $(function(){ 
 $('#switcher').themeswitcher(); 

 $( ".column" ).sortable({ 
  connectWith:".column"
 });    

 $( "#sortable" ).sortable(); 
 }); 
 </script> 

 <div class="portlet-content"> 
 <script type="text/javascript" 
 src="http://jqueryui.com/themeroller/themeswitchertool/"></script> 
 <div id="switcher"></div> 
 </div> 
 </div> 
03 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

清单 5 中的示例展示了您能多么轻松地为现有示例 Web 页面中的 portlet
添加主题切换器工具。通过为小部件包含相关 JavaScript
文件,并创建一个作为容器的 <div> ,即可轻松定位该 <div>
,并为其应用 themeswitcher 。这种做法会得到一个包含 jQuery UI
提供的可用主题的下拉菜单。选中一个主题时,整个页面将立即更新来匹配该主题。在允许用户定制其页面时,此类小部件非常有用,其选项甚至可以保存到前面叙述的数据库中,以保存元素位置(但这种工具本身已经拥有基于
cookie 的存储,在用户刷新页面时,此前用户选中的主题将仍然保持可用)。
该库还包含有用的预构建小部件,您可轻松地将其添加到自己的页面中。每个小部件均已结构化为您的自定义主题或者您选定的主题呈现。清单
6 中的示例展示了如何在页面中利用 Tab
小部件来为用户组织某些内容,并使用现有主题加以呈现。

04 <head>

清单 6. 在现有主题内添加 jQuery UI
小部件

05 <link rel="stylesheet" type="text/css" href="css/humanity/jquery-ui-1.8.10.custom.css"/>
 <!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="css/ui-lightness/jquery-ui-1.8.6.custom.css" 
 rel="stylesheet" /> 
 <link type="text/css" href="css/custom.css" rel="stylesheet" /> 
  <script type="text/javascript" src="js/jquery-1.4.2.min.js"> 
  </script> 
  <script type="text/javascript" src="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 id="tabs"> 
 <ul> 
 <li> 
  <a href="#tabs-1">Portlets</a> 
 </li> 
 <li> 
  <a href="#tabs-2">Profile information</a> 
 </li> 
 </ul> 
 <div id="tabs-1"> 

 <ul id="page"> 
 <li class="column"> 
 <div class="portlet 
       ui-widget 
       ui-widget-content 
       ui-helper-clearfix 
       ui-corner-all"> 
 <div class="portlet-header ui-widget-header ui-corner-all"> 
 ToDo List 
 </div> 
 <div class="portlet-content"> 
  <ul id="sortable"> 
  <li class="ui-state-default">Item 1</li> 
  <li class="ui-state-default">Item 2</li> 
  <li class="ui-state-default">Item 3</li> 
  <li class="ui-state-default">Item 4</li> 
  <li class="ui-state-default">Item 5</li> 
  <li class="ui-state-default">Item 6</li> 
  <li class="ui-state-default">Item 7</li> 
  </ul> 
 </div> 
 </div> 

 <div class="portlet 
 ui-widget 
 ui-widget-content 
 ui-helper-clearfix 
 ui-corner-all"> 
 <div class="portlet-header ui-widget-header ui-corner-all"> 
 Header 
 </div> 
 <div class="portlet-content">content</div> 
 </div> 
 </li> 

 <li class="column"> 
 <div class="portlet 
 ui-widget 
 ui-widget-content 
 ui-helper-clearfix 
 ui-corner-all"> 
 <div class="portlet-header ui-widget-header ui-corner-all"> 
 Header 
 </div> 
 <div class="portlet-content">content</div> 
 </div> 
 </li> 

 <li class="column"> 
 <div class="portlet 
 ui-widget 
 ui-widget-content 
 ui-helper-clearfix 
 ui-corner-all"> 
 <div class="portlet-header ui-widget-header ui-corner-all"> 
 Theme 
 </div> 
 <div class="portlet-content"> 
  <script 
  type="text/javascript" 
  src="http://jqueryui.com/themeroller/themeswitchertool/"> 
  </script> 
  <div id="switcher"></div> 
 </div> 
 </div> 

 <div class="portlet 
 ui-widget 
 ui-widget-content 
 ui-helper-clearfix 
 ui-corner-all"> 
 <div class="portlet-header ui-widget-header ui-corner-all"> 
 Header 
 </div> 
 <div class="portlet-content">content</div> 
 </div> 
 </li> 
 </ul> 
 <br class="clear" /> 
 </div> 
 <div id="tabs-2"> 
 <p>Show profile information here</p> 
 </div> 
 </div> 

 </body> 
 </html> 
06 <link rel="stylesheet" type="text/css" href="css/app.css" />

选项卡式界面包含一个作为容器的 <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
的标题触发的,这会导致内容在隐藏和显示之间切换。

07 <script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>

清单 7. 应用 Toggle 效果隐藏和显示
portlet 内容 

08 <script src="js/jquery-ui-1.8.10.custom.min.js" type="text/javascript"></script>
 <script type="text/javascript"> 
 $(function(){ 
 $( ".portlet-header" ).dblclick(function(){ 
  $(this).parent().find(".portlet-content").toggle(); 
 }); 
 }); 
 </script> 
09 <script src="js/app.js"></script>

portlet 的内容是通过遍历标头元素实现的,随后利用 jQuery find
方法定位带有 portlet-content 类的相关元素。
结束语
利用 jQuery UI 增强 Web
页面非常简单,基本上只需要包含恰当的文件,并执行一次函数调用即可。在
jQuery 和 jQuery UI
 这样的库出现之前,构建高度交互式的界面极为困难,因为必须从零开始编写代码,而且需要执行大量测试来保证代码能在所有主流浏览器中正常工作。如今,您只要包含一个文件并执行一次函数调用即可创造效果和可排序的元素,或者更改主题。

10 <body>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

11 </body>

您可能感兴趣的文章:

  • JQuery EasyUI
    对话框的使用方法
  • 基于jquery的finkyUI插件与Ajax实现页面数据加载功能
  • jquery
    EasyUI的formatter格式化函数代码
  • Jquery插件 easyUI属性汇总
  • jQuery EasyUI API 中文文档 –
    ComboBox组合框
  • jQuery EasyUI API 中文文档 –
    DataGrid数据表格
  • jQuery EasyUI API 中文文档 –
    Tree树使用介绍
  • jQuery EasyUI API 中文文档 – TreeGrid
    树表格使用介绍
  • Jquery
    EasyUI的添加,修改,删除,查询等基本操作介绍
  • jQuery UI Bootstrap是什么?
12 </html>
13  
14 app.css:
15 body {
16         font-size: smaller;
17 }
18  
19 /* Override jQuery UI theme's padding on buttons: */
20 .ui-button-text-only .ui-button-text {
21         padding: 0.2em 0.5em;
22 }

界面改进:Dialog 小部件

许多 Web 开发人员都热衷于使用 alert 或者 confirm 功能,以便为访问者提供(或者从访问者获取)消息。不过这些消息非常的不美观,尤其是它们通常包括一个诸如
“www.yoursite.com 的页面……”
的标题,实在不够醒目。另一个常见做法是打开一个弹出窗口。这个方法由于弹出窗口拦截器的问题,使用的越来越少,不过它也有些过时。

使用 jQuery UI Dialog 功能,当您需要与某个访问者交互时,您可以展示任意内容或者一个通过 display:none 隐藏了的预定义<div> 标签。图 2
显示了该功能在整个外观上的不同。
图 2. 对比一个普通的 alert 窗口和一个 jQuery UI Dialog 小部件 

在显示内容的文档中,当有一个独立的 <div> 标签时,使用 Dialog 小部件是最简单的。一般来说,只要有一个可重复用于对话框的空 <div> 标签,它就可以正常工作。首先,设置内容,然后显示对话框,如
清单 2 所示:
清单 2. 显示一个 jQuery UI Dialog 小部件

01 <div style="display: none;" id="dialogHolder"><p id="dialogContent"></p></div>
02  
03 JavaScript 代码:
04 $('#dialogContent').html('Isn\'t this <b>cooler</b>?<br /><br />By setting
05    modal to true, you can require the user to dismiss this before interacting
06   with more of the page.');
07 $('#dialogHolder').dialog({
08   autoOpen: true,
09   title: 'Hello!',
10   modal: true,
11   buttons: {
12     "Go Away": function() {
13       $(this).dialog("close");
14     }
15   }
16 })

 

界面改进:Accordions 和选项卡

jQuery UI 引入了一个名为 Accordion 的小部件,它允许您拥有多个含有内容的区域,但是一般情况下,只有一个区域是可见的(默认)。点击其他区域,会通过一个动画效果来隐藏可见区域,然后显示新的区域。Accordion
的一个优点是几乎能够拥有无限个部分,因为多余的是按照垂直排布的。这个功能提供了一个流畅并且简单的界面。

许多网站访问者对传统的选项卡式的布局更加熟悉。这里,当前选中的选项卡是可见的,而其他选项卡是隐藏的,因为受到水平宽度的限制,所以有效地限制了选项卡的个数。图
3 显示了一个 Accordion 小部件(顶部)和一个 Tab 小部件 (底部)。

图 3. jQuery Accordion 和 Tab 小部件 

Accordions 通过一个含有多个区域序列的 <div> 来创建。每个区域由一个 <h3> 以及一个 <a> 标签开始,随后是一个含有每个
accordion 区域内容的子容器 <div> 。类似的,选项卡控件也使用了一个含有其他内容的 <div>,然后使用一个 <ul> 标签来定义 选项卡。在每个 <li> 中,使用了一个锚标签
<a>)将选项卡绑定为 <div> 的内容。
接下来,是一系列定义了实际内容的 <div>元素,它们的 id
与无序列表(<ul>)相对应。查看 清单 3
更容易理解。一旦内容定义完毕,就可以在相应 <div> 元素的 jQuery
选择器上,通过调用 .accordion(); 或者 .tab(); 来初始化 accordion
或者选项卡功能。
清单 3. 创建一个 Accordion 小部件和一个 Tab 小部件

01 <div id="accordionDemo" style="width: 50%; margin-left: auto; margin-right: auto;">
02   <h3><a href=#">Top Section</a></h3>
03   <div>
04     <p>Initial content for the first "tab" of the accordion goes here.</p>
05   </div>
06   <h3><a href=#">Next Section</a></h3>
07   <div>
08     <p>More content...</p>
09   </div>
10   <h3><a href=#">Last section</a></h3>
11   <div>
12     <p>You can have as many accordion sections as needed.</p>
13   </div>
14 </div>
15  
16 <div id="tabDemo" style="width: 50%; margin-left: auto; margin-right: auto;">
17   <ul>
18     <li><a href="#t1">First Tab</a></li>
19     <li><a href="#t2">Middle Tab</a></li>
20     <li><a href="#t3">Last Tab</a></li>
21   </ul>

发表评论

电子邮件地址不会被公开。 必填项已用*标注