AJAX应用
Ajax函数
$("XXX").load(url [, data][,callback]);
// 用于加载HTML代码,并将其插入到XXX DOM文档中
// data为参数,为字符串或映射(键值对)例如:key1=value1&key2=value2
// 若参数data为字符串或无,则发送的请求类型为get,否则为post
// callback为回调函数,callback可以接受三个参数,例如:
// function (responseText, textStatus, XMLHttpRequest){
// responseText为响应文本
// textStatus为响应状态文本
}
$.getJSON(url[, data][, callback(data, textStatus)]);
// 用于加载JSON数据
// callback为回调函数:
// function (data, textStatus){
// data为服务器返回的数据
// textStatus为响应状态文本
}
$.getScript(url[, callback(data, textStatus)]);
// 用于动态加载JavaScript脚本文件
// function (data, textStatus){
// data为服务器响应的数据,即JavaScript文件包含的源代码
}
$.get(url[, data][, callback][, dataType]);
// 用于加载更多类型的数据
// dataType为字符串,用于指定服务器返回的数据类型
// 可选值有:“xml”、“html”、“script”、“json”、“jsonp”、“text”
// callback为回调函数:
// function (data, textStatus, XMLHttpRequest){
// data为服务器返回的数据
}
$.post(url[, data][, callback][, dataType]);
// 参数用法同$.get();
// 使用post请求永远都不会缓存
$.ajax(settings);
// 使用ajax请求访问服务器
// settings为json类型的对象,用于设置参数的属性,例如:{url:"test.html"}
// settings的选项:
// async:指定是否以异步请求方式发送;默认为true
// cache:指定是否进行缓存;
默认为true,当dataType为script或jsonp时,则默认为false;
// contentType:发送的数据类型;
默认为application/x-www-form-urlencoded
若传入的为内容类型,则它将始终被发送到服务器。
// data:发送到服务器的参数;
必须为键值对或序列化的字符串。
// dataType:请求的数据类型的字符串表示形式;
可选值有:xml、html、script、json、jsonp、text
// username:指定用于响应HTTP访问认证的用户名
// password:指定用于响应HTTP访问认证的密码
// timeout:指定请求超时时间
// type:指定请求的类型;可以为post、get等
// url:指定请求的服务器地址
// beforeSend(XMLHttpRequest):用于设置请求之前的回调函数,
并传入XMLHttpRequest作参数
// error(XMLHttpRequest, textStatus,errorThrown):
用于设置请求失败的回调函数,并传入XMLHttpRequest、
一个表示错误类型的字符串和异常对话作为参数
// success(data, textStatus,XMLHttpRequest):
用于设置请求成功时的回调函数,并传入返回的数据、一个包含成功
代码的字符串和XMLHttpRequest作为参数
// complete(XMLHttpRequest,textStatus):
用于设置请求完成时的回调函数(无论成功还是失败)
传入XMLHttpRequest对象和一个包含成功或失败代码的字符串
数据处理
$("XXX").serialize();
// 将DOM元素的数据,序列化成标准的URL编码方式的字符串数据
// 一般选择的元素为<form>标签
$("XXX").serializeArray();
// 将DOM元素的数据,序列化成JSON类型的数组
$.param(object[, traditional]);
// 将指定数据序列化成标准的URL编码方式的字符串数据
// object为要进行序列化的对象或数组
// traditional为Boolean类型,表示是否执行传统的“浅”序列化
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对象
}
});
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 | Element String 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 | Selector Element | false | 指定条目的拖动手柄 |
helper | String Function | "original" | 指定显示的辅助元素,可选值: "original"或"clone",若为函数 则函数返回一个DOM元素 |
items | Selector | ">*" | 指定列表中可以排序的条目 |
opacity | Float | false | 指定辅助元素的不透明度0.01~1 |
placeholder | String | false | 指定排序时,空白占位的CSS样式 |
revert | Boolean Integer | 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: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:表示对话框元素
}
});
Accordion折叠面板组件
样式表文件:jquery-ui.css
jquery.ui.core.js
jquery.ui.widget.js
jquery.ui.accordion.js
创建容器元素(如<div>),用来初始化,添加每个面板的标题(如<h3>),
和面板的内容(如<div>);
例如:
<divid="accordion">
<h3><a href="#">第一个面板的标题</a></h3>
<div>第一个面板的内容</div>
<h3><a href="#">第二个面板的标题</a></h3>
<div>第二个面板的内容</div>
</div>
CSS样式
ui-accordion:折叠面板样式
ui-accordion-header:折叠面板标题样式
ui-accordion-content:折叠面板内容样式
属性
属性 | 数据类型 | 默认值 | 说明 |
active | Selector Element jQuery Boolean Number | 0 | 用于激活的面板内容面板,若设置为false 则在开始时,不显示任何面板 |
animated | Boolean String | "slide" | 选择要应用的动画效果,false则禁用 |
autoHeight | Boolean String | true | 是否将内容部分最高的高度应用到其他部分 |
clearStyle | Boolean | false | 是否在动画完成后,清除height和 Overflow属性,不能与autoHeight 一起使用 |
collapsible | Boolean | false | 是否所有部分允许click时来关闭。 |
event | String | "click" | 指定触发打开面板的事件 |
fillSpace | Boolean | false | 是否完全填充父元素的高度,将会重写 autoHeight |
header | Selector jQuery | 见说明 | 标题元素的选择器,默认为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 id="accordion">
<div>
<h3><ahref="#">第一个面板的标题</a></h3>
<div>第一个面板的内容</div>
</div>
<div>
<h3><a href="#">第二个面板的标题</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="#tabs-1"
如果选项卡的内容为远程文件,则应将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 | Options Array<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= '#{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-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 | Date String Number | null | 首次打开显示的日期,可以用Date对象 指定一个实际日期,或指定距离今天 的天数(如+7)、字符串(y表示年 、m表示月、w表示周、d表示天,如 "+1m+7d")默认为null,表示今天 |
duration | Number String | "normal" | 日期选择器呈现的速度,可以为毫秒数 |
firstDay | Number | 0 | 设置每周的第一天,0表示星期日, 1表示星期一等 |
maxDate | Date Number String | null | 可以选择的最大日期。null表示无限制 格式见defaultDate |
minDate | Date Number String | null | 可以选择的最小日期,null表示无限制 格式见defaultDate |
numberOfMonths | Number Array | 1 | 设置一次要显示几个月。可以为包含两个 数字的数组,表示显示的行数和列数 |
selectOtherMonths | Boolean | false | 是否可以选择非当前月的日期, showOtherMonths属性必须为true |
shortYearCutoff | String Number | "+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 | String Array 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 | Boolean String Number | false | 是否添加动画效果,可接受"slow"、 "normal"、"fast"或毫秒数 |
max | Number | 100 | 设置滑块的最大值 |
min | Number | 0 | 设置滑块的最小值 |
orientation | String | "horizontal" | 设置滑块的方向,"horizontal"、 "vertical"分别表示横向和纵向 |
range | Boolean String | false | 是否存在两个拖动手柄, |
step | Number | 1 | 设置步长,必须能被范围大小整除 |
value | Number | 0 | 若只有一个手柄,则指定其值, 若有两个手柄,则指定第一个手柄的值 |
values | Array | null | 用于指定多个手柄,若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]:获取当前手柄的值(多手柄)
}
});