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

更新时间：2016年6月24日 10:00 点击：2648

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

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

[!--infotagslink--]

上一篇: 再次谈论Javascript中的this

下一篇: 浅析Bootstrap验证控件的使用

jquery实现加载更多"转圈圈"效果(示例代码)
这篇文章主要介绍了jquery实现加载更多"转圈圈"效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-11-10
自己动手写的jquery分页控件(非常简单实用)
最近接了一个项目，其中有需求要用到jquery分页控件，上网也找到了需要分页控件，各种写法各种用法，都是很复杂，最终决定自己动手写一个jquery分页控件，全当是练练手了。写的不好，还请见谅，本分页控件在chrome测试过，其他的兼容性...2015-10-30
jQuery+jRange实现滑动选取数值范围特效
有时我们在页面上需要选择数值范围，如购物时选取价格区间，购买主机时自主选取CPU，内存大小配置等，使用直观的滑块条直接选取想要的数值大小即可，无需手动输入数值，操作简单又方便。HTML首先载入jQuery库文件以及jRange相关...2015-03-15
jQuery实现非常实用漂亮的select下拉菜单选择效果
本文实例讲述了jQuery实现非常实用漂亮的select下拉菜单选择效果。分享给大家供大家参考，具体如下：先来看如下运行效果截图：在线演示地址如下：http://demo.jb51.net/js/2015/js-select-chose-style-menu-codes/具体代码如...2015-11-08
jquery实现的伪分页效果代码
本文实例讲述了jquery实现的伪分页效果代码。分享给大家供大家参考，具体如下：这里介绍的jquery伪分页效果，在火狐下表现完美，IE全系列下有些问题，引入了jQuery1.7.2插件，代码里有丰富的注释，相信对学习jQuery有不小的帮助，期...2015-10-30
Jquery Ajax Error 调试错误的技巧
JQuery使我们在开发Ajax应用程序的时候提高了效率，减少了许多兼容性问题，我们在Ajax项目中，遇到ajax异步获取数据出错怎么办，我们可以通过捕捉error事件来获取出错的信息。在没给大家介绍正文之前先给分享Jquery中AJAX参...2015-11-24
jQuery 2.0.3 源码分析之core（一）整体架构
拜读一个开源框架，最想学到的就是设计的思想和实现的技巧。废话不多说，jquery这么多年了分析都写烂了，老早以前就拜读过，不过这几年都是做移动端，一直御用zepto, 最近抽出点时间把jquery又给扫一遍我也不会照本宣科的翻译...2014-05-31
jQuery页面加载初始化常用的三种方法
当页面打开时我们需要执行一些操作,这个时候如果我们选择使用jquery的话,需要重写他的3中方法,自我感觉没什么区别,看个人喜好了,第二种感觉比较简单明了: 第一种: 复制代码代码如下: <script type="text/javas...2014-06-07
jquery中常用的SET和GET$(”#msg”).html循环介绍
复制代码代码如下: $(”#msg”).html(); //返回id为msg的元素节点的html内容。 $(”#msg”).html(”new content“); //将“new content” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content $(”...2013-10-13
jQuery Mobile开发中日期插件Mobiscroll使用说明
这篇文章主要介绍了jQuery Mobile开发中日期插件Mobiscroll使用说明,需要的朋友可以参考下...2016-03-03
jQuery实现切换页面过渡动画效果
直接为大家介绍制作过程，希望大家可以喜欢。HTML结构该页面切换特效的HTML结构使用一个<main>元素来作为页面的包裹元素，div.cd-cover-layer用于制作页面切换时的遮罩层，div.cd-loading-bar是进行ajax加载时的loading进...2015-10-30
jquery获取div距离窗口和父级dv的距离示例
jquery中jquery.offset().top / left用于获取div距离窗口的距离，jquery.position().top / left 用于获取距离父级div的距离（必须是绝对定位的div）。（1）先介绍jquery.offset().top / left css：复制代码代码如下: *{ mar...2013-10-13
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
本文实例讲述了jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果。分享给大家供大家参考，具体如下：这里演示jQuery实现鼠标移动到链接上，滑动展开/隐藏图片效果，鼠标放在“上一页”“下一页”上，立即浮现出所对应的图...2015-10-30
jQuery+PHP发布的内容进行无刷新分页（Fckeditor）
这篇文章将使用jQuery，并结合PHP，将Fckeditor发布的内容进行分页，并且实现无刷新切换页面。本文假设你是WEB开发人员，掌握了jQuery和PHP相关知识，并且熟知Fckeditor的配置和使用。...2015-10-23
jQuery实现带玻璃流光质感的手风琴特效
jQuery实现带玻璃流光质感的手风琴特效是一款基于jQuery+CSS3实现的带玻璃流光质感的手风琴特效，分享给大家，具体如下效果图：具体代码如下：html代码： <section class="strips"> <article class="strips__strip"> <di...2015-11-24
jQuery 1.9使用$.support替代$.browser的使用方法
jQuery 从 1.9 版开始，移除了 $.browser 和 $.browser.version ，取而代之的是 $.support 。在更新的 2.0 版本中，将不再支持 IE 6/7/8。以后，如果用户需要支持 IE 6/7/8，只能使用 jQuery 1.9。如果要全面支持 IE，并混合...2014-05-31
jQuery+slidereveal实现的面板滑动侧边展出效果
我们借助一款jQuery插件：slidereveal.js，可以使用它控制面板左右侧滑出与隐藏等效果，项目地址：https://github.com/nnattawat/slideReveal。如何使用首先在页面中加载jquery库文件和slidereveal.js插件。复制代码代码如...2015-03-15
jquery validate demo 基础
jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自...2015-10-30
jQuery 中的 DOM 操作
在DOM操作中，常常需要动态创建HTML内容，使文档在浏览器里的呈现效果发生变化，并且达到各种各样的人机交互目的....2016-04-27
jquery实现模拟百分比进度条渐变效果代码
本文实例讲述了jquery实现模拟百分比进度条渐变效果代码。分享给大家供大家参考，具体如下：这里为了便于看到加载百分比，对代码进行了处理，实际使用时并不需要这样。运行效果截图如下：在线演示地址如下：http://demo.jb51.net...2015-10-30

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

相关文章

阁下可能感兴趣的内容

推荐阅读