`
hegz
  • 浏览: 440746 次
  • 性别: Icon_minigender_1
  • 来自: 茂名
社区版块
存档分类
最新评论

Jquery UI tabs详解

阅读更多

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

 

分享到:
评论
1 楼 li9581 2012-06-15  
29 

相关推荐

    jquery ui tabs

    《jQuery UI Tabs详解及其应用》 在Web开发中,jQuery UI是一个强大且广泛使用的JavaScript库,它基于jQuery,提供了丰富的用户界面组件。其中,jQuery UI的Tabs组件是创建多面板界面的一个优秀工具,使得网页内容...

    Jquery UI Tabs插件扩展

    **jQuery UI Tabs插件扩展详解** jQuery UI是一个强大的JavaScript库,它提供了许多用户界面组件,包括我们今天要讨论的Tabs插件。这个插件能够帮助开发者轻松创建功能丰富的标签页式布局,提升用户体验,使网站...

    JQuery UI 中文帮助文档

    **jQuery UI 中文帮助文档详解** jQuery UI 是一个基于 jQuery JavaScript 库的开源项目,它提供了丰富的用户界面组件,使得开发者能够轻松创建交互性强、视觉效果美观的网页应用。这个中文帮助文档是针对jQuery UI...

    jQuery UI组件 jQuery UI

    **jQuery UI组件详解** jQuery UI 是一个强大的前端开发框架,基于流行的JavaScript库jQuery构建,它提供了丰富的用户界面组件,能够帮助开发者快速构建交互性、视觉吸引力强的网页应用。jQuery UI 包含了大量的...

    jquery ui & themes

    《jQuery UI与主题设计详解》 在Web开发领域,jQuery UI是一个强大且广泛使用的JavaScript库,它基于jQuery核心库,提供了丰富的用户界面组件和交互效果。jQuery UI的主要目标是简化前端开发,通过提供一系列可定制...

    JQUERY UI 开发指南源码

    **jQuery UI 开发指南源码详解** jQuery UI 是一个基于 jQuery JavaScript 库的用户界面插件集合,提供了丰富的交互效果、可自定义的主题以及多种组件,如对话框、拖放功能、日期选择器等。本资源是《jQuery UI ...

    jqueryui需的jar包

    **jQuery UI 知识点详解** jQuery UI 是一个基于 jQuery JavaScript 库的用户界面插件集合,它提供了丰富的交互效果、可自定义的主题以及多种组件,使得开发者能够更轻松地创建具有吸引力和交互性的Web应用。这个...

    jQueryui_tabs_impor.rar

    《jQuery UI中的Tabs组件详解及应用》 在Web开发领域,jQuery UI库是jQuery框架的一个重要扩展,提供了丰富的用户界面组件,其中的Tabs组件尤其受到开发者们的青睐。本篇文章将详细解析jQuery UI中的Tabs组件,包括...

    jqueryui可视化

    **jQuery UI 可视化详解** jQuery UI 是一个基于 jQuery 库的开源用户界面库,提供了丰富的组件和交互效果,让网页开发中的可视化设计变得更加简单和高效。它包含了一系列精心设计的可定制组件,如对话框(Dialog)...

    JqueryUI压缩包

    **jQuery UI 压缩包详解** jQuery UI 是一个基于 jQuery JavaScript 库的用户界面插件集合,提供了各种可交互的组件和视觉效果,用于构建美观且易用的Web应用程序。这个压缩包包含了构建和使用jQuery UI所需的核心...

    jquery-ui插件

    jQuery UI允许通过主题 roller 工具(http://jqueryui.com/themeroller/)来自定义组件的样式,以匹配网站的整体设计。你可以选择颜色、字体、边框等样式,然后下载生成的CSS文件,替换到项目中。 此外,还可以通过...

    JQueryUI组件 JS下载

    **jQueryUI组件详解** jQueryUI 是一个基于jQuery库的扩展,它提供了一整套用户界面组件,如对话框、滑块、进度条、日期选择器等,极大地简化了网页交互和用户界面的设计。这个下载包包含了jQueryUI的核心组件以及...

    Jquery UI Demo 框架

    **jQuery UI Demo框架详解** jQuery UI 是一个基于 jQuery JavaScript 库的用户界面插件集合,它提供了各种可重用、可定制的UI组件,用于创建交互式的网页元素。本篇文章将深入探讨jQuery UI Demo框架,以及它如何...

    jquery ui 最新版1.10

    **jQuery UI 1.10 知识点详解** jQuery UI 是一个开源的 JavaScript 库,基于 jQuery,提供了丰富的用户界面组件和交互效果。在版本 1.10 中,这个库继续保持其作为Web开发的强大工具地位,为开发者提供了一系列...

    JQuery UI 中文帮助文档.rar

    **jQuery UI 中文帮助文档详解** jQuery UI 是一个基于 jQuery JavaScript 库的用户界面插件集合,它提供了丰富的交互效果、可自定义的主题以及多种组件,使得开发者能够更轻松地创建具有吸引力和功能性的Web应用。...

    jqueryui demo

    在"jqueryui demo"中,我们可以看到官方提供的各种示例,这些示例涵盖了jQuery UI的主要功能。 ### 一、jQuery UI 主要组件 1. **对话框(Dialog)** 对话框是网页中的弹出窗口,常用于提示信息、确认操作或显示...

    关于jquery ui的教材

    《jQuery UI 教材详解与实战应用》 jQuery UI 是一个强大的前端开发库,它基于 jQuery,提供了丰富的用户界面组件和交互效果。本教材将深入探讨jQuery UI的基础知识,包括其核心概念、组件使用以及实战中的应用技巧...

    JQuery UI1.7中文文档

    **jQuery UI 1.7中文文档详解** jQuery UI 是一个基于 jQuery JavaScript 库的用户界面插件集合,它提供了一套完整的组件,包括交互、特效、小部件和主题,用于构建富有吸引力且易于使用的Web应用程序。jQuery UI ...

    jquery-ui-1.10.4

    《jQuery UI 1.10.4:深入理解与应用》 jQuery UI 是一个基于 jQuery JavaScript 库的强大用户界面库,提供了丰富的交互效果、可定制的主题以及多种可重用的组件。在本篇文章中,我们将深入探讨jQuery UI 1.10.4...

    jQuery UI 1.10 API Documentation

    **jQuery UI 1.10 API 文档详解** jQuery UI 是一个开源的 JavaScript 库,它基于 jQuery,提供了丰富的用户界面组件和交互效果。在版本 1.10 中,这个库包含了各种功能强大的模块,如对话框、拖放、日期选择器、...

Global site tag (gtag.js) - Google Analytics