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


Posted in Javascript onAugust 26, 2015

本文实例讲述了jQuery网页选项卡插件rTabs用法。分享给大家供大家参考。具体如下:

这里介绍jQuery网页选项卡插件rTabs用法,一共演示了4种TAB选项卡样式,第一种:默认样式:自动运行、无动画效果、Hover事件;第二种:自动运行、向上滚动、支持Hover事件的TAB选项卡菜单;第三种:自动运行、渐入淡出、支持Hover事件的选项卡;第四种:自动运行、向左滚动、点击事件的网页选项卡,选一个你喜欢的放在你的网站吧。

先来看看运行效果截图:

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

在线演示地址如下:

具体代码如下:

<!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程序设计有所帮助。

Javascript 相关文章推荐
Javascript 跨域访问解决方案
Feb 14 Javascript
JavaScript OOP类与继承
Nov 15 Javascript
javascript函数定义的几种区别小结
Jan 06 Javascript
js判断上传文件类型判断FileUpload文件类型代码
May 20 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
Apr 10 Javascript
TypeOf这些知识点你了解吗
Feb 21 Javascript
利用bootstrapValidator验证UEditor
Sep 14 Javascript
js实现的光标位置工具函数示例
Oct 03 Javascript
Angular的自定义指令以及实例
Dec 26 Javascript
Vue.js系列之项目搭建(1)
Jan 03 Javascript
jqgrid实现简单的单行编辑功能
Sep 30 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
Oct 01 Javascript
jQuery实现带滑动条的菜单效果代码
Aug 26 #Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
Aug 26 #Javascript
js鼠标点击图片切换效果代码分享
Aug 26 #Javascript
jQuery实现的网页竖向菜单效果代码
Aug 26 #Javascript
javascript中的五种基本数据类型
Aug 26 #Javascript
js控制多图左右滚动切换效果代码分享
Aug 26 #Javascript
简介alert()与console.log()的不同
Aug 26 #Javascript
You might like
php 无限级数据JSON格式及JS解析
2010/07/17 PHP
解析php session_set_save_handler 函数的用法(mysql)
2013/06/29 PHP
php把大写命名转换成下划线分割命名
2015/04/27 PHP
PHP使用mysqli同时执行多条sql查询语句的实例
2019/03/22 PHP
php正则表达式使用方法整理集合
2020/01/31 PHP
使用jquery给input和textarea设定ie中的focus
2008/05/29 Javascript
动态刷新 dorado树的js代码
2009/06/12 Javascript
利用WebBrowser彻底解决Web打印问题(包括后台打印)
2009/06/22 Javascript
Node.js 制作实时多人游戏框架
2015/01/08 Javascript
javascript中的Function.prototye.bind
2015/06/25 Javascript
javascript伸缩型菜单实现代码
2015/11/16 Javascript
全面解析Bootstrap排版使用方法(标题)
2015/11/30 Javascript
Bootstrap3.0学习教程之JS折叠插件
2016/05/27 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
2016/09/21 Javascript
js前端实现图片懒加载(lazyload)的两种方式
2017/04/24 Javascript
Javascript 一些需要注意的细节(必看篇)
2017/07/08 Javascript
jquery实现楼层滚动效果
2018/01/01 jQuery
如何能分清npm cnpm npx nvm
2019/01/17 Javascript
详解Vue中watch对象内属性的方法
2019/02/01 Javascript
原生js实现获取form表单数据代码实例
2019/03/27 Javascript
Python中return语句用法实例分析
2015/08/04 Python
python3+dlib实现人脸识别和情绪分析
2018/04/21 Python
调用其他python脚本文件里面的类和方法过程解析
2019/11/15 Python
如何查看Django ORM执行的SQL语句的实现
2020/04/20 Python
CSS3实现渐变背景兼容问题
2020/05/06 HTML / CSS
网络工程师面试(三木通信技术有限公司)
2013/06/05 面试题
大一新生学期自我评价
2014/04/09 职场文书
转让协议书范本
2014/04/15 职场文书
青年安全生产示范岗事迹材料
2014/05/04 职场文书
重大事项社会稳定风险评估方案
2014/06/15 职场文书
公司领导班子四风对照检查材料
2014/09/27 职场文书
不听老师话的万能检讨书
2014/10/04 职场文书
先进事迹材料范文
2014/12/29 职场文书
行政撤诉申请书
2015/05/18 职场文书
幼儿园体操比赛口号
2015/12/25 职场文书
JavaScript最完整的深浅拷贝实现方式详解
2022/02/28 Javascript