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:表示对话框元素

}

});

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。