jQuery ui 是基於 jquery 基礎類庫開發的開源的 javascript 網頁UI代碼組件庫，包含底層用戶交互、動畫、特效和可更換主題的可視控件，我們可以直接用它來構建具有很好交互性的web應用程序。所有插件測試能兼容IE 6.0+, Firefox 3+, Safari 3.1+, Opera 9.6+, 和 Google Chrome。目前最新的版本，使用 jQuery UI 前，需瞭解 jQuery 核心庫使用方法和 HTML、CSS、JavaScript 基礎知識，當然你應該有一定的 jquery 基礎了，你可以去看看本站的 jquery 教程
jQuery UI 踐行漸進增強原則，通過標準 HTML 代碼保證禁用 JavaScript 環境或移動設備的內容可訪問性。利用 JavaScript 代碼增強主流瀏覽器中交互特性，併兼容 WAI-ARIA 標準。各組件“綜述”頁會提供實例化各組件所需的標準 HTML 結構。
jquery ui主要包含三部分：
1.交互組件，主要包含Draggable,Droppable（拖拽組件）,Resizable（可調整大小組件）,Selectable（選擇組件）和Sortable（排序組件）等。這些都是要與鼠標打交道的，所以屬於交互組件。
2.微件，微件是組成頁面的一個個小組件包括Accordion,AutoComplete,ColorPicker,Dialog,Slider,Tabs,DatePicker,Magnifier,ProgressBar,Spinner等。
3.效果庫，jquery ui 的效果庫提供了更加炫酷的效果，是你的動畫效果與衆不同更加驚豔，效果庫在effect目錄
本頁面就嵌入了一個jquery ui effet效果，是不是很驚豔，下一節開始分析 jquery ui 的目錄結構，讓你想用什麼效果就可以找到什麼效果。你可以先看下這篇文章，下載了 jquery ui 如何使用，進行預熱。下載 jquery ui 點這裏 jquery ui 下載
dialog 的使用：
我們在做交互的時候經常要用到對話框，沒錯 jquery ui dialog 就是爲此而生的,jquery ui dialog 爲我們提供了一個簡單的接口來實現平常需要大量 javascript 代碼來實現的效果，我們可以使用 jquery ui dialog 實現很多的功能，例如做登錄、註冊和消息提示等功能。
在使用 dialog 組件前，先要將 dialog 所依賴的 js 文件引入到頁面中，這些文件包括 js 文件和 css 文件，所有的 dialog 樣式的實例代碼，在/development-bundle/demos/dialog/目錄下，打開源碼看到一種類型的 dialog 的使用方法，如果是不明白我在說什麼，就先去看看，下載了 jquery ui 後如何使用。如果你還沒有 jquery ui 代碼包，那你就先去下載：各版本 jquery ui 下載
我們以/development-bundle/demos/dialog/default.html 爲例看下jquery ui dialog 的頭部文件引入情況
01.
02.<</code>script type="text/javascript" src="../../jquery-1.6.2.js"></</code>script>
03.
04.<</code>script type="text/javascript" src="../../external/jquery.bgiframe-2.1.2.js"></</code>script>
05.
06.<</code>script type="text/javascript" src="../../ui/jquery.ui.core.js"></</code>script>
07.
08.<</code>script type="text/javascript" src="../../ui/jquery.ui.widget.js"></</code>script>
09.
10.<</code>script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></</code>script>
11.
12.<</code>script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></</code>script>
13.
14.<</code>script type="text/javascript" src="../../ui/jquery.ui.position.js"></</code>script>
15.
16.<</code>script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></</code>script>
17.
18.<</code>script type="text/javascript" src="../../ui/jquery.ui.dialog.js"></</code>script>
19.這些引入的文件，有些不是必要的，需要根據 dialog 的參數來定，比如你不需要調整 dialog 的大小，你就沒有必要載入jquery.ui.resizable.js 這個文件，再看看 dialog 是如何被彈出的，
1.<</code>script type="text/javascript">//
2.$(function()
{
$( "#dialog"
).dialog();
});
3.//
</</code>script>沒錯，dialog 的使用就是這麼簡單，當然 dialog 還有很多的參數來幫助你實現很多複雜的功能，我們在後面還會給大家講解，這些參數的使用基本都很簡單。
jquery ui很強大，其中的日期選擇插件Datepicker是一個配置靈活的插件，我們可以自定義其展示方式，包括日期格式、語言、限制選擇日期範圍、添加相關按鈕以及其它導航等。
這篇文章我們就來說說 jquery ui datepicker 的使用。
DatePicker基本使用方法：
文件引入
jqueryui/1.8.18/themes/base/jquery-ui.css"?rel="stylesheet"?type="text/css"/>?
html代碼：
js代碼：
?
$(document).ready(function()?{??
?$("#datepicker").datepicker();
?});
就這麼簡單，你只需要引入一個3個外部文件，即一個jquery庫文件，一個jquery ui 核心文件，還有一個jquery ui
樣式文件，然後用 datepicker() 方法就可以了。
請看示例代碼 jquery ui datepicker 示例
jquery ui datepicker 公開的方法：
$.datepicker.setDefaults(?settings?)?-?全局設置日期選擇插件的參數.
$.datepicker.formatDate(?format,?date,?settings?)?-?格式化顯示的日期字符串
$.datepicker.iso8601Week(?date?)?-?給出一個日期，確實他是一年中的第幾周
$.datepicker.parseDate(?format,?value,?settings?)?-?按照指定格式獲取日期字符串
