依靠组件

需先加载组件

可选先加载组件

本文档基于 jQuery UI 1.7 中文文档而写,适用于 1.8.16 版本。

使用 jQuery UI 前，需了解 jQuery 核心库使用方法和 HTML、CSS、JavaScript 基础知识。

jQuery UI 践行渐进增强原则，通过标准 HTML 代码保证禁用 JavaScript 环境或移动设备的内容可访问性。利用JavaScript 代码增强主流浏览器中交互特性，并兼容 WAI-ARIA 标准。各组件“综述”页会提供实例化各组件所需的标准 HTML结构。

本页“属性”“事件”“方法”页面将提供各组件通用方法及修改属性、绑定事件、调用方法的语法规则。各组件页对应页面将提供各组件各自的 API 文档。

加载代码

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

注意：各组件之间有互相依赖的关系，需先把被依赖的组件加上，次序不能混乱，否则无法生效。

建议的做法是一次性加载完整的 ui 组件文件：jquery-ui-1.8.16.custom.js 。

创建组件实例方法

每个 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。

通过 ThemeRoller，可为 jQuery UI 制定各种主题，可配置字体、字号、文字颜色、底纹样式、底纹颜色、圆角大小等。