jqueryTools之tabs使用

jQueryTools的gzip压缩版本仅有5.8k，与web富客户端不同,它的功能侧重于信息展示和视觉效果,适合网站设计;与CSS分离,样式自己定义.

包含的工具列表：

1. 选项卡功能(Tabs)
2. 提示工具条功能(ToolTips)
3. 信息滚动功能(Scrollable)
4. 遮罩效果(overlay)
5. 突出效果(expose)
6. Flash嵌入

一.引用

<!-- UI Tools: Tabs, Tooltip, Scrollable and Overlay (4.45 Kb) -->

<script src="http://cdn.jquerytools.org/1.2.7/tiny/jquery.tools.min.js"></script>

 

<!-- Form tools: Dateinput, Rangeinput and Validator. No jQuery library. ( Kb) -->

<script src="http://cdn.jquerytools.org/1.2.7/form/jquery.tools.min.js"></script>

 

<!-- ALL jQuery Tools. No jQuery library -->

<script src="http://cdn.jquerytools.org/1.2.7/all/jquery.tools.min.js"></script>

 

<!-- jQuery Library + UI Tools -->

<script src="http://cdn.jquerytools.org/1.2.7/jquery.tools.min.js"></script>

 

<!-- jQuery Library + ALL jQuery Tools -->

<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>

除了以上可选的外,还必须加载jquery库

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

二.使用

 例一:

HTML:

<!-- 定义选项卡按钮，注意最外层的class定义为tabs --> 
<ul class="tabs"> 
    <li><a href="#first">选项卡1</a></li> 
    <li><a href="#second">选项卡2</a></li> 
    <li><a href="#third">选项卡3</a></li> 
</ul> 
<!-- 定义选项卡切换的每个区域，注意最外层的class定义为panes --> 
<div class="panes"> 
    <div>第一个选项卡内容，<a href="#second">跳转至选项卡2</a></div> 
    <div>第二个选项卡内容，<a href="#third">跳转至选项卡3</a></div> 
    <div>第三个选项卡内容，<a href="#first">跳转至选项卡1</a></div> 
</div>

javascript:

$(function(){

    //ul.tabs区设为选项卡,用来控制div.panes区域中的每个div

    $("ul.tabs").tabs("div.panes>div",{history:true});

});

说明:

css样式定义时,注意一点:当前选项卡的class名为"current",默认tabs的标签是a,当然也可以是li

可设定选项卡锚点，通过链接在选项卡中切换

tabs中的参数{history: true}，使得选项卡与浏览器历史的前进后退关联在一起。不用的话可以不要这个参数。

例二:鼠标滑过时切换选项卡

$("ul.tabs").tabs("div.panes>div",{event:'mouseover'});

例三:创建折叠菜单效果

<div id="accordion"> 
    <h2>First pane</h2> 
    <div class="pane">... pane content1 ...</div>   <h2>Second pane</h2> 
    <div class="pane">... pane content2 ...</div>   <h2>Third pane</h2> 
    <div class="pane">... pane content3 ...</div> 
</div>

javascript:

//上面第一个效果的
$("#accordion").tabs("#accordion div.pane", { 
    tabs: 'h2',     //确定哪些区域为选项卡
    effect: 'slide'     //展开效果，slide为纵向滑动
});   //上面第二个效果的
$("#accordion").tabs("#accordion div", { 
    tabs: 'img',    //确定哪些区域为选项卡
    effect: 'horizontal'  //展开效果，horizontal为横向滑动
});

            tab总结:
          

属性名称	默认值	描述
current	'current'	样式:为当前tab的增加的class名称,注意与tabs属性同时使用
effect	'default'	特效:fade渐变显示 slide上下滑动 horizontal水平滑动
fadeInSpeed	200	渐变特效的速度
event	'click'	触发tab的事件:"mouseover","dbclick"
history	FALSE	类似前进与后退按钮,为true时回退到上次点击的tab
initialIndex	0	设置默认显示的tab
tabs	'a'	设置tab对应的标签元素，默认为"a"，这里也可以设为"li",该处相当于jquery的选择器
api	FALSE	设置当前tab所在容器的返回类型类型。如果为false(默认值)，以jquery对象返回；否则，以js对象返回。如果存在多个值，返回最后一个值。
onBeforeClick		在tab被点击之前调用的函数，如果该函数返回false,那么该tab不会被触发;返回的是一个tab对象，对于该对象的操作，参见tab相关方法；改返回函数有一个参数，为当前tab的索引
onClick		在tab被点击的时候调用的函数，其他用法同onBeforeClick
例子		current:'current',//为当前tab的增加的class名称，默认为current effect:"fade",//每个tab的panel内容显示方式为从整体逐渐显示 //effect:"slide",//点击tab的panel出现在当前tab的panel下面，并覆盖掉当前panel //effect:"horizontal",//当前tab的panel逐渐从右向左收缩并最终消失，点击panel的内容占据相应位置，比较适合水平导航 fadeInSpeed:1000,//设置panel显示的速度，设置该属性在effect置为fade时有效，默认值为200毫秒 event:"mouseover",//指定触发tab切换的事件，默认是单击鼠标，可选择的触发事件有"mouseover","dbclick" history:true,//类似javascript的history功能，默认为false,当用户点击浏览器的前进后后退按钮后，如果此处设置为true,那么就会回退到上次点击的tab，而不是跳转到其他页面去 initialIndex:1,//设置默认显示的tab tabs:"a",//设置tab对应的标签元素，默认为"a"，这里也可以设为"li",该处相当于jquery的选择器 api:false,//设置当前tab所在容器的返回类型类型。如果为false(默认值)，以jquery对象返回；否则，以js对象返回。如果存在多个值，返回最后一个值。 onBeforeClick:function( index){ //alert(this.getCurrentTab().text());//返回当前tab的名称 return true; },//在tab被点击之前调用的函数，如果该函数返回false,那么该tab不会被触发;返回的是一个tab对象，对于该对象的操作，参见tab相关方法；改返回函数有一个参数，为当前tab的索引 onClick:function(index){ return true; }//在tab被点击的时候调用的函数，其他用法同onBeforeClick

tab API:

方法	返回值	描述
getConf()		返回api的配置对象
getCurrentPane()		获取当前的panel
getCurrentTab()		获取当前tab
getIndex()		获取当前tab的index
getTabs()		获取所有的tab
getPanes()		获取所有的panel
next()		跳转到下一个tab
prev()		跳转到上一个tab
onBeforeClick()		同配置对象的BeforeClick,一个对象可以绑定多个Beforeclick事件
onClick()		//同配置对象的Click，一个对象可以绑定多个Beforeclick事件

使用例子:

var api=$("ul.tabs-t").tabs();//先通过获取tab容器获取tab
//api.next();//跳转到下一个tab
//api.click();
//alert(api.getConf().tabs);//返回api的配置对象，这里获取配置对象的tabs属性的值
api.getCurrentPane();//获取当前的panel
api.getCurrentTab();//获取当前tab
api.getIndex();//获取当前tab的index
//alert(api.getPanes());//获取所有的panel
//alert(api.getTabs());//获取所有的tab
api.prev();//跳转到上一个tab
api.onBeforeClick=function(){
return true;
}//同配置对象的BeforeClick,一个对象可以绑定多个Beforeclick事件
api.onClick=function(){
return true;
}//同配置对象的Click，一个对象可以绑定多个Beforeclick事件

下载Slideshow plugin 实现自动播放的tabs

$(".slidetabs").tabs(".images > div",

{ effect: 'fade', fadeOutSpeed: "slow", rotate: true //循环显示

}).slideshow({

autoplay: true, interval: 5000, clickable: false //当滚动项被点击时，是否触发滚动操作（即滚动项是否滚动）

});