jquery插件开发

最新推荐文章于 2024-08-09 02:16:38 发布

阁下长得好生俊俏

最新推荐文章于 2024-08-09 02:16:38 发布

阅读量696

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/h1069495874/article/details/79105149

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

/****************************************************\
 * jQuery的插件开发机制分为两种：类级别的插件开发、对象级别的插件开发
 *
 * 类级别的插件开发：添加新的全局函数;使用$.extend(obj);使用命名空间;
 *      添加全局函数：jQuery.plugin = function(){}
 *      使用$.extend(obj):$.extend({
 *                                  plugin:function(){
 *
 *                                      }
 *                                 });
 *      调用方式为：$.plugin()
 *
 *      使用命名空间:jQuery.plugin = {
 *                                      plugin:function(){
 *
 *                                       }
 *                                   }
 *      调用方式为：$.plugin.pluginType()
 *
 * 对象级别的插件开发(常用方式):;(function($){
 *                                  $.fn.plugin = function(){
 *
 *                                  }
 *                   })(jQuery)
 *      调用方式为：$(element).plugin();
\****************************************************/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.min.js"></script>
    <script src="1.js"></script>
    <style>
        table{
            width: 100%;
            border: 1px solid #a6e1ec;
            text-align: center;
            border-collapse: collapse;
        }
        th,td{
            height: 20px;
            border: 1px solid #a6e1ec;
        }
        .eventRow{
            background:aqua;
        }
        .oldRow{
            background: #1b6d85;
        }
        .currentRow{
            background: #00ff00;
        }
    </style>
    <script>
        $(function(){
            $('#table1').table();
        });
    </script>
</head>
<body>
<table id="table1">
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>体重</th>
    </tr>
    <tr>
        <td>Tom</td>
        <td>nan</td>
        <td>20</td>
        <td>20</td>
    </tr>
    <tr>
        <td>Jack</td>
        <td>nv</td>
        <td>25</td>
        <td>19</td>
    </tr>
    <tr>
        <td>Tom</td>
        <td>nan</td>
        <td>20</td>
        <td>20</td>
    </tr>
    <tr>
        <td>Jack</td>
        <td>nv</td>
        <td>25</td>
        <td>19</td>
    </tr>
</table>
</body>
</html>

;(function($){
    $.fn.table = function(options){
        //各种参数、属性
        var defaults = {
            eventRowClass:'eventRow',
            oldtRowClass:'oldRow',
            currentClass:'currentRow'
        }
        //合并参数
        var options = $.extend(defaults,options);

        this.each(function(){
            $(this).find('tr:even').addClass(options.eventRowClass);
            $(this).find('tr:odd').addClass(options.oldtRowClass);
            $(this).find('tr').not('tr:first').mouseover(function(){
                $(this).addClass(options.currentClass);
            }).mouseout(function(){
                $(this).removeClass(options.currentClass);
            });
        });
    }
})(jQuery)

一般用下面的方式开发：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.min.js"></script>
    <script src="01.js"></script>
    <style>
        table{
            width: 100%;
            border: 1px solid #a6e1ec;
            text-align: center;
            border-collapse: collapse;
        }
        th,td{
            height: 20px;
            border: 1px solid #a6e1ec;
        }
        .eventRow{
            background:aqua;
        }
        .oldRow{
            background: #1b6d85;
        }
        .currentRow{
            background: #00ff00;
        }
    </style>
    <script>
        $(function(){
            $('#table1').table({
                eventRowClass:'eventRow',
                oldtRowClass:'oldRow',
                currentClass:'currentRow',
                currentType1:'click'
            });
        });
    </script>
</head>
<body>
<table id="table1">
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>体重</th>
    </tr>
    <tr>
        <td>Tom</td>
        <td>nan</td>
        <td>20</td>
        <td>20</td>
    </tr>
    <tr>
        <td>Jack</td>
        <td>nv</td>
        <td>25</td>
        <td>19</td>
    </tr>
    <tr>
        <td>Tom</td>
        <td>nan</td>
        <td>20</td>
        <td>20</td>
    </tr>
    <tr>
        <td>Jack</td>
        <td>nv</td>
        <td>25</td>
        <td>19</td>
    </tr>
</table>
</body>
</html>

;(function($){
    $.fn.table = function(options){
        var defaults = {
            eventRowClass:'eventRow',
            oldtRowClass:'oldRow',
            currentClass:'currentRow',
            currentType1:'mouseover',
            currentType2:'mouseout'
        }
        var options = $.extend(defaults,options);

        this.each(function(){
            var _this = $(this);
            _this.find('tr:even').addClass(options.eventRowClass);
            _this.find('tr:odd').addClass(options.oldtRowClass);
            _this.find('tr').bind(options.currentType1,function(){
                $(this).addClass(options.currentClass);
            });
            _this.find('tr').bind(options.currentType2,function(){
                $(this).removeClass(options.currentClass);
            });
        });
    }
})(jQuery);

轮播插件封装
准备好基本架构

;(function($){
    var Carousel = function(poster,setting){
        console.log(setting);
    };
    //给目标函数添加方法
    Carousel.prototype = {

    };
    //初始化页面方法
    Carousel.init = function(posters,setting){
        var _this = this;
        posters.each(function(){
            //当前的this是DOM节点对象，通过$(this)包装成整个对象
            new _this($(this),setting);
        });
    }
    //因为在匿名函数内部，需要全局注册后外部才可以调用
    window['Carousel'] = Carousel;
})(jQuery);

HTML

<div class="J_Poster poster-main" data-setting='{
                                                "width":800,
                                                "height":270,
                                                "posterWidth":640,
                                                "posterHeight":270,
                                                "scale":0.9,
                                                "speed":500,
                                                "autoPlay":true,
                                                "delay":1000,
                                                "verticalAlign":"middle"
                                                }'>
    <div class="poster-btn poster-prev-btn"></div>
    <ul class="poster-list">
        <li class="poster-item"><a href="#"><img src="1.jpg" width="100%" height="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="2.jpg" width="100%" height="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="3.jpg" width="100%" height="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="4.jpg" width="100%" height="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="5.jpg" width="100%" height="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="2.jpg" width="100%" height="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="3.jpg" width="100%" height="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="4.jpg" width="100%" height="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="5.jpg" width="100%" height="100%"></a></li>
    </ul>
    <div class="poster-btn poster-next-btn"></div>
</div>

调用：
$(function(){
        // var carouse = new Carousel($(".J_Poster").eq(0));
        Carousel.init($(".J_Poster"));
    });

css

/*重置*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
abbr,acronym{border:0;}
body{color:#666; background-color:#fff;font: 12px/1.5 '微软雅黑',tahoma,arial,'Hiragino Sans GB',宋体,sans-serif;}
.clearfix:after {visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
.clearfix {zoom:1;} 
/*旋转木马必要样式*/
.poster-main{ position:relative;width:800px;height:270px;}
.poster-main a,.poster-main img{display:block;}
.poster-main .poster-list{width:800px;height:270px;}
.poster-main .poster-list .poster-item{ position:absolute;left:0;top:0;}
.poster-main .poster-btn{ position:absolute;top:0;width:100px;height:270px; z-index:10; cursor:pointer;  opacity:0.8}
.poster-main .poster-prev-btn{left:0; background: url(btn_l.png) no-repeat center center;}
.poster-main .poster-next-btn{right:0; background: url(btn_r.png) no-repeat center center;}

;(function($){
    var Carousel = function(poster){
        var self = this;
        //保存单个旋转木马对象
        this.poster = poster;
        this.posterItemMain = poster.find("ul.poster-list");
        this.nextBtn = poster.find("div.poster-next-btn");
        this.prevBtn = poster.find("div.poster-prev-btn");
        this.posterItems =poster.find("li.poster-item");
        if(this.posterItems.size()%2==0){
            this.posterItemMain.append(this.posterItems.eq(0).clone());
            this.posterItems = this.posterItemMain.children();
        };
        this.posterFirstItem = this.posterItems.first();
        this.posterLastItem = this.posterItems.last();
        this.rotateFlag = true;
        //默认配置参数
        this.setting = {
            "width":1000,           //幻灯片的宽度
            "height":270,               //幻灯片的高度
            "posterWidth":640,  //幻灯片第一帧的宽度
            "posterHeight":270, //幻灯片第一帧的高度
            "scale":0.9,                    //记录显示比例关系
            "speed":300,
            "autoPlay":false,
            "delay":2000,
            "verticalAlign":"middle" //top bottom
        };
        $.extend(this.setting,this.getSetting());
        //设置配置参数值
        this.setSettingValue();
        this.setPosterPos();
        //左旋转按钮
        this.nextBtn .click(function(){
            if(self.rotateFlag){
                self.rotateFlag = false;
                self.carouseRotate("left");
            };
        });
        //右旋转按钮
        this.prevBtn .click(function(){
            if(self.rotateFlag){
                self.rotateFlag = false;
                self.carouseRotate("right");
            };
        });
        //是否开启自动播放
        if(this.setting.autoPlay){
            this.autoPlay();
            this.poster.hover(function(){
                window.clearInterval(self.timer);
            },function(){
                self.autoPlay();
            });

        };

    };
    Carousel.prototype = {
        autoPlay:function(){
            var self = this;
            this.timer = window.setInterval(function(){
                self.nextBtn.click();
            },this.setting.delay);
        },
        //旋转
        carouseRotate:function(dir){
            var _this_  = this;
            var zIndexArr = [];
            //左旋转
            if(dir === "left"){
                this.posterItems .each(function(){
                    var self = $(this),
                        prev = self.prev().get(0)?self.prev():_this_.posterLastItem,
                        width = prev.width(),
                        height =prev.height(),
                        zIndex = prev.css("zIndex"),
                        opacity = prev.css("opacity"),
                        left = prev.css("left"),
                        top = prev.css("top");
                    zIndexArr.push(zIndex);
                    self.animate({
                        width:width,
                        height:height,
                        //zIndex:zIndex,
                        opacity:opacity,
                        left:left,
                        top:top
                    },_this_.setting.speed,function(){
                        _this_.rotateFlag = true;
                    });
                });
                //zIndex需要单独保存再设置，防止循环时候设置再取的时候值永远是最后一个的zindex
                this.posterItems.each(function(i){
                    $(this).css("zIndex",zIndexArr[i]);
                });
            }else if(dir === "right"){//右旋转
                this.posterItems .each(function(){
                    var self = $(this),
                        next = self.next().get(0)?self.next():_this_.posterFirstItem,
                        width = next.width(),
                        height =next.height(),
                        zIndex = next.css("zIndex"),
                        opacity = next.css("opacity"),
                        left = next.css("left"),
                        top = next.css("top");
                    zIndexArr.push(zIndex);
                    self.animate({
                        width:width,
                        height:height,
                        //zIndex:zIndex,
                        opacity:opacity,
                        left:left,
                        top:top
                    },_this_.setting.speed,function(){
                        _this_.rotateFlag = true;
                    });

                });
                //zIndex需要单独保存再设置，防止循环时候设置再取的时候值永远是最后一个的zindex
                this.posterItems.each(function(i){
                    $(this).css("zIndex",zIndexArr[i]);
                });
            };
        },
        //设置剩余的帧的位置关系
        setPosterPos:function(){
            var   self = this;
            var     sliceItems  = this.posterItems.slice(1),
                sliceSize     = sliceItems.size()/2,
                rightSlice   = sliceItems.slice(0,sliceSize),
                level            = Math.floor(this.posterItems.size()/2),
                leftSlice      =sliceItems.slice(sliceSize);

            //设置右边帧的位置关系和宽度高度top
            var rw = this.setting.posterWidth,
                rh  = this.setting.posterHeight,
                gap = ((this.setting.width-this.setting.posterWidth)/2)/level;

            var firstLeft = (this.setting.width-this.setting.posterWidth)/2;
            var fixOffsetLeft = firstLeft+rw;
            //设置左边位置关系
            rightSlice.each(function(i){
                level--;
                rw = rw *self.setting.scale;
                rh = rh *self.setting.scale
                var j = i;
                $(this).css({
                    zIndex:level,
                    width:rw,
                    height:rh,
                    opacity:1/(++j),
                    left:fixOffsetLeft+(++i)*gap-rw,
                    top:self.setVerticalAlign(rh)
                });
            });
            //设置左边的位置关系
            var lw = rightSlice.last().width(),
                lh  =rightSlice.last().height(),
                oloop = Math.floor(this.posterItems.size()/2);
            leftSlice.each(function(i){
                $(this).css({
                    zIndex:i,
                    width:lw,
                    height:lh,
                    opacity:1/oloop,
                    left:i*gap,
                    top:self.setVerticalAlign(lh)
                });
                lw = lw/self.setting.scale;
                lh = lh/self.setting.scale;
                oloop--;
            });
        },
        //设置垂直排列对齐
        setVerticalAlign:function(height){
            var verticalType  = this.setting.verticalAlign,
                top = 0;
            if(verticalType === "middle"){
                top = (this.setting.height-height)/2;
            }else if(verticalType === "top"){
                top = 0;
            }else if(verticalType === "bottom"){
                top = this.setting.height-height;
            }else{
                top = (this.setting.height-height)/2;
            };
            return top;
        },
        //设置配置参数值去控制基本的宽度高度。。。
        setSettingValue:function(){
            this.poster.css({
                width:this.setting.width,
                height:this.setting.height
            });
            this.posterItemMain.css({
                width:this.setting.width,
                height:this.setting.height
            });
            //计算上下切换按钮的宽度
            var w = (this.setting.width-this.setting.posterWidth)/2;
            //设置切换按钮的宽高，层级关系
            this.nextBtn.css({
                width:w,
                height:this.setting.height,
                zIndex:Math.ceil(this.posterItems.size()/2)
            });
            this.prevBtn.css({
                width:w,
                height:this.setting.height,
                zIndex:Math.ceil(this.posterItems.size()/2)
            });

            this.posterFirstItem.css({
                width:this.setting.posterWidth,
                height:this.setting.posterHeight,
                left:w,
                top:0,
                zIndex:Math.floor(this.posterItems.size()/2)
            });
        },
        //获取人工配置参数
        getSetting:function(){
            var setting = this.poster.attr("data-setting");
            if(setting&&setting!=""){
                return $.parseJSON(setting);
            }else{
                return {};
            };
        }
    };
    Carousel.init = function(posters){
        var _this_ = this;
        posters.each(function(){
            new  _this_($(this));
        });
    };
    window["Carousel"] = Carousel;
})(jQuery);