jquery tabs详解
lining 2012-12-31
1属性
1.11ajaxOptions,当选项卡加载内容时，添加一个ajax选项。只有ajax时，添加的ajax选项才起作用。默认值为null。上面的例子中，添加了beforeSend和success两个选项。ajax还有一些选项请参考jqueryajax，这里不做详解。。。
1.12初始化设置例：请注意，$('.selector')是tabs的类名，在本例中.selector=#tabs,以后不再说明。
$('.selector').tabs({ajaxOptions:{async:false}});//这里是将异步改为了同步。
1.13初始化后的参数获取和设置：请注意：getter为获取，发音：盖特儿，setter为设置，发音：塞特儿，以后不再说明。
//getter
varajaxOptions=$('.selector').tabs('option','ajaxOptions');
//setter
$('.selector').tabs('option','ajaxOptions',{async:false});
1.21cache默认为false，无缓存。这个选项用于ajax调用，简单的说无缓存，就是每次发送请求都刷新；有缓存就是第一次请求刷新，以后就不刷新了，关闭页面是另外一回事。ajaxOptions:{cache:false}应该和这个功能是一样的吧。
1.22初始化设置例：
$('.selector').tabs({cache:true});
2.23初始化后的参数获取和设置：
//getter
varcache=$('.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.41cookie默认值为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.61disabled设置哪些选项卡不可用，是一个数组例[0,1,2]，也就是第一个、第二个、第三个选项卡。默认为[]。
1.62初始化设置例：$('.selector').tabs({disabled:[1,2]});
1.63初始化后的参数获取和设置：请参考1.23...
1.71event，切换选项卡的事件，默认为'click'，点击切换选项卡。
1.72初始化设置例：$('.selector').tabs({event:'mouseover'});//鼠标滑过切换选项卡
1.73初始化后的参数获取和设置：请参考1.23...
1.81fx，切换选项卡时的动画效果，默认为：null，无动画效果，
1.82初始化设置：请参看最上面的例子。
1.83初始化后的参数获取和设置：请参考1.23...
1.91idPrefix，在使用ajax时，idPrefix选项可以为其添加一个唯一的id，默认为：'ui-tabs-'。
1.92初始化设置例：$('.selector').tabs({idPrefix:'ui-tabs-primary'});
1.93初始化后的参数获取和设置：请参考1.23...
1.101selected，初始化时，哪个选项卡被选中，默认为0，就是第一个选项卡被选中。
1.102初始化设置例：$('.selector').tabs({selected:3});
1.103初始化后的参数获取和设置：请参考1.23...
1.111spinner，当远程内容加载的时候，（ajax），spinner字符串的html内容将被显示在选项卡的标题上。（我很奇怪，我自己试了，怎么不起作用？）
1.112初始化设置例：$('.selector').tabs({spinner:'Retrievingdata...'});
1.113初始化后的参数获取和设置：请参考1.23...
1.121panelTemplate,
1.131tabTemplate,
2事件
先给出一个事件绑定的例子，请注意：
$('#example').bind('tabsselect',function(event,ui){
ui.tab//被选中（点击后）的选项卡元素
ui.panel//这个元素包含被选中（点击后）的选项卡的内容
ui.index//返回一个被选中（或点击后）选项卡的索引值（从0开始）
});
2.11select类型：tabsselect，点击选项卡时触发该事件。
2.12初始化时绑定事件：
$('.selector').tabs({
select:function(event,ui){...}
});
2.13在初始化后使用事件绑定绑定该事件：
$('.selector').bind('tabsselect',function(event,ui){
...
});
2.21load，类型：tabsload一个远程（ajax）选项卡的内容被加载完成后触发该事件。
2.22参考2.12
2.23参考2.13
2.31show，类型：tabsshow当选项卡显示后触发该事件。
2.41add，类型：tabsadd，当一个选项卡被添加后触发。
2.51remove，类型tabsremove，当一个选项卡被删除后触发。
2.61enable，类型tabsenable，当一个选项卡可用时触发。
2.71disable，类型tabsdisable，当一个选项卡不可用时触发。
3方法
3.11destroy，哈哈，又到了我最喜欢的摧毁地球时间。例：.tabs('destroy')
3.21disable，整个选项卡不可用。
3.31enable，整个选项卡可用。.tabs('enable')
3.41option，设置属性。例：.tabs('option',optionName,[value])
3.51add，remove，添加、删除选项卡。例：.tabs('add',url,label,[index])，.tabs('remove',index)
3.61enable，设置某个选项卡标签可用。例：.tabs('enable',index)
3.71disable，设置某个选项卡标签不可用。例：.tabs('disable',index)
3.81select，选择一个选项卡标签。例：.tabs('select',index)，index从0开始。
3.91load，重载一个ajax选项卡的内容，这个一直载入远程内容，即使cache设置为true，第二个参数是要重载选项卡的索引值。例：.tabs('load',index)
3.101url，当一个ajax选项卡将要加载时，改变url。.tabs('url',index,url)
3.111abort，中止所有运行在tab标签上的ajax请求或动画。.tabs('abort')
3.121rotate，自动翻滚选项卡标签。.tabs('rotate',ms,[countinue]),第二个参数是毫秒，是两个标签自动翻滚所需要的时间，设为0或null为停止翻滚。第三个参数是设置当用户选择一个选项卡标签后是否继续翻滚，默认为：false，不继续。
真累，歇歇再说吧。。。
4技巧
4.1如何接收已选中选项卡标签的索引值？
例：var$tabs=$('#example').tabs();
varselected=$tabs.tabs('option','selected');//=>0
4.2如何用一个其它元素代替选项卡单击事件来切换选项卡？
例：var$tabs=$('#example').tabs();//第一个标签被选中
$('#my-text-link').click(function(){//绑定单击事件
$tabs.tabs('select',2);//切换到第三个选项卡标签
returnfalse;
});
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');
returnfalse;
}
});
