JQuery-UI-API
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编码方式的字符串数据
// 一般选择的元素为
$("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])函数，将目标元素（如）
包装成jQuery对象。
通过按
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])构造方法将目标元素（如）包装
成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、 为控件添加
3、 将一组单选按钮或复选框放置到某个容器中（如 4、 将容器用$(selector).buttonset()方法转换成jQuery对象 .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方法 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 ui-dialog:对话框样式 ui-dialog-titlebar:对话框标题栏样式 ui-dialog-title:对话框标题字体样式 ui-dialog-titlebar-close:对话框标题栏关闭样式 切换对话框样式不同的方式：通过设置标签的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 是否在获得焦点并且用户按 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:表示对话框元素 } }); 样式表文件：jquery-ui.css jquery.ui.core.js jquery.ui.widget.js jquery.ui.accordion.js 创建容器元素（如 和面板的内容（如 例如： 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、 将每个面板的标题和内容，分别放在各自的容器中。 例如： 2、 将整个折叠面板，通过accordion()方法构造面板元素 3、 对构造好的面板元素，通过sortable()方法构造可排序元素（见Sortablez组件） 4、 对标题绑定click事件，并在停止操作之后立即阻止事件传播 CSS样式表文件：jquery-ui.css jquery.ui.core.js jquery.ui.widget.js jquery.ui.tabs.js 创建选项卡容器（如CSS样式
属性
方法
Dialog对话框组件
CSS样式
属性
方法
事件
Accordion折叠面板组件
），
第一个面板的标题
第二个面板的标题CSS样式
属性
方法
事件
排序功能
Tabs选项卡组件
、