彻底征服jQuery 插件开发

来源：互联网发布：伊戈达拉身体数据编辑：程序博客网时间：2024/05/21 14:02

看之前先看文章：http://blog.csdn.net/libin_1/article/details/51034031

这里写图片描述

index.html

<!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <title>彻底征服jQuery 插件开发</title>        <script type="text/javascript" src="js/jquery-2.2.4.min.js" ></script>        <script type="text/javascript" src="js/jQuery.mytabs.js"></script>        <script type="text/javascript">            $(function() {                $("#tab").mytabs();                $("#tab2").mytabs({                    bind: 'click',                    animation: 'left'                });                $("#tab3").mytabs({                    bind: 'hover',                    animation: 'up'                });                $("#tab4").mytabs({                    bind: 'hover',                    animation: 'fadein'                });            })        </script>        <style>            body {                background: #fff;            }            h2 {                width: 400px;                margin: 0 auto 10px auto;                font-size: 18px;                font-family: "微软雅黑";                color: red;                text-align: center;                border: 1px solid red;            }            .tab {                position: relative;                width: 400px;                height: 230px;                overflow: hidden;                margin: 0 auto 20px auto;                font-family: Arial;                border: 1px solid red;            }            .tab-nav {                height: 30px;                overflow: hidden;                background:green;            }            .tab-nav a {                display: block;                float: left;                width: 80px;                height: 30px;                line-height: 30px;                text-align: center;                text-decoration: none;                color: blue;            }            .tab-nav a.current {                background:orange;                color: red;            }            .tab-con {                position: relative;                width: 400px;                height: 200px;                overflow: hidden;                background: pink;            }            .tab-con-item {                display: none;                width: 400px;                height: 200px;                line-height: 200px;                text-align: center;                color: red;            }        </style>    </head>    <body>        <div style="margin:20px auto; text-align:center;border: 1px solid red;">            <a href="http://blog.csdn.net/libin_1?viewmode=contents" target="_blank" style="color:#06F">彻底征服jQuery 插件开发</a>        </div>        <h2>默认样式：自动运行、无动画效果、Hover事件</h2>        <div class="tab" id="tab">            <div class="tab-nav j-tab-nav">                <a href="javascript:void(0);" class="current">Tab1</a>                <a href="javascript:void(0);">Tab2</a>                <a href="javascript:void(0);">Tab3</a>                <a href="javascript:void(0);">Tab4</a>                <a href="javascript:void(0);">Tab5</a>            </div>            <div class="tab-con">                <div class="j-tab-con">                    <div class="tab-con-item" style="display:block;">                        111111                    </div>                    <div class="tab-con-item">                        222222                    </div>                    <div class="tab-con-item">                        333333                    </div>                    <div class="tab-con-item">                        444444                    </div>                    <div class="tab-con-item">                        555555                    </div>                </div>            </div>        </div>        <h2>自动运行、向左滚动、点击事件</h2>        <div class="tab" id="tab2">            <div class="tab-nav j-tab-nav">                <a href="javascript:void(0);" class="current">Tab1</a>                <a href="javascript:void(0);">Tab2</a>                <a href="javascript:void(0);">Tab3</a>                <a href="javascript:void(0);">Tab4</a>                <a href="javascript:void(0);">Tab5</a>            </div>            <div class="tab-con">                <div class="j-tab-con">                    <div class="tab-con-item" style="display:block;">                        111111                    </div>                    <div class="tab-con-item">                        222222                    </div>                    <div class="tab-con-item">                        333333                    </div>                    <div class="tab-con-item">                        444444                    </div>                    <div class="tab-con-item">                        555555                    </div>                </div>            </div>        </div>        <h2>自动运行、向上滚动、Hover事件</h2>        <div class="tab" id="tab3">            <div class="tab-nav j-tab-nav">                <a href="javascript:void(0);" class="current">Tab1</a>                <a href="javascript:void(0);">Tab2</a>                <a href="javascript:void(0);">Tab3</a>                <a href="javascript:void(0);">Tab4</a>                <a href="javascript:void(0);">Tab5</a>            </div>            <div class="tab-con">                <div class="j-tab-con">                    <div class="tab-con-item" style="display:block;">                        111111                    </div>                    <div class="tab-con-item">                        222222                    </div>                    <div class="tab-con-item">                        333333                    </div>                    <div class="tab-con-item">                        444444                    </div>                    <div class="tab-con-item">                        555555                    </div>                </div>            </div>        </div>        <h2>自动运行、渐入、Hover事件</h2>        <div class="tab" id="tab4">            <div class="tab-nav j-tab-nav">                <a href="javascript:void(0);" class="current">Tab1</a>                <a href="javascript:void(0);">Tab2</a>                <a href="javascript:void(0);">Tab3</a>                <a href="javascript:void(0);">Tab4</a>                <a href="javascript:void(0);">Tab5</a>            </div>            <div class="tab-con">                <div class="j-tab-con">                    <div class="tab-con-item" style="display:block;">                        111111                    </div>                    <div class="tab-con-item">                        222222                    </div>                    <div class="tab-con-item">                        333333                    </div>                    <div class="tab-con-item">                        444444                    </div>                    <div class="tab-con-item">                        555555                    </div>                </div>            </div>        </div>    </body></html>

jquery.mytabs.js

(function($) {    $.fn.mytabs = function(options) {        //默认值        var defaultVal = {            btnClass: '.j-tab-nav',            /*按钮的父级Class*/            conClass: '.j-tab-con',            /*内容的父级Class*/            bind: 'hover',            /*事件参数 click,hover*/            animation: '0',            /*动画方向 left,up,fadein,0 为无动画*/            speed: 300,            /*动画运动速度*/            delay: 200,            /*Tab延迟速度*/            auto: true,            /*是否开启自动运行 true,false*/            autoSpeed: 3000 /*自动运行速度*/        };        //全局变量        var obj = $.extend(defaultVal, options),            evt = obj.bind,            btn = $(this).find(obj.btnClass),            con = $(this).find(obj.conClass),            anim = obj.animation,            conWidth = con.width(),            conHeight = con.height(),            len = con.children().length,            sw = len * conWidth,            sh = len * conHeight,            i = 0,            len, t, timer;        return this.each(function() {            //判断动画方向            function judgeAnim() {                var w = i * conWidth,                    h = i * conHeight;                btn.children().removeClass('current').eq(i).addClass('current');                switch (anim) {                    case '0':                        con.children().hide().eq(i).show();                        break;                    case 'left':                        con.css({                            position: 'absolute',                            width: sw                        }).children().css({                            float: 'left',                            display: 'block'                        }).end().stop().animate({                            left: -w                        }, obj.speed);                        break;                    case 'up':                        con.css({                            position: 'absolute',                            height: sh                        }).children().css({                            display: 'block'                        }).end().stop().animate({                            top: -h                        }, obj.speed);                        break;                    case 'fadein':                        con.children().hide().eq(i).fadeIn();                        break;                }            }            //判断事件类型            if (evt == "hover") {                btn.children().hover(function() {                    var j = $(this).index();                    function s() {                        i = j;                        judgeAnim();                    }                    timer = setTimeout(s, obj.delay);                }, function() {                    clearTimeout(timer);                })            } else {                btn.children().bind(evt, function() {                    i = $(this).index();                    judgeAnim();                })            }            //自动运行            function startRun() {                t = setInterval(function() {                    i++;                    if (i >= len) {                        switch (anim) {                            case 'left':                                con.stop().css({                                    left: conWidth                                });                                break;                            case 'up':                                con.stop().css({                                    top: conHeight                                });                        }                        i = 0;                    }                    judgeAnim();                }, obj.autoSpeed)            }            //如果自动运行开启，调用自动运行函数            if (obj.auto) {                $(this).hover(function() {                    clearInterval(t);                }, function() {                    startRun();                })                startRun();            }        })    }})(jQuery);

为什么要在 $.fn.mytabs 中返回this.each();

    在返回this之前，需要完成插件的功能mytabs，因为调用的mytabs插件的为一个jquery对象数组，所以需要调用each方法对每一个对象执行mytabs       //在这里面,this指的是用jQuery选中的元素       //example :$('a'),则this=$('a')当然你可以:全选复制放进笔记this.each(function(){....});return this; 实在理解不了理解不了用$(this).each(function(){....});return this; 也行！！！

2 0