Jquery UI使用简介

一、加载代码

首先在网页中加载开发包中 jQuery 核心库文件，再按需加载 ui.core.js、effects.core.js 及各组件代码文件，如设置可视组件外观需同时加载 CSS 主题文件。可参考开发包中各演示文件源代码。

创建组件实例方法

每个 jQuery UI 组件提供一个可串联的标准 jQuery 方法，创建实例时，仅需在 jQuery 对象上调用组件方法。如：

$("#login-form").dialog(); // 创建对话框

组件方法可串联使用：

创建可拖动位置、可调整大小的对象

$("#id").draggable().resizable();

创建标签页，设置每5秒自动切换标签

$("#news-panel").tabs().tabs("rotate",5000);

-------------------------------------------------------------------------------------------------------------------------------------------------

二、属性

创建实例时设置属性值

创建组件实例时，以 Object 型参数设置实例的属性。

$(".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").draggable("option","axis","y");

-------------------------------------------------------------------------------------------------------------------------------------------------

三、事件

各事件均有两个参数。第一个参数为原始浏览器事件；第二个参数为包含组件相关元素、数值的 Object 型参数，其具体内容请参看各组件“综述”。

创建实例时设置事件

创建组件实例时，以 Object 型参数设置实例的事件。

$(".class").组件名({事件1:函数1,事件2:函数2});

如：

$(".class").draggable({ start:function(event,ui){...}, drag:function(event,ui){...} });

实例化后时绑定事件

组件实例化后，通过 bind 方法绑定事件。

$(".class").bind("事件类型",函数);

如：

$(".class").bind("dragstart",function(event,ui){...});

事件类型通常为“组件名+事件”或“动作名+事件”，当“动作名”与“事件”相同时，仅使用“动作名”。

---------------------------------------------------------------------------------------------------------------------------------------------------

四、方法

组件实例化后，可调用组件方法执行特定功能。每个组件均有四个通用方法：disable、enable、destroy、option，也有组件自己的特定方法。

disable禁止操作组件

组件依然可见，但暂停响应用户操作。

以下代码使日期选择控件暂停响应用户操作：

$("#id").datepicker("disable");

enable允许操作组件

重新允许操作暂停响应用户操作的组件。

以下代码使日期选择控件暂停响应用户操作：

$("#id").datepicker("enable");

destroy销毁组件实例

销毁组件实例后，由 jQuery UI 添加的 HTML 标签、DOM 事件均被删除，恢复原始 HTML 代码。

option修改或获取属性值

详见上方“属性”说明。

----------------------------------------------------------------------------------------------------------------------------------------------------

五、样式

jQuery UI 各组件生成固定格式的 HTML 代码和 CSS 类名，可通过修改 CSS 的方式改变样式。各组件文档页将提供所生成的标准代码，可参考该代码配置 CSS。