jQuery UI

界面主题库

若需要更多的主题包，可以下载主题包jquery-ui-themes-1.8.1.zip，

解压后其中的每一个文件夹代表一个主题。

Draggable拖动组件

需要导入以下ui文件：

jquery.ui.core.js

jquery.ui.widget.js

jquery.ui.mouse.js

jquery.ui.draggable.js

属性

方法

$(selector).draggable("disable");  // 禁止其拖动功能

$(selector).draggable("enable"); // 激活其拖动功能

$(selector).draggable("destory"); // 完全删除拖动功能

$(selector).draggable("option", name[, value]); // 获取/设置属性值

事件

1、 start事件：类型：dragstart，当开始拖动时触发

2、 drag事件：类型：drag，当拖动过程中移动鼠标时触发

3、 stop事件：类型：dragstop，当停止拖动时触发

事件绑定：

$(select).draggable(

eventName:function(event, ui){

1、 event：表示事件对象

2、 ui：表示拖动元素对象，具有如下属性：

a) helper：jQuery对象，表示辅助元素

b) position：包含top属性和left属性的对象，

表示辅助元素相对于起始位置点的位置

c) offset：包含top属性和left属性的对象，

表示辅助元素相对于页面的绝对位置

}

);

Droppable投放组件

jquery.ui.core.js

jquery.ui.widget.js

jquery.ui.mouse.js

jquery.ui.draggable.js

jquery.ui.droppable.js

属性

方法

$(selector).droppable("disable"); // 禁止投放功能

$(selector).droppable("enable"); // 激活投放功能

$(selector).droppable("destroy"); // 完全删除投放功能

$(selector).droppable("option", name[, value]); // 获取/设置属性值

事件

1、 activate事件：类型：dropactivate，当可接受对象开始拖动时触发

2、 deactivate事件：类型：dropdeactivate，当可接受对象停止拖动时触发

3、 over事件：类型：dropover，当可接受对象位于目标对象上方时触发

4、 out事件：类型：dropout，当可接受对象移出目标对象时触发

5、 drop事件：类型：drop，当可接受对象投放到目标对象时触发

事件绑定：

$(selector).droppable(

eventName:function(event, ui){

1、 event：事件对象

2、 ui：包含附加信息的ui对象，具有以下属性：

a) draggable：表示当前可拖动元素

b) helper：表示当前可拖动元素的辅助元素

c) position：一个包含top属性和left属性的对象，

表示辅助元素相对于起始点的位置

d) offset：一个包含top属性和left属性的对象，

表示辅助元素相对于页面的绝对位置

}

);

Resizable缩放组件

需要添加样式表：ui.all.css

jquery.ui.core.js

jquery.ui.widget.js

jquery.ui.mouse.js

jquery.ui.resizable.js

属性

方法

$(selector).resizable("disable"); // 禁用缩放功能

$(selector).resizable("enable"); // 激活缩放功能

$(selector).resizable("destroy") // 完全删除缩放功能

$(selector).resizable("option", name[, value]); // 获取/设置属性

事件

1、 start事件：类型：resizestart，当开始缩放操作时触发

2、 resize事件：类型：resize，当通过缩放手柄操作时触发

3、 stop事件：类型：resizestop，当停止缩放操作时触发

事件绑定：

$(selector).resizable({

eventName:function(event, ui){

1、 event:事件对象

2、 ui:包含附加信息的ui对象，有以下属性：

a) helper:一个包含helper元素的对象

b) originalPosition:一个包含top属性和left属性的对象，

表示缩放前的位置

c) position:一个包含top属性和left属性的对象，

表示当前位置

d) size:一个包含width属性和height属性的对象，表示当前大小

}

});

Selectable选择组件

jquery.ui.core.js

jquery.ui.widget.js

jquery.ui.mouse.js

jquery.ui.selectable.js

然后利用$(selector).selectable([option])函数，将目标元素（如<ol>）

包装成jQuery对象。

通过按<Ctrl>可以点击选择多项

CSS样式

.ui-selecting类：选择某个项目时添加该类

.ui-selected类：选定了某个项目时添加该类

.ui-selectee类：可选择的元素添加该类

属性

方法

可选对象，也包含disable、enable、option、destroy方法。

$(selector).selectable("refresh");

// 手动刷新，重新计算每个元素的大小和位置

事件

start事件：类型：selectablestart，当开始选择操作时触发

selecting事件：类型：selectableselecting，当选定元素时触发

selected事件：类型：selectableselected，当结束选择时触发

unselecting事件：类型：selectableunselecting，从选中项中，移出元素时触发

unselected事件：类型：selectableunselected，从选中项移出元素，并结束操作

stop事件：类型：selectablestop，当结束选择操作时触发

事件绑定：

$(selector).selectable({

eventName:function(event, ui){

1、 event:事件对象

2、 ui:包含附加信息的ui对象

}

});

Button按钮组件

样式表文件jquery-ui.css

jquery.ui.core.js

jquery.ui.widget.js

jquery.ui.button.js

单选框和复选框按钮：

1、 为控件添加ID

2、 为控件添加<label>标签

3、 将一组单选按钮或复选框放置到某个容器中（如<div>或<span>）

4、 将容器用$(selector).buttonset()方法转换成jQuery对象

CSS样式

.ui-button：按钮的样式

.ui-button-text：按钮上文本的样式

属性

方法

$(selector).button([options]); // 普通按钮的构造方法

$(selector).buttonset();// 单选按钮或复选按钮的构造方法

也包含disable、enable、option、destroy方法

Dialog对话框组件

CSS样式表：jquery-ui.css

jquery.bgiframe-2.1.1.js

jquery.ui.core.js

jquery.ui.widget.js

jquery.ui.mouse.js

jquery.ui.draggable.js（可选）

jquery.ui.position.js

jquery.ui.resizable.js（可选）

jquery.ui.dialog.js

CSS样式

ui-dialog:对话框样式

ui-dialog-titlebar:对话框标题栏样式

ui-dialog-title:对话框标题字体样式

ui-dialog-titlebar-close:对话框标题栏关闭样式

切换对话框样式不同的方式：通过设置<link>标签的href的属性来使得样式的改变

属性

方法

$(selector).dialog()函数也有destroy、disable、enable、option方法。

$(selector).dialog("close"); // 关闭对话框

$(selector).dialog("isOpen"); // 判断对话框是否打开，返回Boolean

$(selector).dialog("moveToTop"); // 将对话框置顶

$(selector).dialog("open");  // 打开对话框

事件

1、 focus事件：类型：dialogfocus，当对话框获得焦点时触发

2、 open事件：类型：dialogopen，当对话框打开时触发

3、 dragStart事件：类型：dialogdragstop，当开始拖动对话框时触发

4、 drag事件：类型：dialogdrag，当拖动对话框时触发

5、 dragStop事件：类型：dialogdragstop，当停止拖动对话框时触发

6、 resizeStart事件：类型：dialogresizestart，当开始调整大小时触发

7、 resize事件：类型：dialogresize，当调整大小时触发

8、 resizeStop事件：类型：dialogresizestop，当结束调整大小时触发

9、 beforeclose事件：类型：dialogbeforeclose，

当试图关闭时触发，如果要阻止关闭，则在函数中返回false

10、 close事件：类型：dialogclose，当关闭对话框时触发

事件绑定：

$(selector).dialog({

eventName:function(e, ui){

1、 e:事件对象

2、 ui:封装对象

3、 this:表示对话框元素

}

});