谈谈对jquery ui tabs 的理解

jquery ui 点击此处下载,也可以去官网查看文档帮助。

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

相关推荐

  • jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)

    复制代码 代码如下: $(document).ready(function(){ $('#tabs').tabs({add:addEventHandler}); //给tabs块绑定addEventHandler事件 $('#newtabs').click(addTab); }) var tabCounter = 1; function addTab(){ if(tabCounter > 6){ alert('tabs can not more than 6!'); return; } $('<

  • jquery easyui的tabs使用时的问题

    大家也可以在jquery easyui来下载,或者去官网下载和查看文档帮助. 我最近也使用了一下jquery easyui里tabs,但是发现一个问题:如果你把tabs的div开始设置为display:none,然后写个function change(){$("#tabs").css("display","block")}来让tabs显示,当执行change()时,结果tabs显示不正常. 本来应该显示为: 结果显示为: 后来我不断尝试,发现如果

  • jQuery EasyUI 中文API Layout(Tabs)

    Tabs[标签] 创建一个tab标签 使用说明 使用到的头文件:easyui.css.icon.css.jquery-1.4.2.min.js.jquery.easyui.min.js html 复制代码 代码如下: <div id="tt" style="width:500px;height:250px;"> <div title="Tab1" style="padding:20px;display:none;&qu

  • jQuery EasyUI API 中文文档 - Tabs标签页/选项卡

    Tabs 标签页/选项卡 用$.fn.tabs.defaults重写defaults. 依赖 panel linkbutton 用法示例 创建tabs 1. 经由标记创建Tabs 从标记创建Tabs更容易,我们不需要写任何JavaScript代码.记住把 'easyui-tabs' 类添加到<div/>标记,每个tab panel 经由子<div/>标记被创建,其用法与Panel一样. 复制代码 代码如下: <div id="tt" class="

  • 谈谈对jquery ui tabs 的理解

    jquery ui 点击此处下载,也可以去官网查看文档帮助. 1 属性 1.11 ajaxOptions,当选项卡加载内容时,添加一个ajax选项.只有ajax时,添加的ajax选项才起作用.默认值为null.上面的例子中,添加了beforeSend和success两个选项.ajax还有一些选项请参考jquery ajax,这里不做详解... 1.12 初始化设置例:请注意,$('.selector')是tabs 的类名,在本例中.selector=#tabs,以后不再说明. $('.selec

  • 一步一步制作jquery插件Tabs实现过程

    tabs是现在网页应用最广的一种效果,jquery插件和非jquery插件也有不少,有一些朋友问我怎么用jquery.ui.tabs的ajax怎么只请求服务器一次原来我想其实很简单,看看官方的API就了解,不过我在回复这些朋友之前,用firebug查看了官方的ui.tabs发现,声明了ajax缓存,每点一个tabs时,仍然会有服务器请求这应该是服务器缓存,而不是实际上我们要求的只ajax一次,不再请求服务器了接下来我找了一下其它的tabs插件,基本上没有符合要求的,不是太庞大就是太简单,太过庞大

  • 关于jQuery UI 使用心得及技巧

    1 jQuery UI 2 为我所用 2.1 Tabs 2.2 Accordion 2.2.1 使用基本的Accordion 2.2.2 实现打开多个标签 2.2.3 Accordion的嵌套 3 给插件应用主题--Theme Roller 3.1 更改配色 3.2 更改图标 4 相关连接 jQuery UI 有时你仅仅是为了实现一个渐变的动画效果而不得不把javascrip 重新学习一遍然后书写大量代码.直到jQuery的出现,让开发人员从一大堆繁琐的js代码中解脱,取而代之几行jQuery代

  • jquery UI Datepicker时间控件的使用方法(加强版)

    先来看看Datepicker插件的属性表: 第一个日历插件的使用实例 首先导入需要的类库文件: <</SPAN>scripttype="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.7.1.min.js"></</SPAN>script> <</SPAN>scripttype="text/javas

  • 推荐10款最热门jQuery UI框架 原创

    1.国产jQuery UI框架 (jUI) DWZ DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架. 设计目标是简单实用,快速开发,降低ajax开发成本. 欢迎大家提出建议,我们将在下一版本中进一步调整和完善功能.共同推进国内整体ajax开发水平. 在线演示地址:http://j-ui.com http://runjs.cn/detail/x9c7d6qb 2.jQuery的界面插件 Ninja UI jQuer

  • 各种效果的jquery ui(接口)介绍

    基本的鼠标互动:拖拽(drag and dropping).排序(sorting).选择(selecting).缩放(resizing) 各种互动效果:手风琴式的折叠菜单(accordions).日历(date pickers).对话框(dialogs).滑动条(sliders).表格排序(table sorters).页签(tabs).放大镜效果(magnifier).阴影效果(shadow) 第一部分:鼠标交互1.1 Draggables:拖拽所需文件:ui.mouse.jsui.dragg

  • jQuery ui 1.7更新小结

    1. 每个ui插件现在都有自己单独的css文件,但是要根据情况与ui.theme.css ui.core.css结合使用,否则有些效果还是显示不出来的. eg. datepicker就必须同时引用上述两个css文件:accordion 只须引入ui.theme.css即可.这个我会把每个插件独立的demo放在我的资源里边的. 2. ui.accordion HTML 代码要遵循一定的格式要求: 复制代码 代码如下: <ul id="example">         <

  • jQuery UI结合Ajax创建可定制的Web界面

    如今,网站比以往更具可定制性,允许用户更改其空间,根据自己的喜好对其进行个性化.个性化的主页或仪表板页面(例如 iGoogle.MyYahoo! 和 MyAOL)日渐普及,大多数 Web 应用程序内甚至也整合了类似的功能.jQuery 库简化了此类复杂 JavaScript 交互的编写,随着 jQuery UI 的引入,这项功能得到了进一步的简化,该库以易于访问的 jQuery 插件的形式提供了常用用户界面类型. 本文介绍了如何利用 Ajax 和 jQuery UI 创建具有各种定制功能的高度可

  • jQuery UI 应用不同Theme的办法

    一开始,我准备去动手,自己修改CSS文件.这被证明是个非常费力不讨好的事情. 有一次在jQuery UI的主页[http://jqueryui.com/home]停留的时候,一个单词很快吸引了我的注意:[themeable],这不就是"可变主题的"的意思吗?于是我进入到[http://jqueryui.com/themeroller/]这里,发现了下图的这个地方,他们官网的人把主题的更换叫做"主题滚轮"(哈哈哈,翻译水平一般,信达雅也不知道满足了多少). 第一个TA

  • jquery ui 实现 tab标签功能示例【测试可用】

    本文实例讲述了jquery ui 实现 tab标签功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <title>www.jb51.net tab切换</title> <style type="text/css"> #tabs{ width:500px; height:500px; margin:0 auto; } .ui-widget-header{ border

随机推荐