界面主题库
若需要更多的主题包,可以下载主题包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:表示对话框元素
}
});