如今，网站比以往更具可定制性，允许用户更改其空间，根据自己的喜好对其进行个性化。个性化的主页或仪表板页面（例如 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 　这样的库出现之前，构建高度交互式的界面极为困难，因为必须从零开始编写代码，而且需要执行大量测试来保证代码能在所有主流浏览器中正常工作。如今，您只要包含一个文件并执行一次函数调用即可创造效果和可排序的元素，或者更改主题。

160620、利用 jQuery UI 和 Ajax 创建可定制的 Web 界面的更多相关文章

  1. 利用jQuery实现的Ajax 验证用户名是否存在

    异步刷新实现方式有多种,也可以借助JS的多种框架,下面是使用jQuery框架实现的AJAX 验证用户名是否存在 jQuery.ajax概述 HTTP 请求加载远程数据. 通过jQuery 底层 AJA ...

  2. 【javascript】利用jquery ajaxPrefilter防止ajax重复提交

    利用jquery ajaxPrefilter中断请求 var pendingRequests = {}; $.ajaxPrefilter(function( options, originalOpti ...

  3. 利用JQuery jsonp实现Ajax跨域请求 .Net 的*.handler 和 WebService，返回json数据

    1:跨域请求handler一般处理程序 using System; using System.Collections.Generic; using System.Web; using System.W ...

  4. 使用 jQuery UI Widget Factory 编写有状态的插件（Stateful Plugins）

    使用 jQuery UI Widget Factory 编写有状态的插件(Stateful Plugins) Note 这一章节的内容是基于 Scott Gonzalez 一篇博客 Building ...

  5. jQuery 使用 jQuery UI 部件工厂编写带状态的插件（翻译）

    首先,我们要创建一个progress bar,它只允许我们简单的设置进度值.正如我们接下来将要看到的,我们需要通过调用 jQuery.widget 及其两个参数来实现这一操作,这两个参数分别是:将要创 ...

  6. jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法

    转:http://www.cnblogs.com/wiseant/p/4553837.html 最近在一个ASP.NET MVC5项目中使用Bootstrap的模态窗(弹出层)来让用户填写内容,其中的 ...

  7. 利用jquery的ajax实现跨域，内部其实是jsonp协议了，不是XHRhttp协议

    一.同源策略 要理解跨域,先要了解一下“同源策略”.所谓同源是指,域名,协议,端口相同.所谓“同源策略“,简单的说就是基于安全考虑,当前域不能访问其他域的东西. 一些常见的是否同源示例可参照下表: 在 ...

  8. 使用jQuery ui创建模态表单

    jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库,可以使用它创建高度交互的 Web 应用程序. 在web页面的开发过程中,在添加元素的时候需要用到弹出窗口添加 ...

  9. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.3.创建控件

    像jQuery提供 fn.extend() 方法从而可以简单地创建插件一样,jQuery UI也提供了机制使得创造插件变得简单,也确保了公共API功能在新的插件中被保留. 1.首先,创建一个名为  j ...

随机推荐

  1. Android中的UriMatcher、ContentUrist和ContentResolver

    因为Uri代表了要操作的数据,所以我们很经常需要解析Uri,并从Uri中获取数据.Android系统提供了两个用于操作Uri的工具类,分别为UriMatcher 和ContentUris .掌握它们的 ...

  2. atitit.http get post的原理以及框架实现java php

    atitit.http get post的原理以及框架实现java php 1. 相关的设置 1 1.1. urlencode 1 1.2. 输出流的编码 1 1.3. 图片,文件的post 1 2. ...

  3. Verilog语言：还真的是人格分裂的语言

    人气腹语术师天愿在现场披露了被人偶搭档夺取灵魂的腹语术师将妻子杀害的表演节目.天愿真的陷入了多重人格,命令自己杀害妻子和子的人偶的人格出现了.为了不(让自己)杀害和弟子登川有外遇的妻子,天愿提出委托想 ...

  4. 使用Lua的扩展库LuaSocket用例

    目录结构 LuaSocket 是 Lua 的网络模块库,它可以很方便地提供 TCP.UDP.DNS.FTP.HTTP.SMTP.MIME 等多种网络协议的访问操作. 它由两部分组成:一部分是用 C 写 ...

  5. RTFSC-afinal框架[一]

    RTFSC-afinal框架   finalActivity模块 : android中的ioc框架,完全注解方式就可以进行UI绑定和事件绑定.无需findViewById和setClickListen ...

  6. A protocol error occurred. Change of username or service not allowed: (root,ssh-connection) -> (zoujiaqing,ssh-connection)

    SecureCRT ssh 客户端连接失败: The server has disconnected with an error.  Server message reads: A protocol ...

  7. php调用C代码的实现方法

    在php程序中需要用到C代码,应该是下面两种情况: 1 已有C代码,在php程序中想直接用2 由于php的性能问题,需要用C来实现部分功能 针对第一种情况,最合适的方法是用system调用,把现有C代 ...

  8. TypeScript Visitor设计模式

    以下翻译脑袋的VBF项目,试试看TypeScript能否重写. class RegExpr {     Accept<T>(convert: Converter<T>) {   ...

  9. CSS Transform / Transition / Animation 属性的区别

    back21 Jun 2011 Category: tech Tags: css 最近想UI的动画转到css3能吃进3d加速的属性上面来以加强动画的连贯性.只是对于css几个新加的属性不太熟悉,常常容 ...

  10. Pyscripter 不能正确调用另一文件中模块的问题的解析(Internal Engine 和 Remote Engine)

    背景 Pyscripter是python下一个非常流行的开源IDE,笔者一直使用Pyscripter来来编写python脚本. 关于IDE的一些特性本文不在赘述,主要是分享一下今天遇到的一个问题. 问 ...