和），再为每个选项卡添加内容（如一组），标题的通过herf连接到的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 | [] | 包含选项卡位置的数组（从0开始） 用于设置初始化时禁用哪些选项卡 |
| event | String | "click" | 指定选择选项卡时，需要出发什么事件 |
| fx | Options Array | null | 指定切换选项卡时的动画效果 |
| idPrefix | String | "ui-tabs-" | 指定远程选项卡的id属性的前缀， 后缀为，选项卡的index 锚元素无title属性时使用 若锚元素有title属性则使用此属性 作为选项卡的id属性 |
| panelTemplate | String | " " | 指定使用add方法创建并添加选项卡 或动态创建远程选项卡的面板，所使用 的HTML模板 |
| selected | Number | 0 | 指定初始化时，所选中的选项卡，若为 -1则都不选中 |
| spinner | String | 见说明 | 指定加载远程内容时，选项卡标题上的 HTML的内容，若为空，则停用该行为。 必须在标题的标记之间，添加 元素，以便内容可以看到 |
| TabTemplate | String | 见说明 | 指定创建并添加新的选项卡时，使用的 HTML模板，默认值为" '#{href}'>#{label}"。#{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){
return Array|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元素（如），然后用构造函数初始化。
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元素（如），再用构造方法包装该元素
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]：获取当前手柄的值（多手柄）
}
});
