JavaScript插件Tab选项卡效果


Posted in Javascript onNovember 14, 2017

闲来无事,研究了一下JavaScript插件的写法,今天就将自己写的一个小插件记录下来。

本文介绍了此款插件的基本用法,实现的功能以及代码。

首先,来看看最终效果:

JavaScript插件Tab选项卡效果

这是一款普通的Tab选项卡插件,下面来讲讲它实现了哪些功能:

1、支持不同鼠标事件触发选项卡切换效果;
2、支持不同切换效果的配置,例如淡入淡出/直接切换;
3、支持默认展示第几个选项卡的配置;
4、支持选项卡的自动切换效果。

例子很简单,需要用到的知识包括:
1、html、css的基础知识;
2、对this,prototype,new等关键词的理解。

简而言之,就是通过参数配置的形式来完成不同效果的展示。

下面先看一看如何使用:

1、$(".js-tab").etab();
2、$(".js-tab").etab({
                triggerType: "click",
                effect: "fade",
                invoke: 2,
                auto: 3000
            });
3、Tab.init($(".js-tab"));

本插件支持几种不同的初始化方式,代码很简单,类似于BootStrap插件的使用方法。下面奉上完整的代码:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Tab选项卡</title>
 <link href="tab.css" rel="stylesheet">
 <style>
 * {
  margin:0;
  padding:0;
 }
 body {
  background-color: #323232;
  font-size:12px;
  font-family:微软雅黑;
  padding:100px;
 }
 ul, li {
  list-style-type: none;
 }
 </style>
 <script src="../lib/jquery-1.11.3.js"></script>
 <script type="text/javascript" src="tab.js"></script>
</head>
<body>
 <div class="js-tab tab">
 <ul class="tab-nav">
  <li class="active"><a href="#">新闻</a> </li>
  <li><a href="#">电影</a> </li>
  <li><a href="#">娱乐</a> </li>
  <li><a href="#">科技</a> </li>
 </ul>

 <div class="content-wrap">
  <div class="content-item current">
  <h3>新闻</h3>
  </div>
  <div class="content-item">
  <h3>电影</h3>
  </div>
  <div class="content-item">
  <h3>娱乐</h3>
  </div>
  <div class="content-item">
  <h3>科技</h3>
  </div>
 </div>
 </div>
 <script>
 $(function() {
//  Tab.init($(".js-tab"));
  $(".js-tab").etab({
  triggerType: "click",
  effect: "fade",
  invoke: 2,
  auto: 3000
  });
  $(".js-tab").etab();
 });
 </script>
</body>
</html>
.tab {
 width: 300px;
}

.tab .tab-nav {
 height: 30px;
}

.tab .tab-nav li {
 float: left;
 margin-right:5px;
 background-color:#767676;
 border-radius:3px 3px 0 0;
}

.tab .tab-nav li a{
 display:block;
 height:30px;
 padding:0 20px;
 color: white;
 line-height:30px;
 text-decoration: none;
}

.tab .tab-nav .active {
 background-color: #fff;

}

.tab .tab-nav .active a{
 color: #777;
}

.tab .content-wrap{
 background-color: white;
 padding:5px;
 height:200px
}

.tab .content-wrap .content-item {
 position:absolute;
 height: 200px;
 display: none;
}

.tab .content-wrap .current {
 height: 200px;
 display: block;
}

最后将插件代码列出来,在代码里面已经写了很详细的注释:

/**
 * Created by Wu.lin on 2017/11/12.
 */
(function($){

 var Tab = function(tab, _params) {
 var _this = this;

 //保存单个Tab组件
 this.tab = tab;

 this.params = _params;

 //默认配置参数
 this.config = {
  //用来定义鼠标的出发类型 "click"/mouseover
  "triggerType": "mouseover",

  //用来定义内容切换效果,直接切换/淡入淡出
  "effect": "default",

  //默认展示第几个Tab
  "invoke": "1",

  //用来定义Tab是否自动切换,当指定了事件间隔,就表示自动切换,并指定了切换间隔
  "auto": false
 };

 //如果配置参数存在,就扩展默认的配置参数
 if(this.params){
  $.extend(this.config, this.params);
 }

 //保存Tab标签列表,以及对应的内容列表
 this.tabItem = this.tab.find("ul.tab-nav li");
 this.contentItem = this.tab.find("div.content-wrap .content-item");

 //保存配置参数
 var config = this.config;

 if(config.triggerType === "click") {
  this.tabItem.bind(config.triggerType, function() {
  _this.invoke($(this));
  });

 } else {
  this.tabItem.mouseover(function(){
  _this.invoke($(this));
  });
 }

 //自动切换功能
 if(config.auto) {
  this.timmer = null;

  //计数器
  this.loop = 0;

  this.autoPlay();

  this.tab.hover(function() {
  window.clearInterval(_this.timmer);
  }, function() {
  _this.autoPlay();
  });
 }

 //设置默认显示第几个Tab
 if(config.invoke > 1) {
  this.invoke(this.tabItem.eq(config.invoke - 1));
 }


 };

 Tab.prototype = {

 //事件驱动函数
 invoke: function(currentTab) {

  /**
  * 1、执行Tab选中状态,当前选中Tab加上Active,
  * 2、切换对应Tab内容,根据配置参数effect参数default|fade
  */

  var index = currentTab.index();
  var conItem = this.contentItem;

  //Tab切换
  currentTab.addClass("active").siblings().removeClass("active");

  //内容区域切换
  var effect = this.config.effect;

  if(effect === "fade") {
  conItem.eq(index).fadeIn().siblings().fadeOut();
  } else {
  conItem.eq(index).addClass("current").siblings().removeClass("current");
  }

  //注意,如果配置了自动切换,记得把当前的loop值设置为当前的Tab的index
  if(this.config.auto) {
  this.loop = index;
  }
 },

 //自动间隔切换
 autoPlay: function() {

  var _this_ = this,
  tabItems = this.tabItem, //临时保存Tab列表
  tabLength = tabItems.size(),
  config = this.config;

  this.timmer = window.setInterval(function() {
  _this_.loop++;
  if(_this_.loop >= tabLength) {
   _this_.loop = 0;
  }

  tabItems.eq(_this_.loop).trigger(config.triggerType);
  }, config.auto);

 }
 };

 Tab.init = function(tabs) {
 var _this_ = this;
 tabs.each(function() {
  new _this_($(this));
 });
 // var tab = new Tab($(".js-tab").eq(0));
 };

 //注册成JQuery方法
 $.fn.extend({
 etab: function(_param) {
  this.each(function () {
  new Tab($(this), _param);
  });
  return this;
 }
 });

 window.Tab = Tab;

})(jQuery);

如此看来,是不是很简单,一起来动手试试吧!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 文字符串转换unicode编码函数
May 30 Javascript
javascript学习笔记(十二) RegExp类型介绍
Jun 20 Javascript
js实现当前输入框高亮显示的方法
Aug 19 Javascript
Javascript基础教程之比较null和undefined值
May 16 Javascript
jQuery实现简单的tab标签页效果
Sep 12 Javascript
js canvas实现放大镜查看图片功能
Jun 08 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
Jul 23 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
Jun 26 Javascript
JavaScript 面向对象基础简单示例
Oct 02 Javascript
js实现div色块拖动录制
Jan 16 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
Apr 10 Javascript
vue3.0实现插件封装
Dec 14 Vue.js
vue中如何创建多个ueditor实例教程
Nov 14 #Javascript
基于 Vue 实现一个酷炫的 menu插件
Nov 14 #Javascript
Node之简单的前后端交互(实例讲解)
Nov 14 #Javascript
Angular移动端页面input无法输入的解决方法
Nov 14 #Javascript
使用Vue-Router 2实现路由功能实例详解
Nov 14 #Javascript
JS 仿支付宝input文本输入框放大组件的实例
Nov 14 #Javascript
js实现数组内数据的上移和下移的实例
Nov 14 #Javascript
You might like
PHP分页显示制作详细讲解
2008/11/19 PHP
php实现的遍历文件夹下所有文件,编辑删除
2010/01/05 PHP
php方法调用模式与函数调用模式简例
2011/09/20 PHP
浅谈Eclipse PDT调试PHP程序
2014/06/09 PHP
php从字符串创建函数的方法
2015/03/16 PHP
浅谈Laravel队列实现原理解决问题记录
2017/08/19 PHP
PHP简单实现记录网站访问量功能示例
2018/06/06 PHP
详解PHP多个进程配合redis的有序集合实现大文件去重
2019/03/06 PHP
Ext 表单布局实例代码
2009/04/30 Javascript
Jquery时间轴特效(三种不同类型)
2015/11/02 Javascript
JS模拟简易滚动条效果代码(附demo源码)
2016/04/05 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
2016/06/03 Javascript
jquery 时间戳转日期过程详解
2019/10/12 jQuery
简单了解Vue computed属性及watch区别
2020/07/10 Javascript
JavaScript 中的六种循环方法
2021/01/06 Javascript
[01:04:14]VP vs TNC 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[00:52]玛尔斯技能全介绍
2019/03/06 DOTA
浅谈Python中列表生成式和生成器的区别
2015/08/03 Python
Python 专题五 列表基础知识(二维list排序、获取下标和处理txt文本实例)
2017/03/20 Python
python3读取MySQL-Front的MYSQL密码
2017/05/03 Python
基于MATLAB和Python实现MFCC特征参数提取
2019/08/13 Python
Django 后台带有字典的列表数据与页面js交互实例
2020/04/03 Python
Python通过yagmail实现发送邮件代码解析
2020/10/27 Python
python爬虫 requests-html的使用
2020/11/30 Python
CSS3实现超酷的黑猫警长首页
2016/04/26 HTML / CSS
Html5新特性用canvas标签画多条直线附效果截图
2014/06/30 HTML / CSS
时尚孕妇装:Ingrid & Isabel
2019/05/08 全球购物
环境工程求职简历的自我评价范文
2013/10/24 职场文书
程序员岗位职责
2013/11/11 职场文书
酒店保洁主管岗位职责
2013/11/28 职场文书
升旗仪式主持词
2014/03/19 职场文书
卖车协议书
2014/04/21 职场文书
领导干部个人对照检查材料(群众路线)
2014/09/26 职场文书
学校食品安全责任书
2015/01/29 职场文书
《合作意向书》怎么写?
2019/08/20 职场文书
Python-OpenCV教程之图像的位运算详解
2021/06/21 Python