封装jQuery插件实现TAB切换

先上效果图：

直接上代码：

index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>demo</title>

    <script src='jquery.js'></script>

    <script src='tab.js'></script>

    <style>

        *{margin:0px;padding:0px;background-color: #757575}

        .tab{margin-left: 100px;margin-top: 100px;height: 250px;}

        .tab .tab-ul{height: 30px;}

        .tab .tab-ul .tab-li{float:left;margin-right: 5px;list-style: none; background-color: #323232;color: #fff;display: block;width: 50px;border-radius: 5px 5px 0 0 ;text-align: center;cursor: pointer;}

        .tab .tab-ul .active{color: #323232;  background-color: #fff;}

        .tab .content-warp{width: 200px;height: 200px;background-color: #fff;overflow: hidden;padding:5px;}

        .tab .content-warp .content{width: 200px;height: 200px;display: none}

        .tab .content-warp .content img{width:100%;height: 100%;}

        .tab .content-warp .current{display: block}

    </style>

</head>

<body>

    <div class="tab" data-config='{

            "event":"click",

            "time":false,

            "type":"default"

        }'>

        <ul class="tab-ul">

            <li class="tab-li active">新闻</li>

            <li class="tab-li">热点</li>

            <li class="tab-li">军事</li>

            <li class="tab-li">社会</li>

        </ul>

        <ul class="content-warp">

            <li class="content current"><img src="img/1.jpg"></li>

            <li class="content"><img src="img/2.jpg"></li>

            <li class="content"><img src="img/3.jpg"></li>

            <li class="content"><img src="img/4.jpg"></li>

        </ul>

    </div>

    <div class="tab" data-config='{

            "event":"mouseover",

            "time":false,

            "type":"fade"

        }'>

        <ul class="tab-ul">

            <li class="tab-li active">新闻2</li>

            <li class="tab-li">热点2</li>

            <li class="tab-li">军事2</li>

            <li class="tab-li">社会2</li>

        </ul>

        <ul class="content-warp">

            <li class="content current"><img src="img/1.jpg"></li>

            <li class="content"><img src="img/2.jpg"></li>

            <li class="content"><img src="img/3.jpg"></li>

            <li class="content"><img src="img/4.jpg"></li>

        </ul>

    </div>

    <div class="tab" data-config='{

            "event":"click",

            "time":3000,

            "type":"fade"

        }'>

        <ul class="tab-ul">

            <li class="tab-li active">新闻2</li>

            <li class="tab-li">热点2</li>

            <li class="tab-li">军事2</li>

            <li class="tab-li">社会2</li>

        </ul>

        <ul class="content-warp">

            <li class="content current"><img src="img/1.jpg"></li>

            <li class="content"><img src="img/2.jpg"></li>

            <li class="content"><img src="img/3.jpg"></li>

            <li class="content"><img src="img/4.jpg"></li>

        </ul>

    </div>

<script>

    $(".tab").tab();

</script>

</body>

</html>

插件tab.js!function( var Tab = function(ele){

this.ele = ele;

        config = JSON.parse(ele.attr('data-config'));

        //默认配置

        this.config = {

            "event":"mouseover",//触发事件

            "time":2000,//切换时间 false 为不切换

            "invoke":1,//默认tab

            "type":"default"//切换方式 默认和淡出

        };

        $.extend(this.config, config);

        //默认地址

        this.index = this.config.invoke;

        //点击事件

        this.switch();

        //默认显示

        this.invoke();

        //轮播

        this.loopfun();

    };

    Tab.prototype  = {

        "switch":function(){

            ele = this.ele;

            var that = this;

            config = this.config;

            event = config.event == "click"?"click":"mouseover";

            if(config.type == "default"){

                ele.find(".tab-li").on(event, function(e, par1){

                    //par1存在则为模拟请求

                    $(this).addClass("active").siblings().removeClass("active");//tab

                    var index = $(this).index();

                    that.ele.find(".content").eq(index).show().addClass("current").siblings().removeClass("current").hide();

                    if(that.loop && !par1){

                        clearInterval(that.loop);

                        that.loop = null;

                    }

                    that.addIndex(index);

                }).on('mouseout', function(){

                    if(!that.loop){

                        that.loopfun();

                    }

                });

            }else{

                ele.find(".tab-li").on(event, function(e, par1){

                    //par1存在则为模拟请求

                    $(this).addClass("active").siblings().removeClass("active");//tab

                    var index = $(this).index();

                    that.ele.find(".content").eq(index).fadeIn().siblings().fadeOut();

                    if(that.loop && !par1){

                        clearInterval(that.loop);

                    }

                    that.addIndex(index);

                }).on('mouseout', function(){

                    that.loopfun();

                });

            }

        },

        "invoke":function(){

            ele = this.ele;

            config = this.config;

            ele.find('.tab-li').eq(config.invoke-1).addClass("active").siblings().removeClass("active");

            ele.find('.content').eq(config.invoke-1).addClass("current").siblings().removeClass("current");

        },

        "addIndex":function(index){

            var count = this.ele.find('.tab-li').length;

            if(++index>=count){

                this.index = 0;

            }else{

                this.index = index;

            }

        },

        "loopfun":function(){

            if(this.config.time && parseInt(this.config.time)){

                that = this;

                this.loop = setInterval(function(){

                    event = that.config.event == "click"?"click":"mouseover";

                    that.ele.find(".tab-li").eq(that.index).trigger(event, ['tri']);

                }, that.config.time)

            }

        }

    }

    //注册成jquery方法

    $.fn.extend({

        tab:function(){

            this.each(function(){

                new Tab($(this))

            })

            return this;

        }

    })

    window.Tab = Tab;

}(jQuery)

标签可随意设置成文本或其他内容，可自行修改。

依自己的理解对切换逻辑进行修改：

1.mousove触发切换时只有mouseout才会继续轮训切换

2.click触发切换时当鼠标在切换页也只有mouseout才会继续轮训切换

代码托管地址：https://github.com/yimijianfang/tab

封装jQuery插件实现TAB切换的更多相关文章

自己编写jQuery插件之Tab切换
自己编写jQuery插件之 Tabs切换 jquery ui 带有Tabs切换插件,但其css样式太难维护,引用的东西太多,因此就自己写了个. 起初我Html代码架子是这样的: <div cla ...
封装jQuery插件的步骤
引语:jQuery提供了很多插件,我们在开发的过程使用插件能节省时间简化开发也避免从头开始编写每个组件,单我们除了懂得使用别人已编写好的插件以外,也到懂得如何封装属于我们自己的插件,以下就是封装jQu ...
封装jquery插件
最近要到使用别的jquery插件,但部分功能并不能满足,为满足功能,只能对插件进行修改来满足,要修改插件,先要了解插件如何封装, 明白了如何封装插件,才能更好修改插件:如何封装插件? 1.插件封装类型 ...
jquery+bootstrap实现tab切换, 每次切换时都请求数据, 点击提交分别向不同的地址提交数据
今天一个朋友叫帮做一个tab切换, 每一个tab内容区域都是从后台取出的数据, 这些数据要用表格的形式显示处理, 并且表格的内容区域可以修改, 如下所示: 例子查看请演示查看. 截图如图所示: 实现步 ...
jquery写的tab切换效果非常简单
自己写的一款 tab切换效果,比较简单,适合新手 <style type="text/css">*{margin:0; padding:0; font-size:12p ...
jquery时间轴tab切换效果实现结合swiper实现滑动显示效果
需求:根据时间轴进行tab页面内容切换(时间轴需要滑动查看并选择) 实现思路: 结合swiper插件实现滑动显示效果根据transform: translateX进行左侧切换效果的实现(具体实现cs ...
jquery插件之tab标签页或滑动门
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的tab标签页或滑动门特效,在此插件中默认使用的是鼠标滑过 ...
Jquery实现横向tab切换
//需求:鼠标放在不同的导航栏上,下面显示的内容自动切换 //代码如下 <!DOCTYPE html> <html lang="en"> <head& ...
jQuery 练习：tab 切换
实现内容随菜单切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

随机推荐

C/C++用状态转移表联合函数指针数组实现状态机FSM
状态机在project中使用很的频繁,有例如以下常见的三种实现方法: 1. switch-case 实现.适合简单的状态机. 2. 二维状态表state-event实现.逻辑清晰.可是矩阵通常比較稀疏 ...
DRF框架
1.RESTful规范 1.1 REST风格:表属性状态转移 1.1.1资源:在web中凡是有被引用的必要的都叫资源 1.1.2 URI:统一资源标识符 URI包含URL 1.1.3 URL:统 ...
使用Mock.js进行独立于后端的前端开发
Mockjs能做什么? 基于数据模板生成模拟数据. 基于 HTML模板生成模拟数据. 拦截并模拟 ajax 请求. 能解决的问题开发时,前后端进度不同步,后端还没完成数据输出,前端只好写静态模 ...
pyenv 安装本地版本
最近在用pyenv安装python的时候发现官网特别慢,经常出现拒绝访问的情况.看了一些解决方法,发现可以使用本地的python源码进行安装,让pyenv从本地下载就可以了~步骤如下: 首先从官网下载 ...
HDU 6119 小小粉丝度度熊【预处理+尺取法】（2017"百度之星"程序设计大赛 - 初赛（B））
小小粉丝度度熊 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Sub ...
MySQL alter语句
1:删除列 ALTER TABLE [表名字] DROP [列名称] 2:增加列 ALTER TABLE [表名字] ADD [列名称] INT NOT NULL COMMENT '注释说明' 3: ...
java java.io.IOException: No locks available异常处理解决
try { randomAccessFile = new RandomAccessFile(file, "rw"); lock = randomAccessFile.g ...
Java 通过 HTTP 下载文件
1. [代码]Download.java package core.spider; import java.io.*;import java.net.*;import java.util.*; / ...
android:oneshot
帧动画的自动执行:oneshot . 如果为true,表示动画只播放一次停止在最后一帧上,如果设置为false表示动画循环播放.
Android中的ProgressBar的android:indeterminate
不明确(false)就是滚动条的当前值自动在最小到最大值之间来回移动,形成这样一个动画效果,这个只是告诉别人“我正在工作”,但不能提示工作进度到哪个阶段.主要是在进行一些无法确定操作时间的任务时作为提 ...

封装jQuery插件实现TAB切换

封装jQuery插件实现TAB切换的更多相关文章

随机推荐

热门专题