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,超强推荐share.js
Dec 23 Javascript
Ajax+Json 级联菜单实现代码
Oct 27 Javascript
js replace 与replaceall实例用法详解
Aug 03 Javascript
javascript中不等于的代码是什么怎么写
Dec 29 Javascript
Javascript常用字符串判断函数代码分享
Dec 08 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
Dec 25 Javascript
vue登录注册及token验证实现代码
Dec 14 Javascript
Vuex 进阶之模块化组织详解
Jan 12 Javascript
web前端vue实现插值文本和输出原始html
Jan 19 Javascript
使用Vue如何写一个双向数据绑定(面试常见)
Apr 20 Javascript
微信小程序动画(Animation)的实现及执行步骤
Oct 28 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
Sep 07 Javascript
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代码(星期六,星期日总和)
2009/11/12 PHP
php 删除一个数组中的某个值.兼容多维数组!
2012/02/18 PHP
输入值/表单提交参数过滤有效防止sql注入的方法
2013/12/25 PHP
ThinkPHP中url隐藏入口文件后接收alipay传值的方法
2014/12/09 PHP
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
2013/11/13 Javascript
js事件监听器用法实例详解
2015/06/01 Javascript
基于jquery实现表格内容筛选功能实例解析
2016/05/09 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
2017/02/08 Javascript
vue 怎么创建组件及组件使用方法
2017/07/27 Javascript
基于Vue的ajax公共方法(详解)
2018/01/20 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
2018/05/31 Javascript
JavaScript Canvas实现验证码
2020/08/02 Javascript
JS实现的贪吃蛇游戏案例详解
2019/05/01 Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
2019/08/09 Javascript
axios异步提交表单数据的几种方法
2019/08/11 Javascript
JS常用跨域方法实现原理解析
2020/12/09 Javascript
Vue+Bootstrap实现简易学生管理系统
2021/02/09 Vue.js
[01:03:37]Secret vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
python中list列表的高级函数
2016/05/17 Python
Python中内置的日志模块logging用法详解
2016/07/12 Python
对Python中9种生成新对象的方法总结
2018/05/23 Python
Python开发最牛逼的IDE——pycharm
2018/08/01 Python
python实现RabbitMQ的消息队列的示例代码
2018/11/08 Python
python读写csv文件实例代码
2019/07/05 Python
python pandas 时间日期的处理实现
2019/07/30 Python
Django文件存储 自己定制存储系统解析
2019/08/02 Python
关于Python 中的时间处理包datetime和arrow的方法详解
2020/03/19 Python
css3 pointer-events 介绍详解
2017/09/18 HTML / CSS
英国最大的体育&时尚零售公司:JD Sports
2017/12/13 全球购物
Linux管理员面试经常问道的相关命令
2013/04/29 面试题
应届毕业生自荐书
2014/06/18 职场文书
2015年度党员个人总结
2015/02/14 职场文书
2016学雷锋优秀志愿者事迹材料
2016/02/25 职场文书
导游词之千岛湖
2019/09/23 职场文书
pytorch DataLoader的num_workers参数与设置大小详解
2021/05/28 Python
Window server中安装Redis的超详细教程
2021/11/17 Redis