jQuery UI
/ 2011.11 /
jQuery UI是以jQuery 为基础的、开源的javaScript网页用户界面代码库。包含底层用互交互、动画、特效和可更换主题的可视控件。我们可以真接用它来构建具有很好交互性的web应用程序。所有插件测试能兼容IE6.0+，Firefox 3+,Safari3.1+,Opera 9.6+和Google Chrome。
jQuery UI实际上是jQuery插件，专指由jQuery官方维护的UI方向的插件
jQuery UI 与 jquery 的主要区别是：
(1) jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。
(2) jQuery UI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等。
(3) jQuery本身注重于后台，没有漂亮的界面，而jQuery UI则补充了前者的不足，他提供了华丽的展示界面，使人更容易接受。既有强大的后台，又有华丽的前台。
2. jQuery UI 的主要特点
1、开源
jQuery UI的源代码是开放的，可以到jQuery UI的官方网站http://jqueryui.com/download下载。最新的版本是jquery-ui-1.8.16.custom.zip。在下载的时候可根据需要下载需要的组件。
2、可裁剪
用户可以根据需要只引入用到的组件所依赖的文件。比如只用到日期组件的话，只要在网页的头中加入以下代码：
<script src="jquery-1.6.2.js"></script>
<script src="ui/jquery.ui.core.js"></script>
<script src="ui/jquery.ui.widget.js"></script>
<script src="ui/jquery.ui.datepicker.js"></script>
并在网页中加入一个text input元素,然后用它调用.datepicker()。
例如：
<input type=”text” name=”date” id=”date”/>
Js:
$(‘#date’).datepicker();
结果：
3、用户可自定义
I、组件属性自定义
每一个组件有一组默认配置。你可以通过”optons”重写任何配置。Options实际上是一组属性被当作参数传递给jQuery UI组件。
比如：
slider组件有一个属性orientation(方向)，你可以通过设置它为horizontal 或是 vertical来决定slider在页面中显示的效果是水平的 还是 竖直的。比如：
$(‘#mySliderDiv’).slider({
Orientation: ‘vertical’
});
你可以一次传递很多options，除了最后一个，每一个options后边要加一个逗号（,）。
$(‘#mySliderDiv’).slider({
Orientation: ‘vertical’,
Min: 0,
Max: 150,
Value: 50
});
记得要把你的options 用大括号（ { } ）括起来，这样编程是一种好习惯。你可以访问jQuery UI documentation来获取更多详细的信息。
II、视觉效果自定义
如果你想自己设计组件的样式，jQuery UI提供一个非常方便的工具ThemeRoller。它提供一个可视化的用户界面，通过它可以对jQuery UI组件的所有元素进行设置。你在左侧选项卡里所做的更改会立即反映在右侧。Gallery 选项卡提供了一些预先设计好的主题。和之前的一样，你可以更改它们或是直接下载。
在ThemeRoller选项卡一上点击“Download theme”按钮，转到下载页面，你所定义的主题会自动在主题下拉列表框中被选中，你可以继续在这里配置下载的文件包。点击按钮“Download”，你所设计的主题已经包含在文件包里了。把文件解压缩，在css目录中有一个文件jquery-ui-1.8.16.custom.css，在网页中加入
<link type="text/css" href="路径/ jquery-ui-1.8.16.custom.css" rel="stylesheet" />
即可应用你所定义的主题。
提示：
如果你想编辑你的主题，只要打开jquery-ui-1.8.16.custom.css文件，从43行开始找到：”To view and modify this theme,visit …”，打开这个URL地址即可进入ThemeRoller进行编辑。
3. jQuery UI开发包的组成
jQuery UI开发包有目录：
|------------index.html
|
|------------css ： theme文件保存目录
| |----- ui-lightness ： 主题目录（文件夹名为主题名）
| | |----- imges 该主题用到的图片目录
| | |----- jquery-ui-1.8.16.custom.css 该主题的css样式文件
|
|------------js ： 该文件夹和CSS文件夹都是为index.html
| | 服务的
| |---- jquery-1.6.2.min.js
| |---- jquery-ui-1.8.16.custom.min.js
|
|------------development-bundle ： 开发包的主体
| |----- demos ： 组件demo目录。可通过该文件夹下
| | index.html文件查看
| |----- docs ： 关于各个组件的文档目录
| |----- external ： 扩展的js组件目录
| |----- thems ： 主题文件目录
| | |----- base ： 基本的主题样式
| | |----- ui-lightness ： 和css文件夹中的内容相同
| |----- ui ： 各个组件所依赖的js，是jQuery UI的核心
| | |----- i18n
| | |----- minified
| | |----- jquery.ui.core.js
| | |----- jquery.ui.widget.js
| | |----- jquery.ui.mouse.js
| | |----- jquery.ui.button.js
| | |----- jquery.ui.datepicker.js
| | |-----… …
| |----- jquery-1.6.2.js jQuery核心库文件
| |----- GPL-LICENSE.txt
| |----- version.txt
| |----- MIT-LICENSE.txt
| |----- AUTHORS.txt
4. 如何使用jQuery UI
1、入门
第一步：加载代码
首先在网页中加载开发包中的jQuery核心库文件，再按需加载jquery.ui.core.js、jquery.events.core.js、jquery.ui.mouse.js、jquery.ui.widget.js及各组件代码文件。如设置可视组件外观需同时加载CSS主题文件。比如 ：
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8" >
<title>jQuery UI Slider - Default functionality</title>
<link rel="stylesheet" href="http://www.cnblogs.com/themes/base/jquery.ui.all.css">
<script src="http://www.cnblogs.com/jquery-1.6.2.js"></script><script src="http://www.cnblogs.com/ui/jquery.ui.core.js"></script>
<script src="http://www.cnblogs.com/ui/jquery.ui.widget.js"></script>
<script src="http://www.cnblogs.com/ui/jquery.ui.mouse.js"></script>
<script src="http://www.cnblogs.com/ui/jquery.ui.slider.js"></script>
<link rel="stylesheet" href="../demos.css">
</head>
第二步：创建组件实例
每个jQuery UI组件提供一个可串联的标准的jQuery方法，创建实例时，仅需要在jQuery对像上调用组件方法。比如：
$(‘#login-form’).dialog(); //创建对话框
组件方法可串联使用：
$(‘#id’).draggable().resizable(); //创建可拖动位置、可调整大小的对像
$(‘#news-panel’).tabs().tabs(“rotate”,5000); //创建标签页，设置5秒自动切换标签
2、属性
设置属性值
一般在创建实例时对属性值进行设置
$( ‘.class’ ).组件名({ 属性名1: 值1,属性名2: 值2});
如：
$( ‘.class’ ).draggable({ axis: ‘x’, cursor:’ crosshair’ });
获取属性值
组件实例化后，可以通过option方法获得属性值。
Var a = $( “.class” ).组件名( ‘option’, 属性名 );
如：
Var axis = $( ‘.class’ ).draggable( ‘option’, ’ axis’ );
获取属性值
组件实例化后，可以通过option方法重设属性值。
$( ‘.class’ ).组件名( ‘option’, 属性名, 属性值 );
如：
$( ‘.class’ ).draggle( ‘option’,’axis’,’y’ );
3、事件
各事件均有两个参数。第一个参数为原始浏览器事件；第二个参数为包含组件相关元素、数值的参数
设置事件
一般在创建实例时设置事件。
$( ‘.class’ ).组件名({ 事件1 : 函数1, 事件2 : 函数2 });
如：
$( ‘.class’ ).draggable({
Start : function ( event, ui ) { … } ,
Drag : function ( event, ui ) { … }
});
绑定事件
组件实例化后，通过bind方法绑定事件。
$( ‘.class’ ).bind ( ‘事件类型’, 函数 );
如：
$( ‘.class’ ).bind ( ‘dragstart’, function ( event, ui ) { … } );
事件类型通常为”组件名 + 事件” 或 “动作名 + 事件”，当”动作名”与”事件”相同时，仅使用”动作名”
4、方法
组件实例化后，可调用组件方法执行特定的功能。每个组件均有四个通用的方法：disable,enable,destroy,option，也有组件自己的特定方法。
Disable 禁止操作组件
组件依然可见，但暂停响应用户操作。
以下代码使日期选择控件暂停响应用户操作：
$(‘#id’).datepicker( ‘disable’ );
Enable 允许操作组件
重新允许操作暂停响应用户操作的组件。
以下代码使日期选择控件响应用户操作：
$( ‘#id’ ).datepicker( ‘enable’ );
Destory 销毁组件实例
销毁组件实例后，由jQuery UI添加的HTML标签、DOM事件均被删除，恢复原始HTML代码。
Option 修改或获取属性值
详见上方”属性”说明。
5、样式
jQuery UI 各组件生成固定格式的 HTML 代码和 CSS 类名，可通过修改 CSS 的方式改变样式。各组件文档页将提供所生成的标准代码，可参考该代码配置 CSS。
通过 ThemeRoller，可为 jQuery UI 制定各种主题，可配置字体、字号、文字颜色、底纹样式、底纹颜色、圆角大小等。