通过代码示例学习jQueryUI库AutoComplete应用技术(基础篇)——第2部分

jQuery UI目前的版本已经更新到了1.8.7。

个人感觉和easyui相比起来，jQuery UI在界面的美观程度和可定制型更强一些。

所以再次将一些jQuery UI组件的用法说明一下，方便日后查阅。

也方面没接触jQuery UI的人能早日使用jQuery UI套件(一)首先来说jQuery UI使用频率较高dialog组件：dialog就是我们常说的弹出层，应用还是比较广泛的，比如：可以使用弹出层做登录、注册和消息提示等功能下面来详细说说dialog的使用方法在官方提供的官方文档和示例中有六种形式的dialog,但是前五种都是大同小异，包括在编写代码方面也仅仅是多设置两个属性而已，没什么太大的不同，先来看看使用jQuery UI组件的时候需要那些前期贮备工作。

首先将需要依赖的js文件导入到你的页面中。

需要依赖的文件如下：jquery-ui-1.8.7.custom.css这个是jQuery UI套件的CSS样式表，demos.css这个是jQuery UIdemo中用到的CSS样式，因为我用到了这些样式所以将它导入进来，如果大家不需要可以不导这个文件，jquery-1.4.4.min.js这个不用说了吧，jQuery的核心文件，没有它一切工作都无法开展。

切记一点：一定要在引入其他的js文件之前引入jquery-1.4.4.min.js文件，别问为什么，懂点jQuery的人都能想的到。

jquery-ui-1.8.7.custom.min.js这个是jQueryUI的核心js文件，也是必须的。

有了上述的引用后就可以在你的页面中使用jQuery UI了。

先看一个超级简单的DEMO：<div id="dialog" title="basic dialog"><p>这是一个采用默认样式的对话框</p></div>在页面中加入上边的一行代码，然后加入一个script标签对，在脚本写如下代码：$(function(){$("#dialog").dialog();});打开你的页面看一下吧，如果没什么意外你会看到一个类似这样的对话框简单吧，这就是一个弹出层，其中div的title被当作了dialog的title,右上角有关闭的xx，右下角则可以拖拽改变大小这就是一个默认的dialog，虽然我们没有为它指定高度和宽度，但是它有默认的值，在我们没有设定情况下dialog默认会弹出在屏幕的中央，大小也是有默认值的，可以改变大小，显示关闭按钮，这都是默认的样式，那么如果我们想自己定制一下dialog，不想让他这样显示该如何做？下面介绍一些属性和方法来改变一下这个dialog，用到的属性如下：autoOpen,modal,buttons，根据这些属性我们来定制一个不会自动打开(当点击按钮或者通过其他的事件来触发弹出dialog的事件)，并且带有遮罩(模式窗体)和按钮的dialogbuttons属性是一个复合属性，使用形式如下：buttons{ok:function(){点击按钮执行的事件},cancel:function(){点击按钮执行的事件}}其中ok是按钮显示的文本，而function是点击按钮后执行的事件。

关于jQuery UI 使用心得及技巧最近项目中使用了一些插件来做页面，这里把jQuery UI的使用分享出来，希望对新手有帮助。

文章结尾附源码下载。

1 jQuery UI2 为我所用2.1 Tabs2.2 Accordion2.2.1 使用基本的Accordion2.2.2 实现打开多个标签2.2.3 Accordion的嵌套3 给插件应用主题——Theme Roller3.1 更改配色3.2 更改图标4 相关连接1 jQuery UI有时你仅仅是为了实现一个渐变的动画效果而不得不把javascrip 重新学习一遍然后书写大量代码。

直到jQuery的出现，让开发人员从一大堆繁琐的js代码中解脱，取而代之几行jQuery代码。

现今，jQuery无疑已成为最为流行没有之一的JavaScript类库。

而jQuery UI 则是在jQuery 基础上开发的一套界面工具，几乎包括了网页上你所能想到和用到的插件以及动画特效，让一个毫无艺术感只知道码字的码农不费吹灰之力就可以做出令人炫目的界面。

让你在做界面的时候随便…拿来‟就用，还有一点就是，它是免费开源的，用户可根据需要自定义甚至重新设计。

2 为我所用下面以Tabs和Accordion插件来看看如何在项目中使用jQuery UI。

其他插件的详尽使用文档及演示在这里可以学习到，只不过是英文的。

2.1TabsTabs 形式的插件在网页及桌面应用程序中都使用得相当广泛，可以用作菜单，也可做为一小部分内容的选项卡图0首先在VS2010新建一个MVC项目，要使用jQuery UI,首先要把jQuery及jQuery UI 脚本文件包含在项目当中，并且相关页面要用<script>标签进行引用。

当我们创建好一个MVC项目后，在Scripts文件夹里，系统已经自动把jQuery及jQuery UI 脚本文件包含在项目当中了（如图1）。

图 1注释：图中jquery-1.5.1-vsdoc.js为包含完整提示注释的版本，在VS里编写代码时会有智能地显示提示信息及注释；jquery-1.5.1.js为标准版本；带min的为压缩精简后的版本，为的是在客户端减少下载时间。

基于jquery的自动完成插件jquery.autocomplete项目需要一个自动完成功能的text，要求实时从服务端获取符合条件的数据。

想到jquery貌似有类似功能的插件：1.需要下面几个文件：jquery-1.3.2.js，jquery.autocomplete.js，jquery.autocomplete.css。

2.功能要求：随着输入的内容不同不断匹配符合条件的数据项，这就要求动态获取参数。

而jquery传递参数可以用：extraParams: {area:function(){return $('#id').val();}}不过经过使用发现，这样不能动态获取参数，所以修改了一下jquery.autocomplete.js的源码为其添加了一个onBegin属性：(1) 为$.Autocompleter.defaults添加一个属性：onBegin: null,大约在400行；(2)调用方法:$("#id").autocomplete(url,{mustMatch :false,//是否完全匹配width :220,//宽度max :10,//最大显示行数onBegin :function(options){var va = $("#id").val();if(va && va !="")options.extraParams.va = va;return options;},parse :function(data){var par = eval(data);var re = [];if(par !=null&& par !='undfined'){for(var i =0; i < par.length; i++){re[i] ={data : par[i],value : par[i],result : par[i]};//data是数据项，value是值，result是显示项，例如如果数据项为A，那value可以是A.id,result是A.text。

AutoComplete⽰例概述：AutoComplete 是⼀个可以附属到任何⼀个 TextBox 控件上的 AJAX 扩展控件，它可以帮助页⾯⽤户的⽂本框输⼊，显⽰提⽰信息，该信息可以根据⽤户的输⼊进⾏设置。

提⽰输⼊信息将根据与 AutoComplete 配合的 Web Service 来提供，并显⽰于 TextBox 的左下⽅。

在上⾯的例⼦中，和 AutoComplete 所配合的 TextBox 将提⽰以 TextBox 中的内容为开头的输⼊，有点类似模拟数据库中的 Like 检索结果。

当你在 TextBox 的输⼊超过指定的最⼩长度时，提⽰框将显⽰以其输⼊为开头的词组和短语。

在这个例⼦我们还采⽤了缓存机制，即同⼀个前缀被输⼊多次的时候，Web Service只会被调⽤⼀次。

属性;AutoComplete 控件属性将被初始化如下⾯的⽰例代码所⽰，斜体属性为可选属性<ajaxToolkit:AutoCompleteExtenderrunat="server"ID="autoComplete1"TargetControlID="myTextBox"ServiceMethod="GetCompletionList"ServicePath="AutoComplete.asmx"MinimumPrefixLength="2"CompletionInterval="1000"EnableCaching="true"CompletionSetCount="20"CompletionListCssClass="autocomplete_completionListElement"CompletionListItemCssClass="autocomplete_listItem"CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"DelimiterCharacters=";, :"><Animations><OnShow> ... </OnShow><OnHide> ... </OnHide></Animations></ajaxToolkit:AutoCompleteExtender>TargetControlID - 需要增加⾃动提⽰的TextBox 控件 IDServiceMethod - 提供提⽰信息的 Web Service ⽅法名，请注意，该⽅法的签名需要满⾜如下⽅法签名：[System.Web.Services.WebMethod][System.Web.Script.Services.ScriptMethod]public string[] GetCompletionList(string prefixText,int count) { ... }注意：你可以根据你的需要任意替换⽅法名“GetCompletionList”，但是返回值和参数必须保持⼀致ServicePath - Web Service 的路径，如果你没有指定该路径，那么 ServiceMethod 属性必须是当前页⾯的⼀个被申明成 Web Service Method 的页⾯⽅法。

菜鸟教程jquery语法jQuery是一种高效、简洁又方便的JavaScript库，它简化了HTML文档的操作、事件处理、动画设计以及AJAX交互等操作，为前端开发者提供了非常方便的编程工具。

本篇文章将为大家简单介绍jQuery的语法和用法，包括选择器、事件、动画和AJAX交互等常用功能。

1. jQuery选择器选择器是jQuery的核心功能之一，它允许我们通过CSS样式来获取文档中的HTML元素。

以下是一些常见选择器：- 元素选择器$('p')：获取所有的p元素$('#header')：获取id为header的元素$('.nav')：获取class为nav的元素jQuery中的事件和原生JavaScript的事件类似，但是它的处理方式更为方便和高效。

以下是一些常用的事件处理方法：- click()：点击事件$('button').click(function(){//执行操作});- hover()：鼠标悬停事件jQuery提供了一些强大的动画效果，比如淡入淡出、滑动等。

以下是一些常用的动画效果：- fadeIn()：淡入效果$('div').fadeIn();- slideUp()：上滑效果4. jQuery AJAX交互jQuery AJAX可以实现页面的异步交互，比如发送请求、接收数据等。

以下是一些常用的AJAX方法：- $.ajax()：发送和接收请求的函数$.ajax({type: 'post',url: 'test.php',data: {'name': '小明','age': 18},success: function(data){console.log(data);}});总结本文对jQuery的语法和用法进行了简单介绍，包括选择器、事件、动画和AJAX交互等常用功能。

jQueryUI实例–对话框（Dialog）菜鸟教程jQuery UI 实例 - 对话框（Dialog）在一个交互覆盖层中打开内容。

如需了解更多有关dialog 部件的细节，请查看 API 文档对话框部件（Dialog Widget）。

默认功能基本的对话框窗口是一个定位于视区中的覆盖层，同时通过一个iframe 与页面内容分隔开（就像 select 元素）。

它由一个标题栏和一个内容区域组成，且可以移动，调整尺寸，默认可通过 'x' 图标关闭。

<!doctype html><html lang="en"><head><meta charset="utf-8"><title>jQuery UI 对话框（Dialog） - 默认功能</title><link rel="stylesheet" href="///ui/1.10.4/themes/smoothness/jquery-ui.css"><script src="///jquery-1.9.1.js"></script> <script src="///ui/1.10.4/jquery-ui.js"></script><link rel="stylesheet" href="/resources/demos/style.css"> <script>$(function() {$( "#dialog" ).dialog();});</script></head><body><div id="dialog" title="基本的对话框"><p>这是一个默认的对话框，用于显示信息。

本文目录1.1通过代码示例学习jQueryUI库Accordion应用技术（第2部分） (2)1.1.1Accordion组件event成员属性功能含义及应用 (2)1.1.2Accordion组件heightStyle成员属性功能含义及应用 (2)1.1.3Accordion组件icon成员属性功能含义及应用 (3)1.1.4Accordion组件的典型事件及应用示例 (6)1.1.5拖动改变最外部容器的大小和使得面板内容充满父容器的尺寸 (9)1.1.6重新排序Accordion组件的Tab页头示例 (12)1.1.7使用cookie缓存最后选中Accordion页的应用示例 (15)1.1通过代码示例学习jQueryUI库Accordion应用技术（第2部分）1.1.1Accordion组件event成员属性功能含义及应用1、event成员属性的主要功能event定义如何展开其中的面板。

因为在缺省情况下，打开Accordion组件中的某个部分内容区是通过鼠标点击该内容区所对应的Tab头标题条区域。

而如果需要实现移动鼠标或者其它的方式，该部分自动能够展开对应的内容区，可以通过设置event成员属性值。

2、event成员属性的应用示例<script type="text/javascript">$(function(){$("#accordionPanelDivTagID").accordion({header: "> div > a",active: 0,animated:500,collapsible: true,disabled: false,event: "mouseover"});});</script>上面的示例中的设置是定义为鼠标指向将触发切换面板。

3、event成员属性的默认设置值是'click'（鼠标点击）可以根据项目的应用需要，也可以设置为双击、鼠标滑过等切换方式。

jQuery Autocomplete简介jQuery UI Autocomplete是jQuery UI的自动完成组件，是我用过的最强大、最灵活的Autocomplete，它支持本地的Array/JSON数组、通过ajax请求的Array/JSON数组、JSONP、以及Function(最灵活)等方式来获取数据。

支持的数据源jQuery UI Autocomplete主要支持字符串Array、JSON两种数据格式。

普通的Array格式没有什么特殊的，如下：1 ["bjpowernode","动力节点","李四"]对于JSON格式的Array，则要求有：label、value属性，如下：1 [{label: "动力节点", value: "bjpowernode"}, {label: "李四", value: "李四"}]其中label属性用于显示在autocomplete弹出菜单，而value属性则是选中后给文本框赋的值。

如果没有指定其中一个属性则用另一个属性替代(即value和label值一样)，如下：1 2 [{label: "bjpowernode"}, {label: "李四"}] [{value: "bjpowernode"}, {value: "李四"}]如果label和value都没有指定，则无法用于autocomplete的提示。

另外需要注意，对于从服务器端输出的JSON的key必须用双引号，如下：1 [{"label": "动力节点", "value": "bjpowernode"}, {"label": "李四", "value": "李四"}]否则可能会出现parsererror错误。

JQuery插件autocomplete使⽤说明⽂档项⽬中有时会⽤到ajax⾃动补全查询，就像Google的搜索框中那样，输⼊汉字或者字母的⾸个字母，则包含这个汉字或者字母的相关条⽬会显⽰出来供⽤户选择，该插件就是实现这样的功能的。

autocomplete官⽹：（可下载jQuery autocomplete插件）。

使⽤此插件需要引⽤两个js⽂件和⼀个css⽂件，分别如下：jquery核⼼库⽂件 <script src="./jquery-1.3.2.js"type="text/javascript"></script>当jquery版本过⾼时需要使⽤jquery兼容⽂件<script src="~/Content/jquery-autocomplete/lib/jquery-migrate-1.2.1.js"></script>插件js⽂件 <script src="./jquery.autocomplete.js" type="text/javascript"></script>插件样式⽂件 <link rel="stylesheet" href="./jquery.autocomplete.css" />插件的参数说明如下：minChars(number) 该参数指定在触发autocomplete之前⽤户在查询框中输⼊的最⼩字符数，通常设置为1，即⽂本框值不为空的时候执⾏autocomplete,如果取值为0，则在⽤户双击查询⽂本框或删除⽂本框内容时查询width 该参数的⽤途是指定下拉框的宽度，通常不⽤设置，默认的值为和<input>元素相同max 查询时下拉列表框中显⽰的条⽬数，defaultValue为10delay 击键后激活autoComplete的延迟时间(单位毫秒).Default: 远程为400 本地10autoFill(boolean) 是否在⽤户选择时⾃动将⽤户⿏标所在的值填充到input元素中，default:falsemustMatch(boolean) 参数boolean类型，true时，如果输⼊的查询条件⽆法匹配到合适的结果，则<input>元素中输⼊的查询值会⾃动清空，否则会保留。

前言jQuery UI是基于jQuery基础类库API开发的开源的JavaScript 网页UI（用户界面）代码组件库，使用jQuery UI可以实现Web UI界面交互、动画、特效和可更换主题的可视控件，并且还可以定制Web UI的主题风格。

从而可以应用它轻松地构建出高度可交互的Web 应用程序的UI界面。

随着Web应用的普及及AJAX相关应用的深入，客户端和Web服务器端需要频繁地交互数据，对Web交互的界面也提出了新的要求——简洁、方便、人性化等用户体验度高；同时随着移动设备的普及，客户端的访问设备也逐渐多样化。

如何为不同的客户端设备提供统一的Web应用界面，从而提高开发效率和降低开发成本。

目前比较好的技术实现手段是应用JQuery及JQuery UI系统库相关的技术。

作者根据自身多年的软件开发实践和经验总结，结合多年的IT职业培训的教学和高校软件学院一线的教学工作体验，在本系列文档中通过具体的程序代码示例为读者介绍jQuery UI中典型的应用组件技术。

本文档为jQuery UI autoComplete自动补全组件的应用基础，主要涉及jQuery UI autoComplete自动补全组件的技术特性、主要的成员属性及应用示例、主要事件及应用示例，并给出一个体现autoComplete组件基本特性的应用示例以及如何应用AJAX技术获得远程服务器返回的匹配结果示例等方面的内容。

杨教授大学堂精心创作有系列化的优秀程序员职业提升必读技术资料，这些资料将系统地从软件设计和开发实现的“设计思想”、“管理策略”、“技术实现”和“经验方法”等方面与读者进行充分的交流，涉及作者对软件开发设计思想和原则、课程设计、项目实训、软件实现技术等方面的学习心得体会和应用技巧、经验总结。

本文目录1.1autoComplete自动补全组件 (3)1.1.1autoComplete组件的技术特性 (3)1.1.2autoComplete组件的主要成员属性source及应用示例 (5)1.1.3autoComplete组件的其它属性 (14)1.1.4autoComplete组件的主要事件及应用示例 (19)1.2Autocomplete组件的应用示例 (24)1.2.1体现autoComplete组件基本特性的应用示例 (24)1.2.2应用AJAX技术获得远程服务器返回的匹配结果示例 (26)1.1autoComplete自动补全组件1.1.1autoComplete组件的技术特性1、Autocomplete也称为自动补全自动补全的功能是许多系统中都提供的一个提升用户输入体验的功能，当操作者在某个输入框中输入相关的数据（如查询关键字）等，系统将自动都匹配用户的输入数据，并在下拉列表中显示可能的各个匹配的完整数据项目。