JavaScript插件Tab选项卡效果

日期：2020-05-11 栏目：程序人生浏览：次

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

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

首先，来看看最终效果：

这是一款普通的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>

转载注明出处：http://www.heiqu.com/1020.html

JavaScript插件Tab选项卡效果

相关推荐