`

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


分享到:
评论

相关推荐

    jqueryui tabs

    jQuery UI 是一个基于 jQuery 库的强大用户界面工具集,它提供了许多可自定义的组件,如对话框(Dialog)、滑块(Slider)、日期选择器(Datepicker)以及我们这里关注的选项卡(Tabs)。`jQuery UI Tabs` 是一个...

    jquery ui tabs paging 不换行

    jQuery UI Tabs Paging 是一个用来对太多的 Tab 进行分页显示的 jQuery 插件。 默认的 tabs 插件一旦 tab 过多就会换行,影响页面布局。jquery.ui.tabs.paging 的作用就在于不让其换行,在两头增加左右滑动的图片...

    jquery ui tabs_jqgrid demo

    从给定的文件信息来看,这是一段网页代码示例,主要展示了如何在网页中集成jQuery UI Tabs和jqGrid插件。以下是对标题、描述、标签以及部分内容中涉及的关键知识点的详细解读: ### 关键知识点:jQuery UI Tabs **...

    jquery ui tabs

    接着,可以从官方网站(https://jqueryui.com)下载jQuery UI的压缩包,其中包括CSS样式文件和JavaScript脚本。在项目中,通常需要引入以下两个文件: 1. `css/jquery-ui.min.css`:这是jQuery UI的基础样式文件,...

    Jquery UI Tabs插件扩展

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

    jquery ui tabs paging 扩展

    jquery.ui.tabs 的扩展插件。 默认的 tabs 插件一旦 tab 过多就会换行,影响页面布局。jquery.ui.tabs.paging 的作用就在于不让其换行,在两头增加左右滑动的图片按钮,对 tab 进行滚动。 使用上也非常简单,在页面...

    jquery ui tabs(底色自由版)

    根据jquery官方的tabs插件而来,官方插件在页面底色是白色时,是没有问题滴~~但如果换了其他颜色,tab的边角就成了白色,这怎么能拿出手呢~~所以鄙人请公司美工MM重新整了哈tab.png。现在没有问题了,而且鼠标移上去...

    JQuery UI 中文帮助文档

    3. **调用方法**:对选中的元素调用jQuery UI提供的方法,如`$(selector).tabs()`来创建选项卡。 4. **配置选项**:可以通过参数设置组件的具体行为和外观,如`$(selector).dialog({width: 500, modal: true})`创建...

    jquery tabs实例

    在网页设计中,jQuery UI 的 Tabs 是一个非常实用的功能,它可以帮助我们轻松创建美观且功能齐全的标签式界面。这个“jquery tabs实例”提供了一套完整的JavaScript和CSS代码,用于帮助开发者快速理解和应用jQuery ...

    jquery-ui:jQuery UI的一个分支:WIP分支,旧版Selectmenu小部件(分支:selectmenu)和jQuery UI Tabs的可访问版本(过时,分支:tabs可访问性)

    在这个特定的上下文中,我们关注的是一个**WIP(Work In Progress)分支**,它包含了两个特定的组件:旧版的**Selectmenu小部件**和**可访问版本的jQuery UI Tabs**。 **Selectmenu小部件**是jQuery UI中的一个组件...

    谈谈对jquery ui tabs 的理解

    jQuery UI Tabs 是 jQuery UI 库中实现选项卡式导航的组件。它允许开发者快速地创建具有多种交互功能的选项卡界面,常用于在有限的页面空间内展示多块内容。本文将介绍 jQuery UI Tabs 的属性、事件、方法及其使用...

    jquery ui 标签

    本文将深入探讨jQuery UI中的"标签"功能,即jQuery UI Tabs,这是一个简洁而实用的插件,能够帮助开发者轻松创建分页浏览的交互式界面。 jQuery UI的标签功能,通过简单的API调用和HTML结构,可以快速地将一组内容...

    一个jquery的tabs

    jQuery UI中的Tabs组件是一个强大的网页交互元素,它允许开发者创建功能丰富的标签页式界面。这个压缩包包含了实现jQuery Tabs所需的基本文件,包括`tabs.js`(核心插件脚本)、`core.js`(jQuery UI的核心库)以及`...

    JQueryUI,EasyUI一些控件的使用

    JQueryUI的Tabs组件允许开发者轻松实现这一功能,用户可以通过点击不同标签来切换内容区域。这种设计提高了页面的可读性和导航效率。 样式切换则是另一个提升用户体验的关键特性。JQueryUI提供了多种主题,如...

    jQuery UI组件 jQuery UI

    1. **Tabs(选项卡)**:jQuery UI 提供了方便的选项卡组件,可以将内容分隔成多个部分,通过选项卡切换显示,提高网页的组织性和用户体验。 2. **Accordion(手风琴)**:手风琴组件允许内容以折叠/展开的方式呈现...

    jquery-ui.css、jquery-ui.js下载

    《jQuery UI:深入理解与应用》 jQuery UI是基于JavaScript库jQuery的一个扩展,它提供了一系列丰富的用户界面组件,包括但不限于对话框(Dialogs)、日期选择器(Datepickers)、拖放功能(Drag and Drop)、排序...

    jquery ui & themes

    1. **部件(Widgets)**:jQuery UI提供了多种UI部件,如日期选择器(Datepicker)、对话框(Dialog)、滑块(Slider)、进度条(Progressbar)、标签页(Tabs)和下拉菜单(Selectmenu)等。这些部件都封装了复杂的...

    前端项目-jqueryui-touch-punch.zip

    在“前端项目-jqueryui-touch-punch”这个项目中,包含的文件可能是jQuery UI Touch Punch的源码或示例。通过解压并研究这个项目,你可以了解到如何将这两个工具结合到自己的Web应用中,以提供兼容触摸设备的用户...

    jQuery tabs 纵向显示

    在网页设计中,jQuery UI 的 tabs 是一个非常实用的功能,它允许我们将多个内容区域组织成可切换的选项卡,提供了一种整洁的方式来展示大量信息。然而,标准的 jQuery tabs 默认是横向排列的,但有时为了适应页面...

Global site tag (gtag.js) - Google Analytics