search

Home  >  Article  >  Web Front-end  >  jQuery web tab plug-in rTabs usage example analysis_jquery

jQuery web tab plug-in rTabs usage example analysis_jquery

WBOY
WBOYOriginal
2016-05-16 15:42:251520browse

The example in this article describes the usage of jQuery web tab plug-in rTabs. Share it with everyone for your reference. The details are as follows:

Here we introduce the usage of jQuery web tab plug-in rTabs. A total of 4 TAB tab styles are demonstrated. The first one: default style: auto-run, no animation effect, Hover event; the second one: auto-run, scroll up, TAB tab menu that supports Hover events; the third type: auto-run, fade in and out, tabs that support Hover events; the fourth type: auto-run, left scroll, click event web page tabs, choose the one you like Put it on your website.

Let’s take a look at the screenshots of the running effect:

The online demo address is as follows:

http://demo.jb51.net/js/2015/jquery-rTabs-web-tab-cha-codes/

The specific code is as follows: 

<!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>

I hope this article will be helpful to everyone’s jquery programming design.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：jQuery drop-down friendly link beautification effect code sharing_jqueryNext article：jQuery drop-down friendly link beautification effect code sharing_jquery

Related articles

See more