jQuery UI 主要组件使用中文文档参考

2013-06-04 1 条评论 11,352 次阅读被赞了 0 次

jQuery UI 的 Draggable、Resizable、Droppable、Selectable、Sortable、Button、Dialog、Accordion、Tabs、Datepicker、Autocomplete、Progressbar、Slider等组件使用文档参考。

界面主题库

本中文文档基于 jquery-ui-themes-1.8.1.zip 进行解释说明。可以下载主题包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	ElementSelector	“parent”	为元素指定一个容器元素
axis	String	false	限制元素的拖动轨迹，可接受”x”和”y”或false
cancel	Selector	“:input”	指定非拖动手柄元素
connectToSortable	Selector	false	允许将元素拖至一个可排序列表上，属性值为可排序列表的选择符
containment	SelectorElement 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	ElementSelector	false	指定拖动元素的拖动手柄
helper	StringFunction	“original”	指定拖动元素时显示的辅助元素。其值可以为”original”、”clone” 或函数，函数必须返回一个DOM元素
iframeFix	BooleanSelector	false	是否阻止iframe元素在拖动中捕获Mousemove事件，若为选择符，则只阻止匹配元素的事件。
opacity	Float	false	指定辅助元素的不透明度
revert	BooleanString	false	若为true则拖动停止时，将返回起始位置。若为”invalid”，则仅当未拖到目标位置才返回。 “valid”则与”invalid”相反
revertDuration	Integer	500	指定返回起始位置的毫秒数
scope	String	“default”	指定拖放元素的目标集，与droppable中的同名属性使用
scroll	Boolean	true	拖动容器元素时，是否自动滚动
scrollSensitivity	Integer	20	指定元素在距离容器边缘多少像素时开始滚动。
scrollSpeed	Integer	20	指定容器元素滚动的速度
snap	BooleanSelector	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	SelectorFunction	“*”	设置投放对象可接受的元素，若提供函数，则把拖动元素作为第一个参数传给函数，则使该函数返回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	SelectorjQuery Element	false	当调整大小时，同步调整一组所选的元素的大小
animate	Boolean	false	是否为缩放过程添加动画效果
animateDuration	IntegerString	“slow”	指定动画持续的时间，可以为”slow”、”normal”、”fast” 或者具体的毫秒数
animateEasing	String	“swing”	指定动画的效果
aspectRatio	BooleanFloat	false	是否调整大小时，保持原长宽比。也可以指定一个长宽比，如0.5
autoHide	Boolean	false	是否隐藏缩放手柄，直到鼠标位于该手柄之上时。
cancel	Selector	“:input”	阻止匹配的元素的尺寸发生变化
containment	StringElement Selector	false	限制在指定元素的边界范围内，调整大小尺寸，可选值：”parent” 、”document”、DOM元素或选择符
delay	Integer	0	指定缩放的延迟毫秒数
distance	Integer	1	指定缩放的延迟像素数
ghost	Boolean	false	是否显示半透名的辅助元素
grid	Array	false	指定缩放时对齐的网格，接受[x, y]分别为网格宽度和高度
handles	StringObject	“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对象

}

});

Sortable排序组件

jquery.ui.core.js

jquery.ui.widget.js

jquery.ui.mouse.js

jquery.ui.sortable.js

使用$(selector).sortable([options])构造方法将目标元素（如<ul>）包装

成jQuery对象。

属性

属性	数据类型	默认值	说明
appendTo	String	“parent”	指定在拖动过程中将辅助元素追加到何处
axis	String	false	指定条目的拖动方向，可选择有”x”和”y”
cancel	Selector	“:input”	指定禁止排序的元素
connectWith	Selector	false	允许排序列表连接另一个排序列表，将条目拖动至另一个列表中去
containment	ElementString Selector	false	指定条目拖动的范围，可选值：”parent”、”document”、”window”、DOM元素或者 jQuery选择符
cursor	String	“auto”	指定排序时鼠标的CSS样式
cursorAt	Object	false	指定拖动条目时，光标出现的位置，取值是对象，可以包含top、left、right、 Bottom属性中的一个或两个
delay	Integer	0	指定拖动条目的延迟毫秒数
distance	Integer	1	指定拖动条目的延迟像素数
dropOnEmpty	Boolean	true	是否可以将条目拖放至空的列表中
forceHelperSize	Boolean	false	是否强制辅助元素具有尺寸
forcePlaceholdersize	Boolean	false	是否强制占有符具有尺寸
grid	Array	false	使条目或辅助元素对齐网格，取值为数组[x, y]分别表示网格的宽度和高度
handle	SelectorElement	false	指定条目的拖动手柄
helper	StringFunction	“original”	指定显示的辅助元素，可选值：”original”或”clone”，若为函数则函数返回一个DOM元素
items	Selector	“>*”	指定列表中可以排序的条目
opacity	Float	false	指定辅助元素的不透明度0.01~1
placeholder	String	false	指定排序时，空白占位的CSS样式
revert	BooleanInteger	false	是否支持动画效果，或指定动画毫秒数
scroll	Boolean	true	是否元素拖动到边缘时自动滚动
scrollSensitivity	Integer	20	指定元素拖动到距离边缘多少像素时开始滚动
scrollSpeed	Integer	20	指定滚动的速度
tolerance	String	“intersect”	设置拖动元素拖动多少距离时开始排序，可选值：”intersect”和”pointer”，前者表示重叠50%，后者表示重叠。
z-Index	Integer	1000	指定辅助元素的z-Index值

方法

可排序元素有disable、enable、option、destroy方法

$(selector).sortable(“serialize”[,option]);

// 将排序条目的id序列化成可提交的表单数据

$(selector).sortable(“toArray”); // 将排序的条目id序列化成字符串数组

$(selector).sortable(“refresh”); // 刷新可排序条目

$(selector).sortable(“refreshPositions”); // 刷新排序条目的缓存位置

$(selector).sortable(“cancel”); // 取消当前条目的顺序改变

事件

1、 start事件：类型：sortablestart，当开始排序时触发

2、 sort事件：类型：sortablesort，当排序期间触发

3、 change事件：类型：sortablechange，当元素位置发生改变时触发

4、 beforeStop事件：类型：sortbeforestop，当停止排序，但辅助元素仍可用

5、 stop事件：类型：sortstop，当排序停止时触发

6、 update事件：类型：sortupdate，当停止排序，且元素位置发生变化时触发

7、 receive事件：类型：sortreceive，当连接的列表从另个列表接受条目时触发

8、 remove事件：类型：sortremove，当从列表中拖出条目，并放置到另个列表时触发

9、 over事件：类型：sortover，当条目被移除列表时触发

事件绑定：

$(selector).sortable({

eventName:function(event,ui){

1、 event:事件对象

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

a) helper:表示当前排序元素的jQuery对象

b) position：表示相对与原始位置，包含top属性和left属性

c) offset:表示相对于页面的绝对位置，包含top属性和left属性

d) item：表示当前拖动元素的jQuery对象

e) placeholder:表示占位符

f) sender:当前条目所属的排序对象

}

});

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

}

});

Accordion折叠面板组件

样式表文件：jquery-ui.css

jquery.ui.core.js

jquery.ui.widget.js

jquery.ui.accordion.js

创建容器元素（如<div>），用来初始化，添加每个面板的标题（如<h3>），

和面板的内容（如<div>）；

例如：

<divid=”accordion”>

<h3><a href=”http://m.cnblogs.com/107742/2980845.html?full=1#” target=”_blank” rel=”nofollow“>第一个面板的标题</a></h3>

<div>第一个面板的内容</div>

<h3><a href=”http://m.cnblogs.com/107742/2980845.html?full=1#” target=”_blank” rel=”nofollow”>第二个面板的标题</a></h3>

<div>第二个面板的内容</div>

</div>

CSS样式

ui-accordion:折叠面板样式

ui-accordion-header:折叠面板标题样式

ui-accordion-content:折叠面板内容样式

属性

属性	数据类型	默认值	说明
active	SelectorElement jQuery Boolean Number	0	用于激活的面板内容面板，若设置为false则在开始时，不显示任何面板
animated	BooleanString	“slide”	选择要应用的动画效果，false则禁用
autoHeight	BooleanString	true	是否将内容部分最高的高度应用到其他部分
clearStyle	Boolean	false	是否在动画完成后，清除height和Overflow属性，不能与autoHeight 一起使用
collapsible	Boolean	false	是否所有部分允许click时来关闭。
event	String	“click”	指定触发打开面板的事件
fillSpace	Boolean	false	是否完全填充父元素的高度，将会重写autoHeight
header	SelectorjQuery	见说明	标题元素的选择器，默认为li
icons	Object	见说明	标题所使用的图标，可以通过”header”、”headerSelected”来指定，默认为 {“header”:”ui-icon-triangle-1-e”, “headerSelected”:”ui-icon-triangle -1-s”}
navigation	Boolean	false	是否使用navigationFilter属性来实现自定义匹配
navigationFilter	Function		重写默认的location.href，实现自定义匹配

方法

折叠面板部件也有destroy、disable、enable和option方法

$(selector).accordion(“activate”,index|selector);

// 用于激活指定的面板，index是从0开始的数字，也可以设置为选择器表达式，

若设置为false，则关闭所有面板，需要将collapsible设置为true

事件

1、 changestart事件：类型：accordionchangestart，当开始变化时触发

2、 change事件：类型：accordionchange，当变化时触发

事件绑定：

$(selector).accordion({

eventName:function(event,ui){

1、 event：事件对象

2、 ui:包含附件信息的封装对象，具有以下属性：

a) newHeader：表示当前激活的标题的jQuery对象

b) oldHeader：表示上一个标题的jQeruy对象

c) newContent：表示当前激活的内容的jQuery对象

d) oldContent：表示上一个内容的jQuery对象

}

});

排序功能

设置步骤：

1、将每个面板的标题和内容，分别放在各自的容器中。

例如：

<div>

<h3><ahref=”http://m.cnblogs.com/107742/2980845.html?full=1#” target=”_blank” rel=”nofollow”>第一个面板的标题</a></h3>

<div>第一个面板的内容</div>

</div>

<div>

<h3><a href=”http://m.cnblogs.com/107742/2980845.html?full=1#” target=”_blank” rel=”nofollow”>第二个面板的标题</a></h3>

<div>第二个面板的内容</div>

</div>

2、将整个折叠面板，通过accordion()方法构造面板元素

3、对构造好的面板元素，通过sortable()方法构造可排序元素（见Sortablez组件）

4、对标题绑定click事件，并在停止操作之后立即阻止事件传播

Tabs选项卡组件

CSS样式表文件：jquery-ui.css

jquery.ui.core.js

jquery.ui.widget.js

jquery.ui.tabs.js

创建选项卡容器（如<div>），在容器中创建每个面板的标题（如一个<ul>、

一组<li>和<a>），再为每个选项卡添加内容（如一组<div>），

标题的<a>通过herf连接到<div>的id属性，例如：href=”http://m.cnblogs.com/107742/2980845.html?full=1#tabs-1″ target=”_blank” rel=”nofollow”>

如果选项卡的内容为远程文件，则应将href属性设置为URL，此时自动生成内容面板。

CSS样式

ui-tabs:选项卡容器样式

ui-tabs-nav:选项卡标题栏样式

ui-tabs-panel:选项卡内容面板样式

属性

属性	数据类型	默认值	说明
ajaxOptions	Options	null	设置远程选项卡的ajax选项内容
cache	Boolean	false	设置是否对远程选项卡内容进行缓存
collapsible	Boolean	false	是否允许将选定的选项卡内容折叠起来
cookie	Object	null	将最后选中的选项卡内容保存到cookie中，需要使用cookie插件。
disabled	Array<Number>	[]	包含选项卡位置的数组（从0开始）用于设置初始化时禁用哪些选项卡
event	String	“click”	指定选择选项卡时，需要出发什么事件
fx	OptionsArray<Options>	null	指定切换选项卡时的动画效果
idPrefix	String	“ui-tabs-“	指定远程选项卡的id属性的前缀，后缀为，选项卡的index 锚元素无title属性时使用若锚元素有title属性则使用此属性作为选项卡的id属性
panelTemplate	String	“<div></div>”	指定使用add方法创建并添加选项卡或动态创建远程选项卡的面板，所使用的HTML模板
selected	Number	0	指定初始化时，所选中的选项卡，若为-1则都不选中
spinner	String	见说明	指定加载远程内容时，选项卡标题上的HTML的内容，若为空，则停用该行为。必须在标题的<a></a>标记之间，添加 <span>元素，以便内容可以看到
TabTemplate	String	见说明	指定创建并添加新的选项卡时，使用的HTML模板，默认值为”<li><a href=”http://m.cnblogs.com/107742/ ‘#{href}’><span>#{label} </span></a></li>”。#{href}和 #{label}是占位符，他们将被 Add方法的url和选项卡标题所取代

方法

选项卡也有destroy、disable、enable、option方法

$(selector).tabs(“add”, url,label[, index]);

// url为新选项卡的内容面板，label选项卡的标题，

index为插入位置的索引，默认末尾

$(selector).tabs(“remove”,index); // 移出选项卡，index从0开始

$(selector).tabs(“enable”,index); // 激活选项卡

$(selector).tabs(“disable”,index); // 禁用选项卡

$(selector).tabs(“select”,index); // 选定一个选项卡，index可以选择符

$(selector).tabs(“load”,index);

// 用编程方式重新加载一个Ajax选项卡，即使cache=true

$(selector).tabs(“url”,index, url); //改变Ajax选项卡加载的内容url

$(selector).tabs(“length”); // 获取选项卡面板的选项卡数目

$(selector).tabs(“abort”); // 终止所有正在运行的ajax请求和动画

$(selector).tabs(“rotate”,ms, [continuing]);

// 设置自动切换选项卡，ms为切换的时间，若为0或null则停止切换，continuing

设置当用户选择了一个选项卡后，是否继续切换，默认为false

事件

1、 select事件：类型：tabsselect，当单击选项卡时触发

2、 load事件：类型：tabsload，当加载远程选项卡内容时触发

3、 show事件：类型：tabsshow，当显示一个选项卡时触发

4、 add事件：类型：tabsadd，当添加一个选项卡时触发

5、 remove事件：类型：tabsremove，当移出一个选项卡时触发

6、 enable事件：类型：tabenable，当激活一个选项卡时触发

7、 disable事件：类型：tabsdisable，当禁用一个选项卡时触发

事件绑定：

$(selector).tabs({

eventName:function(event,ui){

1、 event：事件对象

2、 ui：包含额外事件信息的封装对象，包含了以下属性：

a) tab:当前选定的选项卡的锚元素

b) panel:当前选定的选项卡的内容面板元素

c) index：当前选定的选项卡的索引值，从0开始

}

});

Datepicker日期选择器组件

CSS样式表：jquery-ui.css

jquery.ui.core.js

jquery.ui.widget.js

jquery.ui.datepicker.js

jquery.ui.datepicker-zh-CN.js（可选，位于ui/i18n文件夹中，用于实现中文）

CSS样式

ui-datepicker

ui-datepicker-header

ui-datepicker-prev

ui-datepicker-next

ui-datepicker-title

ui-datepicker-month

ui-datepicker-year

ui-datepicker-calendar

ui-datepicker-week-end

ui-datepicker-other-month

ui-datepicker-buttonpanel

ui-datepicker-current

ui-datepicker-close

属性

属性	数据类型	默认值	说明
altField	String	“”	使用备用的输出字段，即将选择的日期以另一种格式，输出到另一个控件中，值为选择符，即要输出的控件
altFormat	String	“”	altField输出的格式，详细格式见formatDate方法
appendText	String	“”	指定每个日期字段后面显示的文本
autoSize	Boolean	false	是否自动调整控件大小，以适应当前的日期格式的输入
buttonImage	String	“”	指定弹出按钮图像的URL，若设置则buttonText将成为alt值
buttonImageOnly	Boolean	false	是否将图像放在控件后面，作为触发器
buttonText	String	“…”	指定触发按钮上显示的文本，showOn属性应设置为button或both
changeMonth	Boolean	false	是否使用下拉列表选择月份
changeYear	Boolean	false	是否使用下拉列表选择年份
closeText	String	“Done”	指定关闭链接显示的文本
dateFormat	String	“mm/dd/yy”	指定显示日期的格式
defaultDate	DateString Number	null	首次打开显示的日期，可以用Date对象指定一个实际日期，或指定距离今天的天数（如+7）、字符串（y表示年、m表示月、w表示周、d表示天，如 “+1m+7d”）默认为null，表示今天
duration	NumberString	“normal”	日期选择器呈现的速度，可以为毫秒数
firstDay	Number	0	设置每周的第一天，0表示星期日，1表示星期一等
maxDate	DateNumber String	null	可以选择的最大日期。null表示无限制格式见defaultDate
minDate	DateNumber String	null	可以选择的最小日期，null表示无限制格式见defaultDate
numberOfMonths	NumberArray	1	设置一次要显示几个月。可以为包含两个数字的数组，表示显示的行数和列数
selectOtherMonths	Boolean	false	是否可以选择非当前月的日期，showOtherMonths属性必须为true
shortYearCutoff	StringNumber	“+10”	设置截止的年份的值，若为数字（0~99）则直接使用其值，若是字符串，则转化为数字并与当前年份相加。当超过截止年份时，则被认为是上个世纪
showAnim	String	“show”	设置显示或隐藏的动画名
showButtonPanel	Boolean	false	是否显示按钮面板
showCurrentAtPos	Number	0	指定在多月份显示时，当前月份位于何处，从左上方0算起
showMonthAfterYear	Boolean	false	是否在标题中的年份后显示月份
showOn	String	“focus”	设置触发选择器的事件名称
showOtherMonths	Boolean	false	是否显示其他月份
stepMonths	Number	1	指定单击上月下月链接时，移动几个月
yearRange	String	c-10:c+10	设置下拉列表框中显示的年份范围，可以是相对今年（-nn:+nn）或相对于选择的年份（c-nn:c+nn）或绝对年份（nnnn:nnnn）

方法

实例方法：

日期选择器也有destroy、disable、enable和option方法

$(selector).datepicker(“isDisabled”); // 是否被禁用

$(selector).datepicker(“hide”,[speed]); // 关闭选择器，speed为速度

$(selector).datepicker(“show”); // 调用先前的选择器

$(selector).datepicker(“getDate”); // 获取选择器中的当前日期

$(selector).datepicker(“setDate”,date);

// 设置当前日期可以为：02/26/2011 或 +1m+7d等

全局方法：

$.datepicker.setDefaults(Options); // 设置所有选择器的默认属性

$.datepicker.formatDate(format, date,setting);

// format为字符串，日期格式

Date为要显示的日期值

Setting为可选项，其值是对象，

format可以使用的组合：d天数、dd天数（2位数字）、o年中的天数、

oo年中的天数、D日期短名称、DD日期长名称、m月份、mm月份

M月份短名称、MM月份长名称、y年份（两位数字）、yy年份（4位数字）

@自01/01/1970以来的毫秒数

$.datepicker.parseDate(format, value,setting);

// value为字符串，包含待提取的日期值

例如：

var date =

$.datepicker.parseDate(“yy年mm月dd日“, “2020年01月26日”);

事件

beforeShowDay事件：当选择器上的每一天显示之前，将触发此事件

事件绑定：

$(selector).datepicker({

beforeShowDay:function(date){

1、 date：表示一个日期，

2、该函数必须返回一个数组：

a) [0]：true或false表示是否可选

b) [1]：表示此日期的CSS类名，默认为“”

c) [2]：表示元素是此日期的一个弹出提示（可选）

}

});

onChangeMonthYear事件：当选择器移动到新的年份或月份时触发

事件绑定：

$(selector).datepicker({

onChangeMonthYear:function(year,month, inst){

1、 year:表示所选的年份

2、 month：表示所选的月份（1~12）

3、 inst：表示日期选择器，它指向所关联的输入控件

}

});

onClose事件：当选择器关闭时触发

事件绑定：

$(selector).datepicker({

onClose:function(dateText,inst){

1、 dateText：表示所选择的日期，为文本字符串，如未选择，则为“”

2、 inst：表示日期选择器实例

}

});

onSelect事件：当选择一个日期时触发

事件绑定：

$(selector).datepicker({

onSelect:function(dateText,inst){

// 参数同上

}

});

Autocomplete自动完成组件

CSS样式表文件：jquery-ui.css

jquery.ui.core.js

jquery.ui.widget.js

jquery.ui.position.js

jquery.ui.autocomplete.js

在Firefox中运行包含自动完成组件的网页时，如果在文本框中输入了中文，

则有可能不会正常弹出自动完成菜单，为了修复这个BUG，可以对

jquery.ui.autocomplete.js修改，在第97行添加以下代码：

.bind(“input.autocomplete”,function(){

self.search(self.item);

})

属性

属性	数据类型	默认值	说明
delay	Integer	300	当用户按键后，激活组件延迟的毫秒数
minLength	Integer	1	激活组件必须输入最小的字符数
source	StringArray Function	none	指定的数据源，必须设置此属性可以是一个包含字符串的数组或包含对象的数组，每个对象应包含label和value，若只包含一项，则被同时当做label和value

source属性：

若请求的资源位于同一个Web应用程序上，则应返回JSON数据，

可以用source指定一个字符串URL，例如：source:”search.asp”

还能够将source设置成一个回调函数：

source:function(request, response){

1、 request：表示请求的对象，request.item表示文本框中的值

2、 response：表示响应的回调函数，并返回字符串的数组或对象的数组：

a) response(function(item){

returnArray|Object

1、item：表示提供的item属性进行筛选

});

}

方法

自动完成组件也有destroy、disable、enable、option方法

$(selector).autocomplete(“search”[,value]);

// 当数据可用时，显示建议数据，value为要搜索的数据，如果不指定该参数，

则使用当前的输入值，如果提供一个字符串，且minLength为0，则显示所有项

$(selector).autocomplete(“close”); // 关闭已打开的菜单

事件

1、 search事件：类型：autocompletesearch，

对数据的请求前触发，若函数返回false则取消请求，不会显示建议条目

2、 open事件：类型：autocompleteopen，显示之前触发

3、 focus事件：类型：autocompletefocus，

焦点移至一个条目之前触发，此时ui.item指向获得焦点的条目，

此事件的默认操作是将文本框的字段，替换成获得焦点条目的值

4、 select事件：类型：autocompleteselect，

当选择条目时触发，ui.item指向所选项，item表示包含label

和value属性的对象，此事件的默认操作是将文本框的字段，替换成选中条目的值

5、 close事件：类型：autocompleteclose，隐藏菜单时触发

6、 change事件：类型：autocompletechange，在close事件之后触发

事件绑定：

$(selector).autocomplete({

eventName:function(event,ui){

1、 event：表示事件对象

2、 ui：表示包含附加信息的对象

}

});

Progressbar进度条组件

CSS样式表文件：jquery-ui.css

jquery.ui.core.js

jquery.ui.widget.js

jquery.ui.progressbar.js

在页面上创建相应的HTML元素（如<div>），然后用构造函数初始化。

CSS样式

ui-progressbar:进度条容器的样式

ui-progressbar-value:进度条的样式

方法

进度条组件也有destroy、disable、enable、option方法

$(selector).progressbar([{value:number}]); // 构造函数

$(selector).progressbar(“value”[,value]); //获取/设置进度条的值

事件

1、 change事件：类型：当进度条值发生变化时触发

事件绑定：

$(selector).progressbar({

change:function(event,ui){

1、 event：事件对象

2、 ui：进度条对象

}

});

Slider滑块组件

CSS样式表文件：jquery-ui.css

jquery.ui.core.js

jquery.ui.widget.js

jquery.ui.mouse.js

jquery.ui.slider.js

在页面创建相应的HTML元素（如<div>），再用构造方法包装该元素

CSS样式

ui-slider-horizontal:滑块轨道

ui-slider-handle:滑块手柄

ui-slider-range:滑块范围

属性

属性	数据类型	默认值	说明
animate	BooleanString Number	false	是否添加动画效果，可接受”slow”、”normal”、”fast”或毫秒数
max	Number	100	设置滑块的最大值
min	Number	0	设置滑块的最小值
orientation	String	“horizontal”	设置滑块的方向，”horizontal”、”vertical”分别表示横向和纵向
range	BooleanString	false	是否存在两个拖动手柄，
step	Number	1	设置步长，必须能被范围大小整除
value	Number	0	若只有一个手柄，则指定其值，若有两个手柄，则指定第一个手柄的值
values	Array	null	用于指定多个手柄，若range为true则values的长度应该为2