JavaScript插件之Tab选项卡

闲来无事,研究了一下JavaScript插件的写法,今天就将自己写的一个小插件记录下来。
本文介绍了此款插件的基本用法,实现的功能以及代码。

首先,来看看最终效果:
eTab

这是一款普通的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
            });
3Tab.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);

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

友情提示:请尊重作者劳动成果,如需转载本博客文章请注明出处!谢谢合作!微笑

【作者:吴林  http://blog.csdn.NET/wulin

版权声明:本文为u010323023原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/u010323023/article/details/78523539

智能推荐

模拟按键 —— 鼠标

背景 之前写自动化脚本的时候总是遇到一些很尴尬的问题: 跑脚本时模拟鼠标按键时,光标是真实的跑到了那个位置的,也就是说跑脚本的时候会很影响电脑的正常使用,导致不得不开一个虚拟机专门跑。 另外因为光标只有一个所以很难实现多线程去同时操作多个窗口,当线程1 模拟鼠标但还没有结束时,线程2 已经开始执行模拟操作,这就导致了线程1 的模拟操作被终止了,被迫之下只能开多个虚拟机(但实在太占用性能🙄) 解决...

Hibernate学习总结(一)

一、Hibernate简介 一个持久层的ORM框架。ORM:Object Relational Mapping(对象关系映射)。指的是将一个Java中的对象与关系型数据库中的表建立一种映射关系,从而操作对象就可以操作数据库中的表。 二、Hibernate入门 1、创建一个项目,引入jar包 hibernate用到的jar包 2、创建表 3、创建实体类 4、创建映射(*****) 映射需要通过XML...

Linux系统NFS

文章目录 1. nfs简介 1.1 nfs特点 1.2 使用nfs的好处 1.3 nfs的体系组成 1.4 nfs的应用场景 2. nfs工作机制 2.1 RPC 2.2 NIS 2.3 nfs工作机制 3. exports文件的格式 4. nfs管理 5. 作业 5.1手动搭建一个nfs服务器 5.1.1开放/nfs/shared目录,供所有用户查阅资料 5.1.2 开放/nfs/upload目...

关于java中String,StringBuffer,StringBuilder的区别以及StringBuffer,StringBuilder的安全性问题

这里的结果就是正确的然后我们来看他的append方法 它在前边加了一个synchronized来修饰,相当于同时只能有一个线程来访问他,这样就不会产生上边的问题但同时他的效率也就比StringBuilder低,...

Django连接现有mysql数据库

1、打开cmd后cd到项目位置 2、建立项目 django-admin startproject test2 3、编辑项目中的配置文件, mysite/settings.py ,告诉Django你的数据库连接参数和数据库名。具体的说,要提供 DATABASE_NAME , DATABASE_ENGINE , DATAB...

猜你喜欢

ShareSDK新浪微博登录时报错error:redirect_uri_mismatch

今天用 ShareSDK 做第三方登录的时候碰到个问题,明明在微博平台的应用审核已经通过了,但是调用登录接口的时候一直报错,错误如下: 出现这个错误是因为在微博开放平台上没有设置回调地址,或者设置的回调地址与本地XML中的地址不一致。 在sharesdk.xml文件当中对于微博的设置: 其中RedirectUrl为设置的回调地址,这里的地址必须要与微博开发平台设置的地址相同,否则就会出现上面的错误...

python解析网络封包方法

2019独角兽企业重金招聘Python工程师标准>>> 在使用Python解析网络数据包时,使用网络字节序解析,参见下表。 C语言的数据类型和Python的数据类型对照表请参见下表。 接下来对封包与解包进行举例说明。 version type id content unsigned short unsigned short unsigned int unsigned int 封包...

python3:时间方法,异常处理,系统文件相关模块(os)

文章目录 时间方法 time模块 时间表示方法: time模块的方法 datetime模块 异常处理 触发异常 创建mydiv.py脚本,要求如下: 创建myerror.py脚本,要求如下: os模块 实现ls -R(os.walk) os.path pickle模块 记账脚本 时间方法 time模块 时间表示方法: 时间戳:自1970-1-1 0:00:00到某一时间点之间的秒数 UTC时间:世...

负载均衡群集——LVS+DR模型

一、实验组成 调度器 192.168.100:41 web1 192.168.100:42 web2 192.168.100.43 NFS共享服务器 192.168.100.44 二、实验拓扑 三、实验配置 3.1在调度器配置:192.168.100.41 配置虚拟IP地址(VIP) 调整/proc响应参数 对于 DR 群集模式来说,由于 LVS 负载调度器和各节点需要共用 VIP 地址,应该关闭...

adb无线连接时appium找不到设备

问题描述 以前使用USB连接真机,运行appium时一直正常,连接参数如下: 最近为了方便,使用adb无线连接真机,adb版本为1.0.40,真机安卓版本10,连接后,通过adb devices能够查看到连接的设备: adb无线连接是正常的,但每次运行时appium都找不到无线连接的设备,陷入重启adb循环: 解决流程 1.因为是没找到设备,所以在appium连接参数中增加了"udid&...