谈谈对jquery ui tabs 的理解

2020-05-29 07:15:50易采站长站整理

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…