jQuery网页选项卡插件rTabs用法实例分析

本文实例讲述了jQuery网页选项卡插件rTabs用法。分享给大家供大家参考。具体如下：
这里介绍jQuery网页选项卡插件rTabs用法，一共演示了4种TAB选项卡样式，第一种：默认样式：自动运行、无动画效果、Hover事件；第二种：自动运行、向上滚动、支持Hover事件的TAB选项卡菜单；第三种：自动运行、渐入淡出、支持Hover事件的选项卡；第四种：自动运行、向左滚动、点击事件的网页选项卡，选一个你喜欢的放在你的网站吧。
先来看看运行效果截图：

在线演示地址如下：
http://demo.jb51.net/js/2015/jquery-rTabs-web-tab-cha-codes/
具体代码如下：

<！DOCTYPE html><html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jQuery - rTabs选项卡插件</title><head><script id="jquery_172" type="text/javascript" class="library" src="jquery-1.6.2.min.js"></script><script type="text/javascript">（function（$）{ $.fn.rTabs = function（options）{//默认值var defaultVal = {btnClass:".j-tab-nav", /*按钮的父级Class*/conClass:".j-tab-con", /*内容的父级Class*/bind:"hover", /*事件参数 click,hover*/animation:"0", /*动画方向 left,up,fadein,0 为无动画*/speed:300,/*动画运动速度*/delay:200, /*Tab延迟速度*/auto:true, /*是否开启自动运行 true,false*/autoSpeed:3000 /*自动运行速度*/};//全局变量var obj = $.extend（defaultVal, options）,evt = obj.bind,btn = $（this）.find（obj.btnClass）,con = $（this）.find（obj.conClass）,anim = obj.animation,conWidth = con.width（）,conHeight = con.height（）,len = con.children（）.length,sw = len * conWidth,sh = len * conHeight,i = 0,len,t,timer;return this.each（function（）{//判断动画方向function judgeAnim（）{ var w = i * conWidth, h = i * conHeight;btn.children（）.removeClass（"current"）.eq（i）.addClass（"current"）; switch（anim）{ case "0": con.children（）.hide（）.eq（i）.show（）; break; case "left": con.css（{position:"absolute",width:sw}）.children（）.css（{float:"left",display:"block"}）.end（）.stop（）.animate（{left:-w},obj.speed）; break; case "up": con.css（{position:"absolute",height:sh}）.children（）.css（{display:"block"}）.end（）.stop（）.animate（{top:-h},obj.speed）; break; case "fadein": con.children（）.hide（）.eq（i）.fadeIn（）; break; }}//判断事件类型if（evt == "hover"）{ btn.children（）.hover（function（）{var j = $（this）.index（）;function s（）{i = j;judgeAnim（）;}timer=setTimeout（s,obj.delay）;}, function（）{ clearTimeout（timer）;}） }else{btn.children（）.bind（evt,function（）{ i = $（this）.index（）; judgeAnim（）;}） } //自动运行 function startRun（）{t = setInterval（function（）{ i++; if（i>=len）{switch（anim）{ case "left": con.stop（）.css（{left:conWidth}）; break; case "up": con.stop（）.css（{top:conHeight}）;} i=0; } judgeAnim（）;},obj.autoSpeed） } //如果自动运行开启，调用自动运行函数 if（obj.auto）{$（this）.hover（function（）{ clearInterval（t）;},function（）{ startRun（）;}）startRun（）; }}） }}）（jQuery）;</script><script type="text/javascript"> $（function（） {$（"#tab"）.rTabs（）;$（"#tab2"）.rTabs（{ bind : "click", animation : "left"}）;$（"#tab3"）.rTabs（{ bind : "hover", animation : "up"}）;$（"#tab4"）.rTabs（{ bind : "hover", animation : "fadein"}）; }）</script><style>body{background:#fff;}h2{width: 400px;margin: 0 auto 10px auto;font-size: 18px;font-family: "微软雅黑";color: #333;}.tab{position: relative;width: 400px;height: 230px;overflow: hidden;margin: 0 auto 20px auto;font-family: Arial;}.tab-nav{height: 30px;overflow: hidden;background: #f5f5f5;}.tab-nav a{display: block;float: left;width: 80px;height: 30px;line-height: 30px;text-align: center;text-decoration: none;color: #999;}.tab-nav a.current{background: #80b600;color: #fff;}.tab-con{position: relative;width: 400px;height: 200px;overflow: hidden;background: #80b600;}.tab-con-item{display: none;width: 400px;height: 180px;line-height: 180px;text-align: center;color: #fff;}</style></head><body><h1>如果初次打开网页运行有错误看不到效果，请按F5或刷新网页重新载入即可。</h1></br><h2>默认样式：自动运行、无动画效果、Hover事件</h2><div class="tab" id="tab"> <div class="tab-nav j-tab-nav"><a href="javascript:void（0）;" class="current">Tab1</a><a href="javascript:void（0）;">Tab2</a><a href="javascript:void（0）;">Tab3</a><a href="javascript:void（0）;">Tab4</a><a href="javascript:void（0）;">Tab5</a> </div> <div class="tab-con"><div class="j-tab-con"> <div class="tab-con-item" style="display:block;">111111</div> <div class="tab-con-item">222222</div> <div class="tab-con-item">333333</div> <div class="tab-con-item">444444</div> <div class="tab-con-item">555555</div> </div></div> </div><h2>自动运行、向左滚动、点击事件</h2><div class="tab" id="tab2"> <div class="tab-nav j-tab-nav"><a href="javascript:void（0）;" class="current">Tab1</a><a href="javascript:void（0）;">Tab2</a><a href="javascript:void（0）;">Tab3</a><a href="javascript:void（0）;">Tab4</a><a href="javascript:void（0）;">Tab5</a> </div><div class="tab-con"><div class="j-tab-con"><div class="tab-con-item" style="display:block;">111111</div><div class="tab-con-item">222222</div><div class="tab-con-item">333333</div><div class="tab-con-item">444444</div><div class="tab-con-item">555555</div></div></div></div><h2>自动运行、向上滚动、Hover事件</h2> <div class="tab" id="tab3"><div class="tab-nav j-tab-nav"> <a href="javascript:void（0）;" class="current">Tab1</a> <a href="javascript:void（0）;">Tab2</a> <a href="javascript:void（0）;">Tab3</a> <a href="javascript:void（0）;">Tab4</a> <a href="javascript:void（0）;">Tab5</a></div> <div class="tab-con"><div class="j-tab-con"> <div class="tab-con-item" style="display:block;">111111</div> <div class="tab-con-item">222222</div> <div class="tab-con-item">333333</div> <div class="tab-con-item">444444</div> <div class="tab-con-item">555555</div> </div> </div></div><h2>自动运行、渐入、Hover事件</h2><div class="tab" id="tab4"> <div class="tab-nav j-tab-nav"><a href="javascript:void（0）;" class="current">Tab1</a><a href="javascript:void（0）;">Tab2</a><a href="javascript:void（0）;">Tab3</a><a href="javascript:void（0）;">Tab4</a><a href="javascript:void（0）;">Tab5</a> </div> <div class="tab-con"><div class="j-tab-con"><div class="tab-con-item" style="display:block;">111111</div><div class="tab-con-item">222222</div><div class="tab-con-item">333333</div><div class="tab-con-item">444444</div><div class="tab-con-item">555555</div> </div></div> </div></body></html>

希望本文所述对大家的jquery程序设计有所帮助。