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

13,732次阅读
一条评论

共计 20688 个字符,预计需要花费 52 分钟才能阅读完成。

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

属性

属性名

数据类型

默认值

说明

addClassesBooleantrue指示是否对可拖动元素添加ui-draggable类
appendToElementSelector“parent”为元素指定一个容器元素
axisStringfalse限制元素的拖动轨迹,可接受”x”和”y”或false
cancelSelector“:input”指定非拖动手柄元素
connectToSortableSelectorfalse允许将元素拖至一个可排序列表上,属性值为可排序列表的选择符
containmentSelectorElement

String

Array

false指定拖动元素的元素拖动区域,属性值可能为:”parent”,

“document”,”window”

[x1,y1,x2,y2]等

cursorString“auto”鼠标位于元素之上的cursor样式
cursorAtObjectfalse指定拖动对象时,光标出现的位置。可以指定top、left、right、

Bottom的一个或两个

delayInteger0指定开始拖动时延迟的毫秒数
distanceInteger1指定开始拖动的延迟距离像素
gridArrayfalse使元素对齐页面上的虚拟网格。
handleElementSelectorfalse指定拖动元素的拖动手柄
helperStringFunction“original”指定拖动元素时显示的辅助元素。其值可以为”original”、”clone”

或函数,函数必须返回一个DOM元素

iframeFixBooleanSelectorfalse是否阻止iframe元素在拖动中捕获Mousemove事件,若为选择符,

则只阻止匹配元素的事件。

opacityFloatfalse指定辅助元素的不透明度
revertBooleanStringfalse若为true则拖动停止时,将返回起始位置。若为”invalid”,则

仅当未拖到目标位置才返回。

“valid”则与”invalid”相反

revertDurationInteger500指定返回起始位置的毫秒数
scopeString“default”指定拖放元素的目标集,与droppable中的同名属性使用
scrollBooleantrue拖动容器元素时,是否自动滚动
scrollSensitivityInteger20指定元素在距离容器边缘多少像素时开始滚动。
scrollSpeedInteger20指定容器元素滚动的速度
snapBooleanSelectorfalse指定拖动元素靠近选择元素的边缘会自动对齐
snapModeString“both”指定元素对齐目标元素的那条边,可选值:”inner”、”outer”和

“both”

snapToleranceInteger20指定元素距离目标元素多少像素时,开始自动对齐
zIndexIntegerfalse设置辅助元素的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)  helperjQuery对象,表示辅助元素

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

属性

属性

数据类型

默认值

说明

acceptSelectorFunction“*”设置投放对象可接受的元素,若提供函数,则把拖动元素作为第一个参数传给函数,

则使该函数返回true的元素皆可

activeClassStringfalse设置可接受的拖动元素处于拖动状态时,可投放对象的CSS样式
addClassBooleantrue是否允许投放对象添加ui-droppable类
greedyBooleanfalse是否在嵌套的投放对象中阻止事件传播
hoverClassStringfalse设置拖动对象移动到投放对象上的CSS样式
scopeString“default”定义拖动对象和投放对象的目标集
toleranceString“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

属性

属性

数据类型

默认值

说明

alsoResizeSelectorjQuery

Element

false当调整大小时,同步调整一组所选的元素的大小
animateBooleanfalse是否为缩放过程添加动画效果
animateDurationIntegerString“slow”指定动画持续的时间,可以为”slow”、”normal”、”fast”

或者具体的毫秒数

animateEasingString“swing”指定动画的效果
aspectRatioBooleanFloatfalse是否调整大小时,保持原长宽比。也可以指定一个长宽比,如0.5
autoHideBooleanfalse是否隐藏缩放手柄,直到鼠标位于该手柄之上时。
cancelSelector“:input”阻止匹配的元素的尺寸发生变化
containmentStringElement

Selector

false限制在指定元素的边界范围内,调整大小尺寸,可选值:”parent”

、”document”、DOM元素或选择符

delayInteger0指定缩放的延迟毫秒数
distanceInteger1指定缩放的延迟像素数
ghostBooleanfalse是否显示半透名的辅助元素
gridArrayfalse指定缩放时对齐的网格,接受[x,  y]分别为网格宽度和高度
handlesStringObject“e,s,se”定义缩放手柄,若提供字符串,则以逗号分隔n、e、s、w、ne、se、

sw、nw以及all,若为对象可以

包含以上属性的任意项

helperStringfalse设置辅助元素的CSS样式
maxHeightIntegernull设置允许调整的最大高度
maxWidthIntegernull设置允许调整的最大宽度
minHeightInteger10设置允许调整的最小高度
minWidthInteger10设置允许调整的最小宽度

 

方法

$(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类:可选择的元素添加该类

属性

属性

数据类型

默认值

说明

autoRefreshBooleantrue是否在选择操作之前,刷新(计算)每个可选的位置和大小,可以设置为false,然后

手动调用refresh方法

cancelSelector“:input”阻止匹配的元素进行选择操作
delayInteger0设置选择延迟的毫秒数
distanceInteger0设置选择延迟的像素数
filterSelector“*”设置能都选择的匹配的子元素
toleranceString“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对象。

属性

属性

数据类型

默认值

说明

appendToString“parent”指定在拖动过程中将辅助元素追加到何处
axisStringfalse指定条目的拖动方向,可选择有”x”和”y”
cancelSelector“:input”指定禁止排序的元素
connectWithSelectorfalse允许排序列表连接另一个排序列表,将条目拖动至另一个列表中去
containmentElementString

Selector

false指定条目拖动的范围,可选值:”parent”、”document”、”window”、DOM元素或者

jQuery选择符

cursorString“auto”指定排序时鼠标的CSS样式
cursorAtObjectfalse指定拖动条目时,光标出现的位置,取值是对象,可以包含top、left、right、

Bottom属性中的一个或两个

delayInteger0指定拖动条目的延迟毫秒数
distanceInteger1指定拖动条目的延迟像素数
dropOnEmptyBooleantrue是否可以将条目拖放至空的列表中
forceHelperSizeBooleanfalse是否强制辅助元素具有尺寸
forcePlaceholdersizeBooleanfalse是否强制占有符具有尺寸
gridArrayfalse使条目或辅助元素对齐网格,取值为数组[x, y]分别表示网格的宽度和高度
handleSelectorElementfalse指定条目的拖动手柄
helperStringFunction“original”指定显示的辅助元素,可选值:”original”或”clone”,若为函数

则函数返回一个DOM元素

itemsSelector“>*”指定列表中可以排序的条目
opacityFloatfalse指定辅助元素的不透明度0.01~1
placeholderStringfalse指定排序时,空白占位的CSS样式
revertBooleanIntegerfalse是否支持动画效果,或指定动画毫秒数
scrollBooleantrue是否元素拖动到边缘时自动滚动
scrollSensitivityInteger20指定元素拖动到距离边缘多少像素时开始滚动
scrollSpeedInteger20指定滚动的速度
toleranceString“intersect”设置拖动元素拖动多少距离时开始排序,可选值:”intersect”和”pointer”,

前者表示重叠50%,后者表示重叠。

z-IndexInteger1000指定辅助元素的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按钮上文本的样式

属性

属性

数据类型

默认值

说明

textBooleantrue是否显示文本,若为false,必须启用图标
iconsOption{primary:nullsecondary:null}指定显示的图标,属性值为字符串类名,分别为左边的图标和右边的图标
labelString按钮的value属性按钮上显示的文本

 

方法

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

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

 

也包含disableenableoptiondestroy方法

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的属性来使得样式的改变

属性

属性

数据类型

默认值

说明

autoOpenBooleantrue是否调用dialog()方法时自动打开,若为false,则保持隐藏,直到调用

dialog(“open”)方法

bgiframeBooleanfalse若设置为true,则使用bgiframe插件,以解决IE6中的bug,1.8.1版本
buttonsObject{}指定在对话框中显示的按钮,key值为按钮的文本,value值则为对应的回调函数。

回调函数中的上下文指代,当前对话框

closeOnEscapeBooleantrue是否在获得焦点并且用户按<ESC>关闭
closeTextString“close”指定关闭按钮的文本
dialogClassString“”指定添加到对话框的类名
draggableBooleantrue是否可拖动对话框
heightNumber“auto”指定对话框的高度,”auto”为适应内容
hideStringnull指定关闭对话框的动画效果
maxHeightNumberfalse指定对话框的最大高度
maxWidthNumberfalse指定对话框的最大宽度
minHeightNumber150指定对话框的最小高度
minWidthNumber150指定对话框的最小宽度
modalBooleanfalse是否为模式窗口
positionStringArray“center”指定对话款的初始位置,可选值:”center”、”left”、”right”、”top”、”bottom”,

也可以是包含[top,  left]的数组

resizableBooleantrue是否可调整对话框大小
showStringnull指定打开对话框的动画效果
stackBooleantrue是否将对话框叠放到其他对话框顶部
titleString“”指定对话框的标题,也可以通过元素的title属性来指定
widthNumber300对话框的宽度
zIndexInteger1000设置对话框起始的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:折叠面板内容样式

属性

属性

数据类型

默认值

说明

activeSelectorElement

jQuery

Boolean

Number

0用于激活的面板内容面板,若设置为false则在开始时,不显示任何面板
animatedBooleanString“slide”选择要应用的动画效果,false则禁用
autoHeightBooleanStringtrue是否将内容部分最高的高度应用到其他部分
clearStyleBooleanfalse是否在动画完成后,清除height和Overflow属性,不能与autoHeight

一起使用

collapsibleBooleanfalse是否所有部分允许click时来关闭。
eventString“click”指定触发打开面板的事件
fillSpaceBooleanfalse是否完全填充父元素的高度,将会重写autoHeight
headerSelectorjQuery见说明标题元素的选择器,默认为li
iconsObject见说明标题所使用的图标,可以通过”header”、”headerSelected”来指定,默认为

{“header”:”ui-icon-triangle-1-e”,

“headerSelected”:”ui-icon-triangle

-1-s”}

navigationBooleanfalse是否使用navigationFilter属性来实现自定义匹配
navigationFilterFunction重写默认的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 id=”accordion”>

    <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>

</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:选项卡内容面板样式

 

属性

属性

数据类型

默认值

说明

ajaxOptionsOptionsnull设置远程选项卡的ajax选项内容
cacheBooleanfalse设置是否对远程选项卡内容进行缓存
collapsibleBooleanfalse是否允许将选定的选项卡内容折叠起来
cookieObjectnull将最后选中的选项卡内容保存到cookie中,需要使用cookie插件。
disabledArray<Number>[]包含选项卡位置的数组(从0开始)用于设置初始化时禁用哪些选项卡
eventString“click”指定选择选项卡时,需要出发什么事件
fxOptionsArray<Options>null指定切换选项卡时的动画效果
idPrefixString“ui-tabs-“指定远程选项卡的id属性的前缀,后缀为,选项卡的index

锚元素无title属性时使用

若锚元素有title属性则使用此属性

作为选项卡的id属性

panelTemplateString“<div></div>”指定使用add方法创建并添加选项卡或动态创建远程选项卡的面板,所使用

的HTML模板

selectedNumber0指定初始化时,所选中的选项卡,若为-1则都不选中
spinnerString见说明指定加载远程内容时,选项卡标题上的HTML的内容,若为空,则停用该行为。

必须在标题的<a></a>标记之间,添加

<span>元素,以便内容可以看到

TabTemplateString见说明指定创建并添加新的选项卡时,使用的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); // 移出选项卡,index0开始

$(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为切换的时间,若为0null则停止切换,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-week-end

ui-datepicker-other-month

ui-datepicker-buttonpanel

ui-datepicker-current

ui-datepicker-close

属性

属性

数据类型

默认值

说明

altFieldString“”使用备用的输出字段,即将选择的日期以另一种格式,输出到另一个控件中,

值为选择符,即要输出的控件

altFormatString“”altField输出的格式,详细格式见formatDate方法
appendTextString“”指定每个日期字段后面显示的文本
autoSizeBooleanfalse是否自动调整控件大小,以适应当前的日期格式的输入
buttonImageString“”指定弹出按钮图像的URL,若设置则buttonText将成为alt值
buttonImageOnlyBooleanfalse是否将图像放在控件后面,作为触发器
buttonTextString“…”指定触发按钮上显示的文本,showOn属性应设置为button或both
changeMonthBooleanfalse是否使用下拉列表选择月份
changeYearBooleanfalse是否使用下拉列表选择年份
closeTextString“Done”指定关闭链接显示的文本
dateFormatString“mm/dd/yy”指定显示日期的格式
defaultDateDateString

Number

null首次打开显示的日期,可以用Date对象指定一个实际日期,或指定距离今天

的天数(如+7)、字符串(y表示年

、m表示月、w表示周、d表示天,如

“+1m+7d”)默认为null,表示今天

durationNumberString“normal”日期选择器呈现的速度,可以为毫秒数
firstDayNumber0设置每周的第一天,0表示星期日,1表示星期一等
maxDateDateNumber

String

null可以选择的最大日期。null表示无限制格式见defaultDate
minDateDateNumber

String

null可以选择的最小日期,null表示无限制格式见defaultDate
numberOfMonthsNumberArray1设置一次要显示几个月。可以为包含两个数字的数组,表示显示的行数和列数
selectOtherMonthsBooleanfalse是否可以选择非当前月的日期,showOtherMonths属性必须为true
shortYearCutoffStringNumber“+10”设置截止的年份的值,若为数字(0~99)则直接使用其值,若是字符串,则转化为

数字并与当前年份相加。当超过截止

年份时,则被认为是上个世纪

showAnimString“show”设置显示或隐藏的动画名
showButtonPanelBooleanfalse是否显示按钮面板
showCurrentAtPosNumber0指定在多月份显示时,当前月份位于何处,从左上方0算起
showMonthAfterYearBooleanfalse是否在标题中的年份后显示月份
showOnString“focus”设置触发选择器的事件名称
showOtherMonthsBooleanfalse是否显示其他月份
stepMonthsNumber1指定单击上月下月链接时,移动几个月
yearRangeStringc-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(“yymmdd“, “2020年01月26日”);

事件

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

事件绑定:

$(selector).datepicker({

    beforeShowDay:function(date){

1、 date:表示一个日期,

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

a)   [0]:truefalse表示是否可选

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);

})

属性

属性

数据类型

默认值

说明

delayInteger300当用户按键后,激活组件延迟的毫秒数
minLengthInteger1激活组件必须输入最小的字符数
sourceStringArray

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为要搜索的数据,如果不指定该参数,

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

$(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:滑块范围

属性

属性

数据类型

默认值

说明

animateBooleanString

Number

false是否添加动画效果,可接受”slow”、”normal”、”fast”或毫秒数
maxNumber100设置滑块的最大值
minNumber0设置滑块的最小值
orientationString“horizontal”设置滑块的方向,”horizontal”、”vertical”分别表示横向和纵向
rangeBooleanStringfalse是否存在两个拖动手柄,
stepNumber1设置步长,必须能被范围大小整除
valueNumber0若只有一个手柄,则指定其值,若有两个手柄,则指定第一个手柄的值
valuesArraynull用于指定多个手柄,若range为true则values的长度应该为2

 

方法

滑块也有destroy、disable、enable、option方法

 

$(selector).slider(“value”[,value]);  // 获取/设定单手柄滑块的值

$(selector).slider(“values”,index[, value]);

// 获取/设定多手柄滑块的值

事件

1、 start事件:类型:slidestart,当开始滑动时触发

2、 slide事件:类型:slide,当拖动滑块时触发

3、 change事件:类型:slidechange,当停止滑动或使用编程方法改变值时触发

4、 stop事件:类型:slidestop,当停止滑动时触发

 

事件绑定:

$(selector).slider({

    eventName:function(event,ui){

1、 event:事件对象

2、 ui:封装了属性的对象,有以下属性:

a)   value:获取当前手柄的值(单手柄)

b)   value[0]:获取当前手柄的值(多手柄)

}

});

摘录于:http://www.cnblogs.com/DaiMaDi/archive/2013/03/25/2980845.html

正文完
 0
任侠
版权声明:本站原创文章,由 任侠 于2013-06-04发表,共计20688字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(一条评论)
验证码
tiandi 评论达人 LV.1
2013-06-06 13:32:03 回复
Google Chrome 28.0.1496.0 Google Chrome 28.0.1496.0 Windows 7 Windows 7

这些大多还是查官方文档。

 Windows  Chrome  内网IP