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模式窗口中下载文件无法接收iframe的流
Oct 11 Javascript
一个网页标题title的闪动提示效果实现思路
Mar 22 Javascript
基于jQuery实现文本框缩放以及上下移动功能
Nov 24 Javascript
js跨域请求数据的3种常用的方法
Dec 01 Javascript
常用原生js自定义函数总结
Nov 20 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
Dec 21 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
Jun 04 Javascript
Node.js动手撸一个静态资源服务器的方法
Mar 09 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
Mar 08 Javascript
vue实现购物车列表
Jun 30 Javascript
vue实现移动端返回顶部
Oct 12 Javascript
微信小程序自定义底部弹出框动画
Nov 18 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使用in_array函数检查数组中是否存在某个值
2015/03/25 PHP
PHP+shell脚本操作Memcached和Apache Status的实例分享
2016/03/11 PHP
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
2010/06/30 Javascript
ExtJs事件机制基本代码模型和流程解析
2010/10/24 Javascript
如何正确使用Nodejs 的 c++ module 链接到 OpenSSL
2014/08/03 NodeJs
用Jquery.load载入页面后样式没了页面混乱的解决方法
2014/10/20 Javascript
Javscript调用iframe框架页面中函数的方法
2014/11/01 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
2015/08/12 Javascript
Javascript 两种刷新方法以及区别和适用范围
2017/01/17 Javascript
angular 组件通信的几种实现方式
2018/07/13 Javascript
Vue引入Stylus知识点总结
2020/01/16 Javascript
在vue中获取wangeditor的html和text的操作
2020/10/23 Javascript
python自动化测试之连接几组测试包实例
2014/09/28 Python
python实现画一颗树和一片森林
2018/06/25 Python
Python使用pickle模块储存对象操作示例
2018/08/15 Python
python调用百度语音REST API
2018/08/30 Python
详解python分布式进程
2018/10/08 Python
在Mac上删除自己安装的Python方法
2018/10/29 Python
python如何实现从视频中提取每秒图片
2020/10/22 Python
详解django实现自定义manage命令的扩展
2019/08/13 Python
快速解决docker-py api版本不兼容的问题
2019/08/30 Python
softmax及python实现过程解析
2019/09/30 Python
Python应用实现双指数函数及拟合代码实例
2020/06/19 Python
英国可持续奢侈品包包品牌:Elvis & Kresse
2018/08/05 全球购物
.NET remoting中对象激活的两种方式
2015/06/08 面试题
教师旷工检讨书
2014/01/18 职场文书
大一学生的职业生涯规划书范文
2014/01/19 职场文书
企业总经理职责
2014/02/02 职场文书
市场营销个人求职信范文
2014/02/02 职场文书
2014全国两会心得体会
2014/03/17 职场文书
国际会计专业求职信
2014/08/04 职场文书
房产协议书范本
2014/10/18 职场文书
结婚老公保证书
2015/02/26 职场文书
2015年保险公司工作总结
2015/04/24 职场文书
学生病假条范文
2015/08/17 职场文书
使用 Koa + TS + ESLlint 搭建node服务器的过程详解
2022/05/30 NodeJs