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 相关文章推荐
javascript arguments 传递给函数的隐含参数
Aug 21 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
Sep 26 Javascript
Kibo 用于处理键盘事件的Javascript工具库
Oct 28 Javascript
js 使用form表单select类实现级联菜单效果
Dec 19 Javascript
Seajs的学习笔记
Mar 04 Javascript
用js一次改变多个input的readonly属性值的方法
Jun 11 Javascript
js利用正则表达式检验输入内容是否为网址
Jul 05 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
Oct 12 Javascript
鼠标经过出现气泡框的简单实例
Mar 17 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
Jul 06 Javascript
浅谈如何使用webpack构建多页面应用
May 30 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
Apr 26 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版快速排序、冒泡排序
2014/04/09 PHP
php技术实现加载字体并保存成图片
2015/07/27 PHP
PHP如何通过date() 函数格式化显示时间
2020/11/13 PHP
jquery URL参数判断,确定菜单样式
2010/05/31 Javascript
js跑马灯代码(自写)
2013/04/17 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
2014/05/11 Javascript
JS构造函数与原型prototype的区别介绍
2016/07/04 Javascript
javascript 解决浏览器不支持的问题
2016/09/24 Javascript
Node.js之网络通讯模块实现浅析
2017/04/01 Javascript
js实现随机数字字母验证码
2017/06/19 Javascript
基于vue 动态加载图片src的解决方法
2018/02/05 Javascript
layui select动态添加option的实例
2018/03/07 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
2019/01/09 Javascript
python实现去除下载电影和电视剧文件名中的多余字符的方法
2014/09/23 Python
Python3读取UTF-8文件及统计文件行数的方法
2015/05/22 Python
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
Django Highcharts制作图表
2016/08/27 Python
利用Python进行异常值分析实例代码
2017/12/07 Python
PyQt5每天必学之关闭窗口
2018/04/19 Python
python 实现倒排索引的方法
2018/12/25 Python
Python3.5运算符操作实例详解
2019/04/25 Python
python 异步async库的使用说明
2020/05/04 Python
Python使用jpype模块调用jar包过程解析
2020/07/29 Python
python 动态绘制爱心的示例
2020/09/27 Python
使用python将微信image下.dat文件解密为.png的方法
2020/11/30 Python
利用CSS3的3D效果制作正方体
2020/03/10 HTML / CSS
荟萃全球保健品:维他购
2018/05/09 全球购物
英国露营设备和户外服装购物网站:Simply Hike
2019/05/05 全球购物
成人大专生实习期的自我评价
2013/10/02 职场文书
关爱女孩行动实施方案
2014/03/13 职场文书
2014年安全生产大检查方案
2014/05/13 职场文书
影视广告专业求职信
2014/09/02 职场文书
会计岗位职责
2015/02/03 职场文书
复兴之路纪录片观后感
2015/06/02 职场文书
如何写一份具有法律效力的借款协议书?
2019/07/02 职场文书
MySQL数据库安装方法与图形化管理工具介绍
2022/05/30 MySQL