jQuery UI
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
属性
|
属性名 |
数据类型 |
默认值 |
说明 |
|
addClasses |
Boolean |
true |
指示是否对可拖动元素添加 ui-draggable类 |
|
appendTo |
Element Selector |
"parent" |
为元素指定一个容器元素 |
|
axis |
String |
false |
限制元素的拖动轨迹，可接受 "x"和"y"或false |
|
cancel |
Selector |
":input" |
指定非拖动手柄元素 |
|
connectToSortable |
Selector |
false |
允许将元素拖至一个可排序列表上， 属性值为可排序列表的选择符 |
|
containment |
Selector Element String Array |
false |
指定拖动元素的元素拖动区域， 属性值可能为："parent"， "document"，"window" [x1,y1,x2,y2]等 |
|
cursor |
String |
"auto" |
鼠标位于元素之上的cursor样式 |
|
cursorAt |
Object |
false |
指定拖动对象时，光标出现的位置。 可以指定top、left、right、 Bottom的一个或两个 |
|
delay |
Integer |
0 |
指定开始拖动时延迟的毫秒数 |
|
distance |
Integer |
1 |
指定开始拖动的延迟距离像素 |
|
grid |
Array |
false |
使元素对齐页面上的虚拟网格。 |
|
handle |
Element Selector |
false |
指定拖动元素的拖动手柄 |
|
helper |
String Function |
"original" |
指定拖动元素时显示的辅助元素。 其值可以为"original"、"clone" 或函数，函数必须返回一个DOM元素 |
|
iframeFix |
Boolean Selector |
false |
是否阻止iframe元素在拖动中捕获 Mousemove事件，若为选择符， 则只阻止匹配元素的事件。 |
|
opacity |
Float |
false |
指定辅助元素的不透明度 |
|
revert |
Boolean String |
false |
若为true则拖动停止时，将返回 起始位置。若为"invalid"，则 仅当未拖到目标位置才返回。 "valid"则与"invalid"相反 |
|
revertDuration |
Integer |
500 |
指定返回起始位置的毫秒数 |
|
scope |
String |
"default" |
指定拖放元素的目标集， 与droppable中的同名属性使用 |
|
scroll |
Boolean |
true |
拖动容器元素时，是否自动滚动 |
|
scrollSensitivity |
Integer |
20 |
指定元素在距离容器边缘多少像素 时开始滚动。 |
|
scrollSpeed |
Integer |
20 |
指定容器元素滚动的速度 |
|
snap |
Boolean Selector |
false |
指定拖动元素靠近选择元素的边缘 会自动对齐 |
|
snapMode |
String |
"both" |
指定元素对齐目标元素的那条边， 可选值："inner"、"outer"和 "both" |
|
snapTolerance |
Integer |
20 |
指定元素距离目标元素多少像素 时，开始自动对齐 |
|
zIndex |
Integer |
false |
设置辅助元素的zIndex |
方法
$(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
属性
|
属性 |
数据类型 |
默认值 |
说明 |
|
accept |
Selector Function |
"*" |
设置投放对象可接受的元素，若提供函数， 则把拖动元素作为第一个参数传给函数， 则使该函数返回true的元素皆可 |
|
activeClass |
String |
false |
设置可接受的拖动元素处于拖动状态时， 可投放对象的CSS样式 |
|
addClass |
Boolean |
true |
是否允许投放对象添加ui-droppable类 |
|
greedy |
Boolean |
false |
是否在嵌套的投放对象中阻止事件传播 |
|
hoverClass |
String |
false |
设置拖动对象移动到投放对象上的CSS样式 |
|
scope |
String |
"default" |
定义拖动对象和投放对象的目标集 |
|
tolerance |
String |
"intersect" |
设置可接受的拖放元素完成投放的触发模式， 包括"fit"，"intersect"，"pointer" ，"touch"等 |
方法
$(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
属性
|
属性 |
数据类型 |
默认值 |
说明 |
|
alsoResize |
Selector jQuery Element |
false |
当调整大小时，同步调整一组所选的 元素的大小 |
|
animate |
Boolean |
false |
是否为缩放过程添加动画效果 |
|
animateDuration |
Integer String |
"slow" |
指定动画持续的时间，可以为 "slow"、"normal"、"fast" 或者具体的毫秒数 |
|
animateEasing |
String |
"swing" |
指定动画的效果 |
|
aspectRatio |
Boolean Float |
false |
是否调整大小时，保持原长宽比。 也可以指定一个长宽比，如0.5 |
|
autoHide |
Boolean |
false |
是否隐藏缩放手柄，直到鼠标位于 该手柄之上时。 |
|
cancel |
Selector |
":input" |
阻止匹配的元素的尺寸发生变化 |
|
containment |
String Element Selector |
false |
限制在指定元素的边界范围内， 调整大小尺寸，可选值："parent" 、"document"、DOM元素或选择符 |
|
delay |
Integer |
0 |
指定缩放的延迟毫秒数 |
|
distance |
Integer |
1 |
指定缩放的延迟像素数 |
|
ghost |
Boolean |
false |
是否显示半透名的辅助元素 |
|
grid |
Array |
false |
指定缩放时对齐的网格， 接受[x, y]分别为网格宽度和高度 |
|
handles |
String Object |
"e,s,se" |
定义缩放手柄，若提供字符串，则以 逗号分隔n、e、s、w、ne、se、 sw、nw以及all，若为对象可以 包含以上属性的任意项 |
|
helper |
String |
false |
设置辅助元素的CSS样式 |
|
maxHeight |
Integer |
null |
设置允许调整的最大高度 |
|
maxWidth |
Integer |
null |
设置允许调整的最大宽度 |
|
minHeight |
Integer |
10 |
设置允许调整的最小高度 |
|
minWidth |
Integer |
10 |
设置允许调整的最小宽度 |
方法
$(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类：可选择的元素添加该类
属性
|
属性 |
数据类型 |
默认值 |
说明 |
|
autoRefresh |
Boolean |
true |
是否在选择操作之前，刷新（计算）每个可选 的位置和大小，可以设置为false，然后 手动调用refresh方法 |
|
cancel |
Selector |
":input" |
阻止匹配的元素进行选择操作 |
|
delay |
Integer |
0 |
设置选择延迟的毫秒数 |
|
distance |
Integer |
0 |
设置选择延迟的像素数 |
|
filter |
Selector |
"*" |
设置能都选择的匹配的子元素 |
|
tolerance |
String |
"touch" |
指定触发选择操作的条件，可选值："touch" 、"fit"分别表示完全和部分覆盖即可 |
方法
可选对象，也包含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：按钮上文本的样式
属性
|
属性 |
数据类型 |
默认值 |
说明 |
|
text |
Boolean |
true |
是否显示文本，若为false，必须启用图标 |
|
icons |
Option |
{primary:null secondary:null} |
指定显示的图标，属性值为字符串类名， 分别为左边的图标和右边的图标 |
|
label |
String |
按钮的value属性 |
按钮上显示的文本 |
方法
$(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的属性来使得样式的改变
属性
|
属性 |
数据类型 |
默认值 |
说明 |
|
autoOpen |
Boolean |
true |
是否调用dialog()方法时自动打开， 若为false，则保持隐藏，直到调用 dialog("open")方法 |
|
bgiframe |
Boolean |
false |
若设置为true，则使用bgiframe插件， 以解决IE6中的bug，1.8.1版本 |
|
buttons |
Object |
{} |
指定在对话框中显示的按钮，key值为 按钮的文本，value值则为对应的回调函数。 回调函数中的上下文指代，当前对话框 |
|
closeOnEscape |
Boolean |
true |
是否在获得焦点并且用户按<ESC>关闭 |
|
closeText |
String |
"close" |
指定关闭按钮的文本 |
|
dialogClass |
String |
"" |
指定添加到对话框的类名 |
|
draggable |
Boolean |
true |
是否可拖动对话框 |
|
height |
Number |
"auto" |
指定对话框的高度，"auto"为适应内容 |
|
hide |
String |
null |
指定关闭对话框的动画效果 |
|
maxHeight |
Number |
false |
指定对话框的最大高度 |
|
maxWidth |
Number |
false |
指定对话框的最大宽度 |
|
minHeight |
Number |
150 |
指定对话框的最小高度 |
|
minWidth |
Number |
150 |
指定对话框的最小宽度 |
|
modal |
Boolean |
false |
是否为模式窗口 |
|
position |
String Array |
"center" |
指定对话款的初始位置，可选值："center"、 "left"、"right"、"top"、"bottom"， 也可以是包含[top, left]的数组 |
|
resizable |
Boolean |
true |
是否可调整对话框大小 |
|
show |
String |
null |
指定打开对话框的动画效果 |
|
stack |
Boolean |
true |
是否将对话框叠放到其他对话框顶部 |
|
title |
String |
"" |
指定对话框的标题，也可以通过元素的 title属性来指定 |
|
width |
Number |
300 |
对话框的宽度 |
|
zIndex |
Integer |
1000 |
设置对话框起始的z-Index属性 |
方法
$(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:表示对话框元素
}
});
