jqueryTools之tabs使用
jQueryTools的gzip压缩版本仅有5.8k，与web富客户端不同,它的功能侧重于信息展示和视觉效果,适合网站设计;与CSS分离,样式自己定义.
包含的工具列表：
- 选项卡功能(Tabs)
- 提示工具条功能(ToolTips)
- 信息滚动功能(Scrollable)
- 遮罩效果(overlay)
- 突出效果(expose)
- 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
|
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 //当滚动项被点击时，是否触发滚动操作（即滚动项是否滚动）
});
