1 属性
1.11 ajaxOptions,当选项卡加载内容时，添加一个ajax选项。只有ajax时，添加的ajax选项才起作用。默认值为null。上面的例子中，添加了beforeSend和success两个选项。ajax还有一些选项请参考jquery ajax，这里不做详解。。。
1.12 初始化设置例：请注意，$('.selector')是tabs 的类名，在本例中.selector=#tabs,以后不再说明。
$('.selector').tabs({ ajaxOptions: { async: false } });//这里是将异步改为了同步。
1.13 初始化后的参数获取和设置：请注意：getter为获取，发音：盖特儿，setter为设置，发音：塞特儿，以后不再说明。
//getter
var ajaxOptions = $('.selector').tabs('option', 'ajaxOptions');
//setter
$('.selector').tabs('option', 'ajaxOptions', { async: false });
1.21 cache 默认为false，无缓存。这个选项用于ajax调用，简单的说无缓存，就是每次发送请求都刷新；有缓存就是第一次请求刷新，以后就不刷新了，关闭页面是另外一回事。ajaxOptions:{cache:false}应该和这个功能是一样的吧。
1.22 初始化设置例：
$('.selector').tabs({ cache: true });
2.23 初始化后的参数获取和设置：
//getter
var cache = $('.selector').tabs('option', 'cache');
//setter
$('.selector').tabs('option', 'cache', true);
1.31collapsible，意思是可折叠的，默认选项是false，不可以折叠。如果设置为true，允许用户将已经选中的选项卡内容折叠起来。这样说吧：点击一次选项卡2，选项卡 2内容显示出来了，这时候再次点击选项卡2，选项卡的内容区就收了起来，再次点击选项卡2，选项卡的内容区则又展开了。明白否？知道你不明白，不明白就用最上面的例子试试吧。
1.32 初始化设置例：
$('.selector').tabs({ collapsible: true });
1.33 初始化后的参数获取和设置：请参考1.23...
1.41 cookie 默认值为null，需要cookie插件。保存最后一次选择的选项卡到cookie 中。可使用的选项例：(example): { expires: 7, path: '/', domain: 'jquery.com', secure: true }.
1.42 初始化设置例：$('.selector').tabs({ cookie: { expires: 30 } });
1.43 初始化后的参数获取和设置：请参考1.23...
1.51deselectable 默认为false，作用似乎和collapsible一样。
1.61 disabled 设置哪些选项卡不可用，是一个数组例[0,1,2]，也就是第一个、第二个、第三个选项卡。默认为[]。
1.62 初始化设置例：$('.selector').tabs({ disabled: [1, 2] });
1.63 初始化后的参数获取和设置：请参考1.23...
1.71 event ，切换选项卡的事件，默认为'click'，点击切换选项卡。
1.72 初始化设置例：$('.selector').tabs({ event: 'mouseover' }); //鼠标滑过切换选项卡
1.73 初始化后的参数获取和设置：请参考1.23...
1.81 fx，切换选项卡时的动画效果，默认为：null，无动画效果，
1.82 初始化设置：请参看最上面的例子。
1.83 初始化后的参数获取和设置：请参考1.23...
1.91 idPrefix ，在使用ajax时，idPrefix选项可以为其添加一个唯一的id，默认为：'ui-tabs-' 。
1.92 初始化设置例：$('.selector').tabs({ idPrefix: 'ui-tabs-primary' });
1.93 初始化后的参数获取和设置：请参考1.23...
1.101 selected，初始化时，哪个选项卡被选中，默认为0，就是第一个选项卡被选中。
1.102 初始化设置例：$('.selector').tabs({ selected: 3 });
1.103 初始化后的参数获取和设置：请参考1.23...
1.111 spinner，当远程内容加载的时候，（ajax），spinner字符串的html内容将被显示在选项卡的标题上。（我很奇怪，我自己试了，怎么不起作用？）
1.112 初始化设置例：$('.selector').tabs({ spinner: 'Retrieving data...' });
1.113 初始化后的参数获取和设置：请参考1.23...
1.121 panelTemplate ,
1.131 tabTemplate ,
2 事件
先给出一个事件绑定的例子，请注意：
$('#example').bind('tabsselect', function(event, ui) {
ui.tab // 被选中（点击后）的选项卡元素
ui.panel //这个元素包含被选中（点击后）的选项卡的内容
ui.index //返回一个被选中（或点击后）选项卡的索引值（从0开始）
});
2.11 select 类型：tabsselect ，点击选项卡时触发该事件。
2.12 初始化时绑定事件：
$('.selector').tabs({
select: function(event, ui) { ... }
});
2.13 在初始化后使用事件绑定绑定该事件：
$('.selector').bind('tabsselect', function(event, ui) {
...
});
2.21 load，类型：tabsload 一个远程（ajax）选项卡的内容被加载完成后触发该事件。
2.22 参考2.12
2.23 参考2.13
2.31 show，类型：tabsshow 当选项卡显示后触发该事件。
2.41 add，类型：tabsadd ，当一个选项卡被添加后触发。
2.51 remove ，类型tabsremove ，当一个选项卡被删除后触发。
2.61 enable ，类型tabsenable ，当一个选项卡可用时触发。
2.71 disable，类型tabsdisable，当一个选项卡不可用时触发。
3 方法
3.11 destroy，哈哈，又到了我最喜欢的摧毁地球时间。例：.tabs( 'destroy' )
3.21 disable，整个选项卡不可用。
3.31 enable，整个选项卡可用。.tabs( 'enable' )
3.41 option，设置属性。例：.tabs( 'option' , optionName , [value] )
3.51 add，remove，添加、删除选项卡。例：.tabs( 'add' , url , label , [index] ) ，.tabs( 'remove' , index )
3.61 enable，设置某个选项卡标签可用。例：.tabs( 'enable' , index )
3.71 disable，设置某个选项卡标签不可用。例：.tabs( 'disable' , index )
3.81 select，选择一个选项卡标签。例：.tabs( 'select' , index ) ，index从0开始。
3.91 load，重载一个ajax选项卡的内容，这个一直载入远程内容，即使cache设置为true，第二个参数是要重载选项卡的索引值。例：.tabs( 'load' , index )
3.101 url，当一个ajax选项卡将要加载时，改变url。.tabs( 'url' , index , url )
3.111 abort，中止所有运行在tab标签上的ajax请求或动画。.tabs( 'abort' )
3.121 rotate，自动翻滚选项卡标签。.tabs('rotate',ms,[countinue]),第二个参数是毫秒，是两个标签自动翻滚所需要的时间，设为0或 null为停止翻滚。第三个参数是设置当用户选择一个选项卡标签后是否继续翻滚，默认为：false，不继续。
真累，歇歇再说吧。。。
4 技巧
4.1 如何接收已选中选项卡标签的索引值？
例：var $tabs = $('#example').tabs();
var selected = $tabs.tabs('option', 'selected'); // => 0
4.2 如何用一个其它元素代替选项卡单击事件来切换选项卡？
例：var $tabs = $('#example').tabs(); // 第一个标签被选中
$('#my-text-link').click(function() { // 绑定单击事件
$tabs.tabs('select', 2); // 切换到第三个选项卡标签
return false;
});
4.3 如何立刻选择刚添加的选项卡标签？
例：var $tabs = $('#example').tabs({
add: function(event, ui) {
$tabs.tabs('select', '#' + ui.panel.id);
}
});
4.4 如何在一个新窗口中打开选项卡标签？
例：$('#example').tabs({
select: function(event, ui) {
location.href = $.data(ui.tab, 'load.tabs');
return false;
}
});
<script language="JavaScript" type="text/javascript" src="ui/jquery-1.8.2.js"></script>
<script language="JavaScript" type="text/javascript" src="ui/jquery-ui-1.9.1.custom.js"></script>
<script language="JavaScript" type="text/javascript" src="ui/jquery.ui.datepicker-zh-CN.js"></script>
<link rel="stylesheet" type="text/css" href="ui/jquery-ui-1.9.1.custom.css">
<!--==============================dialog==============================-->
<!--==================================================================-->
<input type="button" value="dialog_fun" onclick="dialog_fun();" />
<div id="dialog_div" > <!-- 其中内容就是要在窗口中显示的内容 -->
<p>all must set</p>
<form action="index.php">
<fieldset>
name:<input type="text" value="" name="name_txt" class="text ui-widget-content ui-corner-all" />
password:<input type="password" name="password_pas" class="text ui-widget-content ui-corner-all" />
email:<input type="text" name="email_txt" class="text ui-widget-content ui-corner-all" />
birth:<input type="text" name="birth_txt" class="text ui-widget-content ui-corner-all" />
<input type="submit" name="submit_txt" class="submit_txt" value="submit" />
</fieldset>
</form>
</div>
<script language="JavaScript" type="text/javascript">
$("#dialog_div").dialog({
//=================属性
autoOpen :false, //实例化时是否自动显示对话框。设置为 false 时，使用 open 方法显示对话框。默认值 true
title :"对话框标题", //设置对话框标题。默认值 ""
height :600, //设定对话框高度，像素单位。默认值 "auto"
width :300, //设定对话框宽度，像素单位。默认值 "auto"
resizable :true, //设定对话框是否可以调整大小。默认值 true
maxHeight :false, //调整对话框大小时最大高度。默认值 false
maxWidth :false, //调整对话框大小时最大宽度。默认值 false
minHeight :false, //调整对话框大小时最小高度。默认值 false
minWidth :false, //调整对话框大小时最小宽度。默认值 false
position :"center", //设置对话框显示位置，可选值："center","left","right","top","bottom"，或者数组分别设置水平和垂直位置。数值偏移([20,30] 相对左上角便宜)或位置(["right","bottom"] 右下角)。默认值 "center"
draggable :true, //设定对话框是否可拖动。默认值 true
stack :true, //是否可覆盖其它对话框。默认值 true
zIndex :1000, //设置对话框 CSS z-index 值。默认值 1000
bgiframe :false, //是否使用 bgiframe 插件解决 IE6 下无法遮盖 select 元素问题。默认值 false
modal :false, //是否为模态窗口，设置为 true 时，页面上其它元素将被覆盖且无法响应用户操作。默认值 false
dialogClass :"", //添加额外的对话框 CSS的Class。默认值 ""
show :"slide", //显示对话框时使用的特效。默认值 null
hide :"puff", //关闭对话框时使用的特效。默认值 null
closeOnEscape:true, //是否在用户按 ESC 键时关闭对话框。（对话框需拥有输入焦点）默认值 true
buttons : [{ //设置对话框底部按钮，对象属性名为按钮文本，属性值为单击按钮时的回调函数。可设置一至多个按钮
text: "确认",
click: function() { //点击确认时执行的动作
$(".submit_txt").click();
}
},
{
text: "取消",
click: function() { //点击取消时执行的动作
$(this).dialog("close")
}
}],
//=================事件
open :function(event,ui) { //在窗口打开时执行的操作
//alert("this is open");
},
beforeClose :function(event,ui){ //对话框关闭前执行，返回 false 防止对话框关闭。
//alert("this is beforeclose");
//return false;
},
focus :function(event,ui){ //对话框获得焦点时执行。
//alert("this is focus");
},
dragStart :function(event,ui){ //开始对话框拖动时执行。
//alert("this is dragStart");
},
drag :function(event,ui){ //拖动对话框时执行。
//alert("this is drag");
},
dragStop :function(event,ui){ //结束对话框拖动时执行。
//alert("this is dragStop");
},
resizeStart :function(event,ui){ //开始调整对话框大小时执行。
//alert("this is resizeStart");
},
resize :function(event,ui){ //调整对话框大小时执行。
//alert("this is resize");
},
resizeStop :function(event,ui){ //结束调整对话框大小时执行。
//alert("this is resizeStop");
},
close :function(event,ui){ //关闭对话框时执行。
//alert("this is close");
}
})
function dialog_fun() {
//=================方法
$("#dialog_div").dialog("open"); //显示对话框。
$("#dialog_div").dialog("isOpen"); //对话框可见时返回 true。
$("#dialog_div").dialog("moveToTop"); //使对话框处于最前方。
//$("#dialog_div").dialog("close"); //关闭对话框。
//$("#dialog_div").dialog("destroy"); //销毁对话框实例。
$("#dialog_div").dialog("disable"); //禁止操作对话框。
$("#dialog_div").dialog("enable"); //允许操作对话框。
$("#dialog_div").dialog("option","height",700);//为指定属性赋值，第二参数为dialog的一个属性名，第三参数为可以为该属性赋的值
$("#dialog_div").dialog("option","height"); //获取指定属性的值，第二参数为dialog的一个属性名
}
</script>
<!--==============================accordion===========================-->
<!--==================================================================-->
<input type="button" value="accordion_fun" onclick="accordion_fun();" />
<!-- 一般要折叠面板部分的HTML结构都是三层结构 -->
<div id="accordion_div"> <!-- 第一层把要折叠的整个部分包括起来 -->
<div> <!-- 第二层把要折叠的每个单元包括起来 -->
<h3> <!-- 第三层有两段，一段是折叠时显示的标题头，第二段是打开折叠时要显示的内容，要分别包起来 -->
First2
</h3>
<div>
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor
sit amet.
</div>
</div>
<div>
<h3>
Second
</h3>
<div>
Phasellus mattis tincidunt nibh.
</div>
</div>
<div>
<h3>
Third
</h3>
<div>
Nam dui erat, auctor a, dignissim quis.
</div>
</div>
</div>
<script language="JavaScript" type="text/javascript">
$("#accordion_div").accordion({
//=================属性
header :"h3", //设定第三层把标题包括起来的第一段的HTML标签名
active :0, //设定默认显示第几个面板，第一个索引为0。设置为 false 时默认不显示面板，需 collapsible 属性设置为 true。默认值 0
animated :"slide", //设定面板折叠动画效果。设置为 false 禁止动画效果。内置"slide"、"easeslide"、"bounceslide"。更多效果需加载 Effects Core。默认值 "slide"
autoHeight :true, //是否设定最高面板高度为其它所有面板高度。默认值 true
clearStyle :false, //设定为 true 时，折叠面板后自动清除 height 和 overflow 样式。适用于动态加载面板内容。与 autoHeight 属性不兼容。默认值 false
collapsible :true, //是否允许折叠全部面板。设为 false 时必须显示一个面板。默认值 false
event :"click", //设置切换面板的事件，还可以设为 "mouseover"。默认值 "click"
fillSpace :false, //设置为 true 时，高度自动填充满父元素。将覆盖 autoHeight 属性。默认值 false
icons :{ //设置面板标题折叠打开时图标。header：折叠时图标；headerSelected：打开时图标。
"header" :"ui-icon-plus",
"headerSelected" :"ui-icon-minus"
},
navigation :false, //设置为 true 时，自动打开 href 属性与 location.href 相同的面板。用于使用 URL 保持面板打开状态。默认值 false
navigationFilter :false, //自定义 navigation 属性检查函数。
//=================事件
change :function(event,ui){ //改变打开面板时触发。若设置动画效果，动画结束时触发。
//alert("this is change");
}
});
function accordion_fun(){
//=================方法
$("#accordion_div").accordion("activate",1); //打开指定面板，序号（0 起始），或为 Selector 字符串。设置为 -1 时关闭全部面板，需 collapsible 属性为 true。
//$("#accordion_div").accordion("destroy"); //销毁折叠面板实例。
//$("#accordion_div").accordion("disable"); //禁止操作折叠面板。
$("#accordion_div").accordion("enable"); //允许操作折叠面板。
$("#accordion_div").accordion("option","active",2); //为指定属性赋值，第二参数为accordion的一个属性名，第三参数为可以为该属性赋的值
$("#accordion_div").accordion("option","active"); //获取指定属性的值，第二参数为accordion的一个属性名
}
</script>
<!--==============================progressbar=========================-->
<!--==================================================================-->
<input type="button" value="progressbar_fun" onclick="progressbar_fun();" />
<div id="progressbar_div"></div>
<script language="JavaScript" type="text/javascript">
$("#progressbar_div").progressbar({
//=================属性
value :30, //进度条百分比数值。默认值 0
//=================事件
change :function(event,ui){
//alert("this is change"); //进度条数值改变时触发。
}
});
function progressbar_fun(){
//=================方法
$("#progressbar_div").progressbar("value",40); //设置进度条value属性值
$("#progressbar_div").progressbar("value"); //获取进度条value属性值
//$("#progressbar_div").progressbar("destroy"); //销毁进度条实例。
$("#progressbar_div").progressbar("disable"); //禁止操作进度条。
$("#progressbar_div").progressbar("enable"); //允许操作进度条。
$("#progressbar_div").progressbar("option","value",60); //为指定属性赋值，第二参数为progressbar的一个属性名，第三参数为可以为该属性赋的值
$("#progressbar_div").progressbar("option","value"); //获取指定属性的值，第二参数为progressbar的一个属性名
}
</script>
<!--==============================slider==============================-->
<!--==================================================================-->
<input type="button" value="slider_fun" onclick="slider_fun();" />
<div id="slider_div"></div>
<script language="JavaScript" type="text/javascript">
$("#slider_div").slider({
//=================属性
animate :true, //单击滑动区域时，滑块是否使用动画效果平滑移动到单击位置。默认值 false
max :100, //滑动范围最大值。默认值 100
min :0, //滑动范围最小值。默认值 0
orientation :"auto", //滑动方向。通常无需设定，控件会自行探测正确方向。默认值 "auto"
range :false, //设置为 true 时，自动探测是否有两个滑块并高亮显示两个滑块间范围。设置为 "min" 时，高亮显示最小值至滑块范围；设置为 "max" 时，高亮显示滑块至最大值范围。默认值 false
step :1, //设定滑块最小行进值，需可以被最大范围值减去最小范围值的差整除。默认值 1
value :0, //设定第一个滑块的默认值。默认值 0
values :null, //设定多个滑块默认值。range 属性为 true 时，此数值元素个数应为 2。默认值 null
//=================事件
start :function(event,ui){ //用户开始滑动滑块时执行。
//alert("this is start");
},
slide :function(event,ui){ //使用鼠标拖动滑块滑动时执行。返回 false 禁止滑块移动。
//alert("this is slide");
},
change :function(event,ui){ //滑动停止，或由程序修改滑块值时执行。使用 event.orginalEvent 属性探测是由用户（鼠标、键盘）或是程序修改。
//alert("this is change");
},
stop :function(event,ui){ //用户停止滑动滑块时执行。
//alert("this is stop");
}
});
function slider_fun(){
//=================方法
$("#slider_div").slider("value",10); //设置滑块数值
$("#slider_div").slider("value"); //得到滑块当前数值
//$("#slider_div").slider("destroy"); //销毁滑块实例。
$("#slider_div").slider("disable"); //禁止操作滑块。
$("#slider_div").slider("enable"); //允许操作滑块。
$("#slider_div").slider("option","step",10); //为指定属性赋值，第二参数为slider的一个属性名，第三参数为可以为该属性赋的值
$("#slider_div").slider("option","step"); //获取指定属性的值，第二参数为progressbar的一个属性名
}
</script>
<!--==============================datepicker==========================-->
<!--==================================================================-->
<input type="button" value="datepicker_fun" onclick="datepicker_fun();" />
<input type="text" name="datepicker_txt" id="datepicker_txt" class="datepicker_show" />
<input type="text" name="datepicker_txt2" id="datepicker_txt2" class="datepicker_show" />
<div id="datepicker_div" class="datepicker_show"></div>
<script language="JavaScript" type="text/javascript">
//默认是英文的，如要显示中文的，将JQueryUI压缩包内development-bundle\ui\i18n\jquery.ui.datepicker-zh-CN.js引进来
$("#datepicker_txt").datepicker({
//=================属性
dateFormat :"yy/mm/dd", //设置日期字符串的显示格式。中文版默认值 "yy-mm-dd"
duration :"slow", //设置日期控件展开动画的显示时间，可选是"slow", "normal", "fast"，""代表立刻，数字代表毫秒数。
showAnim :"fold", //设置显示、隐藏日期插件的动画的名称。
showOptions :{direction: "up"}, //如果使用showAnim来显示动画效果的话，可以通过此参数来增加一些附加的参数设置。
constrainInput :true, //如果设置为true，则约束当前手动输入的日期格式。默认值 true
//minDate :-10, //设置限制可选日期距当天日期的最小天数差，如果是负数则是限制当天日期前可选日期最多天数。默认值无限制
//maxDate :"+1W +3", //设置限制可选日期距当天日期的最大天数差，如果是负数则是限制当天日期前可选日期最小天数，天数这里可以用整数，也可以用 "+1W +3"的格式，1w代表一周，还有M代表月，D代表天，Y代表年。默认值无限制
shortYearCutoff :50, //设置截止年份的值。如果是（0-99）的数字则以当前年份开始算起，如果为字符串，则相应的转为数字后再与当前年份相加。当超过截止年份时，则被认为是上个世纪。
showButtonPanel :true, //设置是否在面板上显示相关的按钮。默认值 false
gotoCurrent :true, //如果设置为true，则点击当天按钮时，将移至当前已选中的日期，而不是今天。
currentText :"Now", //设置当天按钮的文本内容，此按钮需要通过showButtonPanel参数的设置才显示。中文默认值 "今天"
closeText :"X", //设置关闭按钮的文本内容，此按钮需要通过showButtonPanel参数的设置才显示。中文默认值 "关闭"
hideIfNoPrevNext :true, //设置当没有上一个/下一个可选择的情况下，隐藏掉相应的按钮。（默认为不可用）
showMonthAfterYear :true, //是否在面板的头部年份后面显示月份。默认值 true
changeMonth :false, //是否在标题处显示可选择月份下拉框。默认值 false
changeYear :false, //是否在标题处显示可选择年份下拉框。默认值 false
yearRange :"2000:2010", //控制年份的下拉列表中显示的年份数量，可以是相对当前年(-nn:+nn)，也可以是绝对值(-nnnn:+nnnn)
firstDay :0, //设置一周中的第一天。星期天为0，星期一为1，以此类推。默认值 0
showWeek :true, //是否在日期面板左侧显示当年第几周数。默认值 false
numberOfMonths :3, //设置一次要显示多少个月份面板。如果为整数则是显示月份面板的数量，如果是数组，则是显示的行与列的数量。
showCurrentAtPos :1, //设置当多月份显示的情况下，当前月份显示的位置。自顶部/左边开始第x位。起始位置为0
showOn :"button", //在要输入日期框后加个按钮，点击弹出日期面板，此时点要输入日期的框不再弹出日期面板
buttonText :"Choose", //设置触发按钮的文本内容。
buttonImage :"ui/images/dataSelect.png", //设置弹出按钮的图片，如果非空，则按钮的文本将成为alt属性，不直接显示。
buttonImageOnly :true, //是否使整个按钮只显示为指定的图标图样
altField :"#datepicker_txt2", //将选择的日期同步到另一个域中，配合altFormat可以显示不同格式的日期字符串。
altFormat :"yy-mm-dd", //当设置了altField的情况下，显示在另一个域中的日期格式。
appendText :"(yy/mm/dd)", //在日期插件的所属域后面显示指定的字符串 (yy/mm/dd) 通知使用者日期格式。
isRTL :false, //如果设置为true，则所有文字是从右自左。默认值 false
nextText :"Later", //设置"下个月"链接的显示文字。
prevText :"Earlier", //设置"上个月"链接的显示文字。
showOn :"both", //设置什么事件触发显示日期插件的面板，可选值：focus, button, both
showOtherMonths :true, //是否在当前面板显示上、下两个月的一些日期数（不可选）。
stepMonths :1, //当点击上/下一月时，一次翻几个月。
defaultDate :+7, //设置默认加载完后第一次显示时选中的日期。可以是Date对象，或者是数字（从今天算起，例如+7），或者有效的字符串("y"代表年, "m"代表月, "w"代表周, "d"代表日, 例如："+1m +7d")。
navigationAsDateFormat :false, //如果设置为true，则formatDate函数将应用到prevText,nextText和currentText的值中显示，例如显示为月份名称。
dayNames :["Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi"], //一般没用，设置一星期中每天的名称，从星期天开始。此内容用于dateFormat时显示，以及日历中当鼠标移至行头时显示。
dayNamesMin :["Di","Lu","Ma","Me","Je","Ve","Sa"], //一般没用，设置一星期中每天的缩语，从星期天开始，此内容用于dateFormat时显示，以及日历中的行头显示。
dayNamesShort :["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"], //一般没用，设置一星期中每天的缩语，从星期天开始，此内容用于dateFormat时显示，以前日历中的行头显示。
monthNames :["Januar","Februar","Marts","April","Maj","Juni","Juli","August","September","Oktober","November","December"], //设置所有月份的名称。
monthNamesShort :["Jan","Feb","Mar","Apr","Maj","Jun","Jul","Aug","Sep","Okt","Nov","Dec"], //设置所有月份的缩写。
//=================事件
beforeShow :function(input){ //在日期控件显示面板之前，触发此事件，并返回当前触发事件的控件的实例对象。
//alert("this is beforeShow");
},
beforeShowDay :function(date){ //在日期控件显示面板之前，每个面板上的日期绑定时都触发此事件，参数为触发事件的日期。调用函数后，必须返回一个数组：[0]此日期是否可选 (true/false)，[1]此日期的CSS样式名称(""表示默认)，[2]当鼠标移至上面出现一段提示的内容。
//alert("this is beforeShowDay");
return [true,"","this is beforeShowDay"];
},
onChangeMonthYear :function(year, month, inst){ //当年份或月份改变时触发此事件，参数为改变后的年份月份和当前日期插件的实例。
//alert("this is onChangeMonthYear");
},
onClose :function(dateText, inst){ //当日期面板关闭后触发此事件（无论是否有选择日期），参数为选择的日期和当前日期插件的实例。
//alert("this is onClose");
},
onSelect :function(dateText, inst){ //当在日期面板选中一个日期后触发此事件，参数为选择的日期和当前日期插件的实例。
//alert("this is onSelect");
}
});
/*
dateFormat属性日期格式：
"d" - 每月的第几天 (没有前导零)
"dd" - 每月的第几天 (两位数字)
"o" - 一年中的第几天 (没有前导零)
"oo" - 一年中的第几天 (三位数字)
"D" – 当天是周几
"DD" - 当天是星期几
"m" - 月份 (没有前导零)
"mm" - 月份 (两位数字)
"M" - month name short
"MM" - month name long
"y" - 年份 (两位数字)
"yy" - 年份 (四位数字)
"@" - Unix 时间戳 (从 01/01/1970 开始)
"..." - 文本
其它标准日期格式:
"yy-mm-dd" - ATOM(Same as RFC 3339/ISO 8601)
"D, dd M yy" - COOKIE
"yy-mm-dd" - ISO_8601
"D, d M y" - RFC_822
"DD, dd-M-y" - RFC_850
"D, d M y" - RFC_1036
"D, d M yy" - RFC_1123
"D, d M yy" - RFC_2822
"D, d M y" - RSS
"@" - TIMESTAMP
"yy-mm-dd" - W3C
*/
function datepicker_fun(){
//=================方法
//$("#datepicker_txt").datepicker("destroy"); //从元素中移除拖拽功能。
$("#datepicker_txt").datepicker("disable"); //禁用元素的拖拽功能。
$("#datepicker_txt").datepicker("enable"); //启用元素的拖拽功能。
$("#datepicker_txt").datepicker("option","dateFormat","yy-mm-dd");//为指定属性赋值，第二参数为datepicker的一个属性名，第三参数为可以为该属性赋的值
$("#datepicker_txt").datepicker("option","dateFormat"); //获取指定属性的值，第二参数为progressbar的一个属性名
$("#datepicker_txt").datepicker("isDisabled"); //确实日期插件是否已被禁用。
$("#datepicker_txt").datepicker("hide","speed"); //隐藏（关闭）之前已经打开的日期面板。
$("#datepicker_txt").datepicker("show"); //显示日期插件。
$("#datepicker_txt").datepicker("getDate"); //返回当前日期插件选择的日期。
$("#datepicker_txt").datepicker("setDate",1); //设置日期插件当前的日期。date参数可以是数字（从今天算起，例如+7），或者有效的字符串("y"代表年, "m"代表月, "w"代表周, "d"代表日, 例如："+1m +7d")，null表示当天。
}
//$("#datepicker_div").datepicker(); //如果要在网页上显示一个日期显示牌，则用<div>来替代<input>标签即可
</script>
<!--==============================tabs================================-->
<!--==================================================================-->
<input type="button" value="tabs_fun" onclick="tabs_fun();" />
<div id="tabs_div"><!--把整个可以用选择标签来显示内容的部分用div包括起来-->
<ul><!-- 创建可选择显示内容的标签列表，格式必须是<ul>形式，并且每个<li>下的内容要用<a></a>括起来 -->
<li>
<a href="#0"><!--<a>的href值必须是 "#加上要显示其中内容的div的id" 该div位置必须与<a>所在<ul>同级-->
<span><!--标签名外<span>不是必须的，但如果动态添加标签时，默认HTML样式是标签名与<a>之间有层<span>-->
Tab 1
</span>
</a>
</li>
<li>
<a href="#1">
<span>
Tab 2
</span>
</a>
</li>
<li>
<a href="index.php"><!--href如果填的不是下面div的id而是具体页面地址则自动变成AJAX模式，href路径就是AJAX路径-->
<span>
Tab 3
</span>
</a>
</li>
</ul>
<div id="0">
sun
</div>
<div id="1">
fish
</div>
</div>
<script language="JavaScript" type="text/javascript">
$("#tabs_div").tabs({
//=================属性
ajaxOptions : { //Ajax加载标签内容时，附加的参数 (详见 $.ajax)。默认值 null。
async : false
},
cache : false, //是否缓存Ajax加载的标签内容，如果缓存则只在第一次加载时获取。默认值 false。
//cookie : { //利用cookie记录最后选中的标签，需要cookie插件支持。默认值 null
//expires: 30
//},
collapsible : false, //设置为true，则允许一个已选中的标签变成未选中状态。默认值 false。
deselectable : false, //设置标签插件为不可选中的。（不推荐使用在1.7版本，应使用collapsible）默认值 false
//disabled : [1, 2], //加载时，禁用哪些标签页，填写标签页的索引，起始为0。默认值 []
event : "mouseover", //设置什么事件将触发选中一个标签页。默认值 "click"
fx : { //启用动画效果当标签页显示和隐藏。默认值 null
opacity : "toggle"
},
idPrefix : "ui-tabs-", //如果远程的将生成一个id，默认值 "ui-tabs-"
panelTemplate : "<div></div>", //当动态添加一个标签容器时，它的容器的HTML元素。默认值"<div></div>"
selected : 0, //设置初始化时，选中的标签页的索引（从0开始）。如果全部未选中，则使用-1。默认值 0
spinner : "Retrieving data...", //设置当从远程加载内容时，标签的标题显示的文本内容，如果设置为空则停用此行为。默认值 "<em>Loading…</em>"
tabTemplate : "<li><a href='#{href}' mce_href='#{href}'><span>#{label}</span></a></li>",//当动态添加一个标签页时，它的标签样式，#{href}和#{label}是用于替换add时的参数。默认值 "<li><a href='#{href}' mce_href='#{href}'><span>#{label}</span></a></li>"
//=================事件
select : function(event, ui) { //当点击一个标签标题时，触发此事件。
//alert("this is select");
},
load : function(event, ui) { //当远程加载一个标签页内容完成后，触发此事件。
//alert("this is load");
},
show : function(event, ui) { //当一个标签页内容显示出来后，触发此事件。
//alert("this is show");
},
add : function(event, ui) { //当添加一个标签页后，触发此事件。
//alert("this is add");
},
remove : function(event, ui) { //当移除一个标签页后，触发此事件。
//alert("this is remove");
},
enable : function(event, ui) { //当一个标签页被设置成启用后，触发此事件。
//alert("this is enable");
},
disable : function(event, ui) { //当一个标签页被设置成禁用后，触发此事件。
//alert("this is disable");
}
});
function tabs_fun(){
//=================方法
$("#tabs_div").tabs("disable",0); //禁用指定标签页。起始索引为0
$("#tabs_div").tabs("enable",0); //启用指定标签页。起始索引为0
$("#tabs_div").tabs("disable"); //禁用标签插件。
$("#tabs_div").tabs("enable"); //启用标签插件。
$("#tabs_div").tabs("option","event","click"); //为指定属性赋值，第二参数为tabs的一个属性名，第三参数为可以为该属性赋的值
$("#tabs_div").tabs("option","event"); //获取指定属性的值，第二参数为tabs的一个属性名
//$("#tabs_div").tabs("destroy"); //销毁一个标签插件对象。
//$("#tabs_div").tabs("remove",0); //移除一个标签页。起始索引为0
$("#tabs_div").tabs("add","#0","Tab 4",1) ; //添加一个标签页。第二个是指向显示div的id，第三个参数是标签名，第四个参数指定添加的位置，可不写添加到最后
$("#tabs_div").tabs("select",1); //选中打开一个标签页。起始索引为0
$("#tabs_div").tabs("url",0,"index.php"); //改变一个Ajax标签页的URL。起始索引为0
$("#tabs_div").tabs("load",0); //重新加载一个ajax标签页的内容。起始索引为0
$("#tabs_div").tabs("abort"); //终止正在进行Ajax请求的的标签页的加载和动画。
$("#tabs_div").tabs("length"); //获取标签页的数量。
//$("#tabs_div").tabs("rotate",500000,true); //自动滚动显示标签页。第二个参数是停留时间单位毫秒，第三个参数可不写是当用户选中一个标签页后是否继续执行，默认false。该方法有问题未找到原因
}
</script>
先引JQuery包，再引jqueryUI包，再引CSS，jqueryUI包自带的images文件夹要放在css文件同级目录下 控件调用都是在网页标签的JQuery对象上调用某个方法，方法可以空不写参数，如果要写则所有属性用大括号"{}"括起来，
大括号内属性和值之间用":"分割，属性之间用","分离，最后一个属性后面不能写","，然后把大括号整体作为一个参数放到方法括号"()"内，这是实例化
如果实例化后更改属性值则 JQuery.实例化同名方法() 括号内属性不用大括号括起来
浙公网安备 33010602011771号