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;
    }
});

转载于:https://www.cnblogs.com/lijia7436/archive/2010/03/31/1701194.html

jquery ui tabs详解(中文) 【转载】相关推荐

  1. Jquery UI dialog 详解 (中文)

    1 属性 1.11 autoOpen ,这个属性为true的时候dialog被调用的时候自动打开dialog窗口.当属性为false的时候,一开始隐藏窗口,知道.dialog("open&q ...

  2. 怎样使用jquery UI模板详解

    我自己使用的时候就是把那个UI文档下载下来 在Demo文件夹的同级文件夹下创建一个自己的html文件,需要的模板直接找到赋值,然后仿照例子,根据需求添加自己需要的html标签和jquery对象 这是离 ...

  3. Jquery UI dialog 详解

    还是先看例子吧.另外如果要拖动.改变dialog的大小的话要加上ui.draggble.js和ui.resizable.js <!DOCTYPE html> <html> &l ...

  4. jQuery数组处理详解(含实例演示)

    jQuery的数组处理,便捷,功能齐全. 最近的项目中用到的比较多,深感实用,一步到位的封装了很多原生js数组不能企及的功能. 最近时间紧迫,今天抽了些时间回过头来看 jQuery中文文档 中对数组的 ...

  5. [zz]jQuery.extend 函数详解

    JQuery的extend扩展方法:       Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解.       一.Jquery的扩 ...

  6. jQuery: 插件开发模式详解 $.extend(), $.fn, $.widget()

    原文:http://www.codeceo.com/article/jquery-plugin-develop.html 软件开发过程中是需要一定的设计模式来指导开发的,有了模式,我们就能更好地组织我 ...

  7. jQuery选择器代码详解(一)——Sizzle方法

    对jQuery的Sizzle各方法做了深入分析(同时也参考了一些网上资料)后,将结果分享给大家.我将采用连载的方式,对Sizzle使用的一些方法详细解释一下,每篇文章介绍一个方法. 若需要转载,请写明 ...

  8. Spring AOP详解(转载)所需要的包

    上一篇文章中,<Spring Aop详解(转载)>里的代码都可以运行,只是包比较多,中间缺少了几个相应的包,根据报错,几经百度搜索,终于补全了所有包. 截图如下: 在主测试类里面,有人怀疑 ...

  9. Harris角点检测原理详解(转载)

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/lwzkiller/article/details/54633670 关于角点的应用在图像处理上比较广 ...

最新文章

  1. Sublime Text 3便携版下载安装和常用插件安装--顺便解决报错An error occured installing和no packages available for install
  2. python百钱买百鸡-百钱买百鸡的Python实现
  3. php run js,PHP switch 语句
  4. 内温的整体优先效应实验_实验室通风与系统控制
  5. 后处理安装_核燃料后处理设施中的热室
  6. [react] React怎样跳过重新渲染?
  7. android xpath解析xml,Android 中处理 XML 的四种方式-DOM
  8. 推荐学习网页标准的20个好去处
  9. 自行车测速器怎么调_怎么测甲醛?
  10. bootstrap 图标和文字对齐
  11. 安装phpmyadmin
  12. SQL Prompt 没激活联网后突然无法使用 解决办法
  13. SI 9000 阻抗计算笔记
  14. python 实现熵权法确定各指标的权重
  15. 程序员的五种不同寻常的特质
  16. matlab有限元分析杆单元,有限元实验1-杆单元有限元分析
  17. 概率论考点之指数分布,泊松分布及积分(一维随机变量内容)
  18. 开源运行时社区 - 核心概念说明
  19. js脚本爬取网页数据案例解析
  20. python自动化开发实战实战2:用列表与文件创建购物系统

热门文章

  1. linux libusb应用实例,在Linux中使用libusb-1.0作为非root用户访问USB设备
  2. octobercms 执行php代码_PHP7语言执行原理
  3. Linux输入密码接口,Linux下搭建接口自动化测试平台
  4. java for新循环_Java 8 新语法习惯 (for 循环的函数替代方案)
  5. ae正在发生崩溃_AE错误:正在发生崩溃的解决方法,原创问题解决方案
  6. 简单有趣的c语言小程序,一个有趣的小程序
  7. python控制台清屏_Python Shell 怎样清屏?
  8. 利用python批量查询企业信息_python实现批量获取指定文件夹下的所有文件的厂商信息...
  9. 东北大学c语言及程序设计,东大20秋学期《C语言及程序设计》在线平时作业1参考...
  10. linux怎么运行g77,Linux安装g77编译器的技巧