最近的项目用到TAB效果的地方较多,于是自己稍微封装了下,写成了jQuery插件,方便以后使用,顺便重温下jQuery插件的实现机制。
在写插件之前对常见的TAB效果做了下总结,大体上也就那几种效果。插件力求简单易用,只要能实现常见的功能即可。
参数说明:
- event
- 触发TAB的事件类型,鼠标悬停:mouseover,鼠标点击:click,默认为mouseover。
- timeout
- 事件延迟,单位为毫秒,默认为0。
- auto
- 自动切换,单位为毫秒,默认为0。
- callback
- 回调函数,触发TAB时执行,函数的参数返回的是this。
HTML结构部分:
|
<div id="box">
<!-- TAB菜单部分 -->
<ul class="tab_menu">
<li class="current">新闻</li>
<li>图片</li>
<li>军事</li>
</ul>
<!-- TAB内容部分 -->
<div class="tab_box">
<div>新闻</div>
<div class="hide">图片</div>
<div class="hide">军事</div>
</div>
</div>
|
CSS样式部分:
<!--
.tab_menu{
list-style:none;
width:210px;
overflow:hidden;
}
.tab_menu li{
width:70px;height:30px;
line-height:30px;
float:left;
color:#fff;
background:#093;
text-align:center;
cursor:pointer;
}
.tab_menu li.current{
color:#333;
background:#fff;
} /*TAB菜单高亮样式*/
.tab_box{
padding:20px;
height:120px;
}
.tab_box .hide{
display:none;
} /*隐藏TAB内容部分*/
-->
调用插件
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.tabs.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#box').Tabs({
event:'mouseover', //事件类型
timeout:100, //设置事件延迟
auto:3000, //3秒自动切换一次
callback:null //回调函数
}); //返回了this
});
</script>
分享到:
相关推荐
使用jq写的关于tab切换的插件,使用面向对象组件化开发
jquery tab插件(共七个)在网上收集的各种tab插件
jquery tab插件制作多功能选项卡,鼠标滑过切换选项卡、鼠标点击切换选项卡、自动切换选项卡、支持数据回调功能,也可以与其他插件结合jquery.lazyload,制作选项卡切换图片延迟加载等
jQuery Tab插件 cleverTabs,用于在Tab中显示iframe
jQuery Tab插件附示例,jQuery Address早期插件,网页上的Tab 选项卡插件,其实选项卡和滑动门只是在操作方式的不同,滑动门是鼠标滑过时切换内容,选项卡是在鼠标单击时切换 ,本款是在鼠标单击TAB各个卡头时切换...
可以帮你做完美的tab,这里面总共3个tab插件,都是用jquery 技术
使用jquery的插件idTabs来实现Tab页效果,代码简单易用。
用Jquery完成了类似于extjs的tabpanel的功能,适合快速快发
jQuery Tab标签插件,让您可以方便的在页面中创建标签效果。
可多次使用的jQuery tab选项卡插件
jquery 图片延迟加载插件制作tab选项卡图片异步加载
这是一款基于bootstrap的选项卡。该选项卡的tab被设计在底部,通过简单的CSS代码来对其进行美化,效果非常不错。
jquery实现Tab菜单栏,动态效果,带样式,js文件等等。
jQuery tab选项卡切换插件和css3属性结合动画选项卡切.
jquery插件丰富,很多都是很好用的,最近学习了一下如何制作jquery插件,发现jquery插件制作其实很简单,这里介绍一下。
jquery tab######jquery tab插件######这个我写的第一个jquery插件,命名为jquery.tab。####用法://no jquery no works[removed][removed][removed][removed]$(document).ready(function(){ $(".tab").tab();});###...
这次我们同样要为大家介绍一款基于jQuery的Tab菜单插件,这款jQuery Tab插件非常简单,唯一的CSS渲染就在Tab菜单项的边框颜色。另外,这款Tab插件还可以同时实例化多个菜单实例,因此比较实用。