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?)?-?按照指定格式获取日期字符串
