从零开始学习jQuery (十) jQueryUI常用功能实战(6)

 

2.再折叠tab

3.鼠标滑动即切换的tab

 

2.要点讲解 (1) 注意Tabs中的HTML结构.

使用ul构建标签. 内容div一定要和标签关联, 没有关联的div将不被处理直接显示.

(2) 使用Ajax可以不指定内容容器, 但是也可以将Ajax内容放入指定容器中.<li><a href="hello/world.html" title="Todo Overview"> ... </a></li> <div id="Todo_Overview"> ... </div> (3)  活用事件

tab有很多事件:

select, load, show, add, remove, enable, disable

使用这些事件可以完成很多复杂任务. 需要注意事件的签名:

$('#example').bind('tabsselect', function(event, ui) { // Objects available in the function context: ui.tab // anchor element of the selected (clicked) tab ui.panel // element, that contains the selected/clicked tab contents ui.index // zero-based index of the selected (clicked) tab });

第一个是事件对象, 第二个ui对象是传递的额外参数, 我们可以获取tab对象, tab所在容器和tab的索引值.