我們先進入一下問答時間，你都知道多少呢？
（1）什么是jQuery UI 呢？
解答：jQuery UI 是以 jQuery 為基礎的開源 JavaScript 網頁用戶界面代碼庫。包含底層用戶交互、動畫、特效和可更換主題的可視控件。我們可以直接用它來構建具有很好交互性的web應用程序。所有插件測試能兼容IE 6.0+, Firefox 3+, Safari 3.1+, Opera 9.6+, 和GoogleChrome。
（2）jQuery UI 的組件組成：
解答：Query UI 主要分為3個部分：交互、微件和效果庫。
（3）jQuery UI和jQuery的主要區別?
解答：(1) jQuery是一個js庫，主要提供的功能是選擇器，屬性修改和事件綁定等等。
(2) jQuery UI則是在jQuery的基礎上，利用jQuery的擴展性，設計的插件。提供了一些常用的界面元素，諸如對話框、拖動行
為、改變大小行為等等。
簡單的問答就先到這里吧，讓我們切入代碼的世界吧！
第一個小示例：利用dialog實現form表單提交
第一步先准備項目所需的jQuery UI所需要的支持文件
<!-- 樣式引用--> <link rel="stylesheet" href="themes/base/jquery.ui.all.css"> <!-- jQuery引用--> <script type="text/javascript" src="js/jQuery1.11.1.js"></script> <!-- jQuery UI引用 --> <script type="text/javascript" src="js/jquery-ui.js"></script>
官網下載地址：http://jqueryui.com/download/
在項目webapp下創建文件夾，名稱為js,把文件發在js文件夾下。目錄結構如下：
第二步搭建頁面:
<body> <div id="dialog"> <h2>用戶登錄</h2> <form action="ls" method="post"> 用戶名：<input type="text" name="uname" id="uname"/><br/> 密 碼：<input type="text" name="pwd" id="pwd"/><br/> </form> </div> <input id="opener" type="button" value="打開form表單"/> </body>
第三步編寫<script></script>標簽內的代碼：
<script type="text/javascript"> $(function(){ $("#dialog").dialog({
//是否自動打開 默認為true autoOpen:false, width:350, height:350,
//點擊按鈕觸發 buttons:{ "提交":function(){
//表單提交 $("form").submit(); } } });
//點擊對話窗口時打開隱藏的form表單 $("#opener").click(function(){ $("#dialog").dialog("open"); }); }); </script>
dialog插件的常用參數：
常用參數： 屬性 類型 說明 Boolean autoOpen 屬性 設置該組件被調用時的打開狀態。默認值為true，即打開對話框 Object buttons 或 Array buttons 屬性 顯示一個按鈕，可以設置該按鈕的顯示文本和點擊函數 Boolean modal 屬性 設置組件是否使用模式窗口。默認為false close() 方法 執行關閉對話框操作 open() 方法 執行打開對話框操作 beforeClose(event,ui) 事件 當dialog嘗試關閉時，此事件將被觸發 參數說明：event為事件對象，ui為當前插件對象 close(event,ui) 事件 當dialog被關閉后，此事件將被觸發 open(event,ui) 事件 當dialog被打開后，此事件將被觸發
可以根據上面的參數，編寫代碼。
用戶登錄提交到servlet進行判斷，所以我在這里創建了一個LoginServlet進行邏輯判斷
public class LoginServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String name = request.getParameter("uname"); String pwd = request.getParameter("pwd"); if("1".equals(name)&&"1".equals(pwd)){ request.getSession().setAttribute("name",name); response.sendRedirect("/09jQueryUI/success.jsp"); }else{ response.sendRedirect("/09jQueryUI/index.jsp"); } } }
成功頁面把用戶名打印出來即可。。
<body> 歡迎：<%=request.getSession().getAttribute("name") %> </body>
上述的代碼就是一個簡單的dialog插件應用的小案例，你再也不用羡慕那些網站做的花哨的頁面了，因為你也可以的。。。。。
接下來我繼續講解下一個jQuery UI常用的插件，會是什么呢？來猜一猜，它就是tabs插件
tabs插件支持多種風格的選項卡模式，普通選項卡，帶子選項的選項卡，扁平風格的選項卡，響應式選項卡和手機選項卡等。
上述的支持文件我們就不再次講解了。
頁面的創建：
<body> <div id="myTabs"> <ul> <li><a href="#firstTab">第一個</a></li> <li><a href="#secondTab">第二個</a></li> <li><a href="#thirdTab">第三個</a></li> </ul> <div id="firstTab">第一個選項卡</div> <div id="secondTab">第二個選項卡</div> <div id="thirdTab">第三個選項卡</div> </div> </body>
<script></script>標簽內的代碼：
<script type="text/javascript"> $(function(){ $("#myTabs").tabs({ //是否可以折疊 默認為false collapsible:true, //默認打開第幾個選項卡 active:1, //點擊某個選項卡時觸發的事件 activate:function(event,ui){
//改變內容 ui.newPanel.html("內容被改變了");
//輸出上一個選項卡的內容 alert(ui.oldPanel.html()); } }); }); </script>
你也可以在選項卡內在嵌套子選項卡，在這里就是做實現了，有想法的同學可以在閑余的時間試試。。。。
我們還要講點什么呢，總覺得缺少點東西是不是，對了還有menu插件呢？
menu:菜單的意思。
我們經常在上網的時候，有很多網站都有下拉列表框包含子類的效果，我們也可以做一個簡單的效果。。。。
頁面搭建：
<div > <ul id="menu"> <li><a href="#">系統管理</a></li> <li><a href="#">市場管理</a></li> <li><a href="#">財務管理</a> <ul> <li class="ui-state-disabled"><a href="#">財務部</a></li> <li><a href="#">考核部</a></li> </ul> </li> <li><a href="#">產品管理</a> <ul> <li><a href="#">產品檢測部</a> <ul> <li><a href="#">產品合格</a></li> <li><a href="#">產品報廢</a></li> </ul> </li> <li><a href="#">產品銷售部</a> </li> </ul> </li> </ul> </div>
<script></script>標簽內的代碼：
<script type="text/javascript"> $(function(){ $("#dialog").hide(); $("#mydiv").mouseover(function(){ $("#dialog").show(); }); $("#mydiv").mouseout(function(){ $("#dialog").hide(); }); $("#menu").menu({ //不可用 // disabled:true, //獲得焦點觸發的事件 focus:function(){ //當我們移動到任何選項上時，都會把整個下拉菜單變為不可用 $(this).menu("option","disabled",true); } }); }); </script> <style type="text/css"> .ui-menu{ width:120px; } li{ list-style-type: none; } #mydiv{ width:120px; } </style>
這里就可以實現下拉列表框的效果，下面的圖為常用的參數：
常用參數： 屬性 類型 說明 Object icons 屬性 設置該組件使用菜單圖標 Boolean disabled 屬性 設置菜單不可用 option(String name) 方法 獲取指定選項的值 expand([event]) 方法 打開當前菜單項的子菜單 focus(event,ui) 事件 當菜單獲取焦點或任何菜單項被打開時，觸發該事件
menu插件還能實現一種，外部引用的效果，在一個頁面通過點擊按鈕加載數據。。。。
頁面上的代碼：
<body> <div> <ul id="menu"> <li><a href="#">系統管理</a></li> </ul> </div> </body>
<script></script>標簽內的代碼：
<script type="text/javascript"> $(function(){ $("#menu").menu({ select:function(){ $.get("info.jsp",function(data){ $("#menu").append(data); $("#menu").menu("refresh"); }); } }); }); </script> <style type="text/css"> .ui-menu{ width:120px; } li{ list-style-type: none; } </style>
引用頁面的代碼：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <li><a href="#">市場管理</a></li> <li><a href="#">財務管理</a> <ul> <!-- 這里設置的屬性為不可用狀態 --> <li class="ui-state-disabled"><a href="#">財務部</a></li> <li><a href="#">考核部</a></li> </ul> </li> <li><a href="#">產品管理</a> <ul> <li><a href="#">產品檢測部</a> <ul> <li><a href="#">產品合格</a></li> <li><a href="#">產品報廢</a></li> </ul> </li> <li><a href="#">產品銷售部</a> </li> </ul> </li>
一個簡單的引用就是這樣實現了，再也不用為了那么絢麗的頁面而羡慕了。。。。。
最后講解一個我們經常碰到的情況，就是當我們在百度頁面或者必應頁面搜索資料時，往往你還沒打完，下面就會聯想出來一些相關的詞匯，是不是很智能呢？我們接下來講解的autocomplete插件就可以實現這個效果。
先來點理論的：
語法： $(selector).autocomplete([settings]); 常用屬性： 屬性 說明 String Source 或 用於指定數據來源，類型為String、Array、function Array Source 或 String：用於Ajax請求的URL地址，返回Array（JSON格式） Array：即字符串數組 或 JSON數組 function Source( function(request, response)： Object reuqest, 通過request.term獲得輸入的值（term為默認參數名）， function response( response([Array])用來呈現遠程數據 Object data )) Integer minLength 當輸入框內字符串長度達到minLength時，激活autocomplete Boolean autoFocus 當autocomplete選擇菜單彈出時，自動選中第一個 Integer delay 即延遲多少毫秒激活autocomplete 常用事件: 事件 說明 focus(event,ui) autocomplete的結果列表任意一項獲得焦點時觸發 ui.item為獲得焦點的項 select(event,ui) autocomplete的結果列表任意一項選中時觸發 ui.item為選中的項 change(event,ui) 當值改變時觸發 ui.item為選中的項
接下來一個小示例：
郵箱效果：
email 效果 //准備數組存儲域名 var hosts = ["126.com","gmail.com", "live.com", "hotmail.com", "yahoo.com", "cnblogs.com", "qq.com", "163.com"]; $("#email").autocomplete({ autoFocus: true, //定義資源函數 source: function(request, response) { var term = request.term, //request.term為輸入的字符串 ix = term.indexOf("@"), name = term, // 用戶名 host = "", // 域名 result = []; // 結果 result.push(term); if (ix > -1) { name = term.slice(0, ix); host = term.slice(ix + 1); } if (name) { var findedHosts = (host ? $.grep(hosts, function(value) { return value.indexOf(host) > -1; }) : hosts), findedResults = $.map(findedHosts, function(value) { return name + "@" + value; //返回字符串格式 }); result = result.concat($.makeArray(findedResults)); } response(result); //呈現結果 } }); <div><input type="text" id="email"/></div>
在這里解釋一下，上面用的我們陌生的方法：
解釋： grep方法 使用過濾函數過濾數組元素。 此函數至少傳遞兩個參數：待過濾數組和過濾函數。 過濾函數必須返回 true 以保留元素或 false 以刪除元素。 源碼分析： grep: function( elems, callback, inv ) { var ret = [], retVal; inv = !!inv; // Go through the array, only saving the items // that pass the validator function for ( var i = 0, length = elems.length; i < length; i++ ) { retVal = !!callback( elems[ i ], i ); if ( inv !== retVal ) { ret.push( elems[ i ] ); } } return ret; } makeArray方法 將類數組對象轉換為數組對象。 類數組對象有 length 屬性，其成員索引為 0 至 length - 1。 實際中此函數在 jQuery 中將自動使用而無需特意轉換。 源碼分析： // results is for internal usage only makeArray: function( array, results ) { var ret = results || []; if ( array != null ) { // The window, strings (and functions) also have 'length' // Tweaked logic slightly to handle Blackberry 4.7 RegExp issues #6930 var type = jQuery.type( array ); if ( array.length == null || type === "string" || type === "function" || type === "regexp" || jQuery.isWindow( array ) ) { push.call( ret, array ); } else { jQuery.merge( ret, array ); } } return ret; }, 這里接受兩個參數，其中第二個參數是內部使用的，在源碼內部經常被調用作為其他方法的支持方法。 創建一個新數組ret，如果只有一個參數則為空，如果存在第二個參數就把第二個參數賦值給ret， 在array參數存在的前提下獲取其數據類型，如果數據類型為字符串、函數或者正則時或者不存在length屬性時， 則假定array不是數組或者類數組，因為字符串、函數和正則（黑莓系統下）都是有length屬性的， 所以只判斷length不准確，如果不是數組或者類數組就直接將第一個參數放入ret的末尾。 如果通過了則認為是數組或者是類數組，此時調用merge方法將兩個數組合並，最后返回ret。
其實寫到這里，我們經常用得插件就差不多了，如果你還想繼續研究，可以搜索相關的博客。。。。。。