jQueryTools Tab页使用方法

HTML代码

  
   
   

    
    
    
Tab 1

    
    
    
Tab 2

    
    
    
Tab 3

  
   
   
 
  
  
   
   

    
    
    
    
    

     
     pane 1 content
    
    
    
    
    
    
    

     
     pane 2 content
    
    
    
    
    
    
    

     
     pane 3 content
    
    
    
    
  
   
   

JavaScript代码

$("ul.tabs").tabs("div.panes > div",{tabs: 'li', current: 'active'});

最终效果图


Tab tool属性列表

属性	默认值	说明
current	'current'	当前激活的TAB按钮CSS样式
effect	'default'	TAB页切换效果，各种效果如下： 'default': 直接隐藏或显示. 'fade': 按透明度渐隐渐显. 'ajax':使用AJAX读取远程内容到TAB页. 'slide': 垂直滑动. 'horizontal': 水平滑动.
event	'click'	TAB切换条件，支持'click'单击，'mouseover'鼠标悬停和'dblclick'双击.
fadeInSpeed	200	TAB页切换效果为'fade'时适用，显示速度
fadeOutSpeed	0	同上，隐藏速度
history	false	使浏览器的后退按钮显示上一个TAB页
initialIndex	0	初始化时激活的TAB页
rotate	false	当使用API调用next()显示下一个TAB页时，如果当前TAB页处于末尾，是否自动跳转到起始TAB页。
tabs	'a'	TAB按钮