利用 jQuery UI 和 Ajax 创建可定制的 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 库和其他必备文件。

清单 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 中三个彼此相邻的

元素表示。为使 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 文件,并创建一个作为容器的

,即可轻松定位该

,并为其应用 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> 

选项卡式界面包含一个作为容器的

元素,该元素具有选项卡的 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  这样的库出现之前,构建高度交互式的界面极为困难,因为必须从零开始编写代码,而且需要执行大量测试来保证代码能在所有主流浏览器中正常工作。如今,您只要包含一个文件并执行一次函数调用即可创造效果和可排序的元素,或者更改主题。

时间: 06-30

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

jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)

使用jQuery ui首先需要引入jQuery类库,jQuery ui js脚本和jQuery ui css样式表.代码示例如下: <script src="js/jquery-1.7.1.js"></script> <script src="js/jquery-ui-1.8.18.custom.min.js"></script> <link rel="stylesheet" type=&qu

利用jQuery Ajax技术实现每隔5秒向某页面传值

有时候我们需要每隔一段时间向某页面传值,比如说聊天室,每隔几秒就像数据库处理页面传值并取回,然后显示在聊天窗口.又或者是每隔一段时间就查询用户最后发言时间到现在是否间隔2分钟,如果是则将用户退出.这个时候我们就要用到HTML DOM setInterval() 方法. setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭.由 setInterval() 返回

jQuery基础(常用插件 表单验证,图片放大镜,自定义对象级,jQuery UI,面板折叠)

1.表单验证插件--validate   该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下: $(form).validate({options}) 其中form参数表示表单元素名称,options参数表示调用方法时的配置对象,所有的验证规则和异常信息显示的位置都在该对象中进行设置.     2.表单插件--form 通过表单form插件,调用ajaxForm()方法,实现ajax方式向服务器提交表单数据,并通过方法中的option

基于MVC+EasyUI的Web开发框架经验总结(1)-利用jQuery Tags Input 插件显示选择记录

最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重构完善过程中,很多细节花费不少时间进行研究和提炼,一步步走过来,也积累了不少经验,本系列将主要介绍我在进一步完善我的Web框架基础上积累的经验进行分享,本随笔主要介绍利用jQuery Tags Input 插件显示选择记录. 我在利用jQuery Tags Input 插件之前,一直想找一个合适的J

jQuery UI部件

(一)按钮 button()方法回修改单个按钮来增强外观,而buttonset()方法对一组按钮起作用. button(options)   button('enable')   button('disable')   button('destroy')   button('option', optionName, value) buttonset同上 $('').button({}); icons 指定一个或来那个在按钮显示的图标,主要图标由对象的primary属性标识,次要图标由second

JQuery.UI类库AutoComplete 调用WebService进行模糊查询

1.介绍jQuery.UI中autocomplete参数介绍. 此语法引用于: http://www.jb51.net/article/24219.htm 语法: autocomplete(urlor data, [options] ) 参数: url or data:数组或者url [options]:可选项,选项解释如下: 1) minChars (Number) 在触发autoComplete前用户至少需要输入的字符数,Default:1,如果设为0,在输入框内双击或者删除输入框内内容时显

基于MVC4+EasyUI的Web开发框架经验总结(1)-利用jQuery Tags Input 插件显示选择记录

最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重构完善过程中,很多细节花费不少时间进行研究和提炼,一步步走过来,也积累了不少经验,本系列将主要介绍我在进一步完善我的Web框架基础上积累的经验进行分享,本随笔主要介绍利用jQuery Tags Input 插件显示选择记录. 我在利用jQuery Tags Input 插件之前,一直想找一个合适的J

jquery ui 笔记

准备: 1.下载jquery ui库:http://jqueryui.com/download/ 2.选择theme 3.建立一个良好的发展环境(mysql.netbeans) 4.创建数据库:jqueryui_db 一.jquery ui 1.autocomplete 1.1.描写叙述:是jQuery UI的自己主动完毕组件. 1.2.支持的数据源:主要支持字符串Array.JSON两种数据格式. 1.2.1.对于JSON格式的Array,则要求有:label.value属性. 1.2.2.当

jQuery Tools:Web开发必备的 jQuery UI 库

基本介绍 jQuery Tools 是基于 jQuery 开发的网站界面库,包含网站最常用的Tabs(选项卡).Tooltip(信息提示).Overlay(遮罩.弹窗).Scrollable(滚动控制).Form Validator(表单验证).Rangeinput(范围选择).Dateinput(日期选择)等众多功能.jQuery Tools 提供了高自定义的API接口,能够帮助开发者非常容易的实现所需要的功能,带给用户更佳的使用体验. 相比 jQuery UI,jQuery Tools 提供