JavaScript插件之Tab选项卡

最新推荐文章于 2023-04-11 23:23:07 发布
最新推荐文章于 2023-04-11 23:23:07 发布
阅读量1.2k 收藏 1
点赞数 2
分类专栏： 前端 文章标签： javascript 插件 面向对象 Tab选项卡
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010323023/article/details/78523539
版权

闲来无事，研究了一下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
            });
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);

如此看来，是不是很简单，一起来动手试试吧！

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

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

吴林
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
数据绑定回调函数；图标数据绑定暴露变量如果是函数，注意名称要避开“事件处理”中的函数名，比如onClick()，会发生冲突，导致回写到事件处理中导致意想不到的异常；
IOTOS的博客
09-29 153
数据绑定回调函数；图标数据绑定暴露变量如果是函数，注意名称要避开“事件处理”中的函数名，比如onClick()，会发生冲突，导致回写到事件处理中导致意想不到的异常；
JavaScript插件Tab选项卡效果
11-27
闲来无事，研究了一下JavaScript插件的写法，今天就将自己写的一个小插件记录下来。 本文介绍了此款插件的基本用法，实现的功能以及代码。 首先，来看看最终效果： 这是一款普通的Tab选项卡插件，下面来讲讲它实现了哪些功能： 1、支持不同鼠标事件触发选项卡切换效果； 2、支持不同切换效果的配置，例如淡入淡出/直接切换； 3、支持默认展示第几个选项卡的配置； 4、支持选项卡的自动切换效果。 例子很简单，需要用到的知识包括： 1、html、css的基础知识； 2、对this，prototype，new等关键词的理解。 简而言之，就是通过参数配置的形式来完成不同效果的展示。 下
HTML5相关知识学习（第七篇）
weixin_45691018的博客
07-27 99
目录 列表 一.无序列表 二.有序列表 三.自定义列表 表单 一.表单域 method中get/post的区别 二.表单元素 2.1 input输入表单元素 2.2 select下拉表单元素 2.3 textarea表单元素 列表 列表主要用来布局页面，可以使页表更加自由和方便。可以分为无序列表、有序列表和自定义列表三种，适用于不同的情况。 一.无序列表 顾名思义无序列表指列表内部排列是无序的，不存在优先级的概念。 如图是无序列表的一个案例，各个新闻之间并无顺序 ...
JavaScript编程实现tab选项卡切换的效果+1
Purpleendurer@CSDN
04-11 1987
网页中的tab选项卡切换效果一般是使用和匹配来实现的。如果在中嵌套了，和的匹配关系可能就会被打乱，这样显示时就可能出现问题。
JS tab栏切换
每天一个前端小知识~
08-28 4965
问题： 当我们点击下面相应的选项时，选项背景颜色和内容会跟随变化 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>tab切换</title> <style> * { margin: 0; padding: 0; } li { list-style-type: none; }
js自定义属性的操作以及相关案例
码云仓库地址：https://gitee.com/lance-gyq
01-09 1739
自定义属性的操作 1.获取属性值 element.属性 获取属性值 element.getAttribute(‘属性’); <body> <div id="demo" index="1"></div> <script> var div = document.querySelector('div'); //1.获取元素的属性值 //(1)element.属性 console.log(d
原生JS项目练习——tab选项卡功能
周百万的博客
10-13 1400
一、主要功能介绍：1、写UI结构2、获取元素3、for循环遍历数组，给每一个li添加一个index属性并赋值。（原因等会会总结）4、绑定鼠标的mousemove事件，鼠标移到某个模块，将该模块变色，换上相应的图片5、当鼠标离开li的时候，就让当前li的背景颜色改变为原来的颜色,图片隐藏6、鼠标离开ul的时候，将li模块和图片恢复到刚开始的样子7、主要实现tab栏的来回切换操作原生JS好，前端学的才是真的好，对以后的发展有很大的作用。
JS案例练习（pink老师经典案例）
shenruiaaa的博客
03-02 2000
1. 翻转任意数组 function Change() { var newArr = []; for (var i = arguments.length - 1; i >= 0; i--) { newArr[newArr.length] = arguments[i] } return newArr; } console.log(Change(
JavaScript tab选项卡插件实例代码
01-19
今天，先从最简单的开始，将已有的一个Tab选项卡切换功能改写成javascript插件形式。 原生函数写法 将一个javascript方法改写为js插件最简单的方式就是将这个方法挂载到window全局对象下面 我们先来看看最原始的使用...
javascript+css 新闻显示tab 选项卡效果
10-30
跟新浪的比较像啊，tab切换效果，门户类网站用过的，大家可以看看。
JavaScript实现Tab选项卡切换
12-28
本文实例为大家分享了js实现选项卡切换的具体代码，供大家参考，具体内容如下 会用到原生js的dom操作 html <body> <div id=tab> <div id=tab_header> <ul> <li class=seclect>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> <div id=tab_body> <div class=dom xss=removed> <ul> <li>1</li> <l
纯js实现tab栏的切换
weixin_46500485的博客
08-31 215
纯js实现tab栏的切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .tab
JS实现选项卡功能
weixin_46389377的博客
08-26 1396
我来说一下怎么用js来实现选项卡功能。首先，核心思路是用排他思想，所谓排他思想就是让你想要变化的所有元素（包括自己）和样式都都为空，这样说可能不好理解，举个例子： 有五个按钮，我想让每点击一个按钮，这个按钮就会变成红色，代码可以这样写 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=de
JS基础-Tab栏切换案例
qq_43781887的博客
04-16 388
需要达到的效果： 点击上面的模块下面的文字就对应显示。 思路： 整体分成两个部分，第一个部分是点击上面的item点击哪一个对应哪一个就有被点击的效果，这个阔以通过排他思想来写，排他思想还没搞明白的阔以看看我这篇博客：JS基础-排他思想案例_setTimeout()的博客-CSDN博客 第二个部分就是点击上面的item对应下面的内容显示出来，这个通过自定义属性来实现，这里我是给上面和下面都设定了自定义属性。完整代码如下： <!DOCTYPE html> <html lang=".
JQuery实现tab选项卡小练习
sky_to_heaven的博客
08-01 146
代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } li { list-styl
jQuery的简单tab栏切换，商品详情评价的切换
weixin_62273193的博客
12-21 394
实现思路 给tab li选项绑定点击事件 给点击的对象加 类名，其他的兄弟移除掉类名 获取当前点击的对象的索引 通过索引找到对应的内容栏让让显示出来，其他的兄弟隐藏
tab标签点击切换不同内容js2种实现方式：利用隐藏条件tabs[i] items[i] 一 一对应顺序相同实现、利用setAttribute/getAttribute实现
*
01-01 586
1）优化实现:利用隐藏条件实现 js代码： tab优化版： 找到所有标签:tabs 找到所有内容:items 点击当前标签tabs[i]时: 3.1 先把所有tabs样式类为置空，再把当前tab样式类名置为current 即:所有tabs[i].style.className=’’,再把当前tabs[i].className=‘current’, 3.2 同时:找到对应itemsi： 置item[i].style.display=‘block’,其它置none // 先 找到所有标签元素 va.
JSTab栏选项卡
qq_62521480的博客
05-12 155
编程实现：当鼠标点击上面相应的选项卡时。下面内容跟随变化。 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edg
JavaScript TAB栏切换效果
火星基地
10-24 372
代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title
html 实现tab选项卡
最新发布
06-06
可以使用 HTML、CSS 和 JavaScript 实现选项卡效果。以下是一个简单的实现示例： HTML 代码： ```html <div class="tab"> <button class="tablinks" onclick="openTab(event, 'tab1')">Tab 1 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值