彻底征服jQuery 插件开发

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

彻底征服jQuery 插件开发_第1张图片

index.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">Tab1a>
                <a href="javascript:void(0);">Tab2a>
                <a href="javascript:void(0);">Tab3a>
                <a href="javascript:void(0);">Tab4a>
                <a href="javascript:void(0);">Tab5a>
            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">Tab1a>
                <a href="javascript:void(0);">Tab2a>
                <a href="javascript:void(0);">Tab3a>
                <a href="javascript:void(0);">Tab4a>
                <a href="javascript:void(0);">Tab5a>
            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">Tab1a>
                <a href="javascript:void(0);">Tab2a>
                <a href="javascript:void(0);">Tab3a>
                <a href="javascript:void(0);">Tab4a>
                <a href="javascript:void(0);">Tab5a>
            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">Tab1a>
                <a href="javascript:void(0);">Tab2a>
                <a href="javascript:void(0);">Tab3a>
                <a href="javascript:void(0);">Tab4a>
                <a href="javascript:void(0);">Tab5a>
            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; 也行!!!

你可能感兴趣的:(jquery,插件,this,jquery插件,web前端学习)