Question

这是我尝试创建JQuery插件的第一次尝试，所以我为我的新手道歉道歉。我的问题是，当我尝试调用公共方法时，我认为该插件正在重新初始化。这是一个简单的插件，它创建一个div并用tile填充它，方法.reveal（）应该删除tile。

插件声明：

(function($){

$.fn.extend({

    //pass the options variable to the function
    boxAnimate: function(options) {


        //Set the default values, use comma to separate the settings, example:
        var defaults = {
    bgColor: '#000000',
            padding: 20,
            height: $(this).height(),
    width: $(this).width(),
    tileRows:25,
    tileHeight:$(this).height()/25,
    tileCols:25,
    tileWidth:$(this).width()/25,
    speed: 500
        }

        var options =  $.extend(defaults, options);

    this.reveal = function(){
    var lastTile = $('.backDropTile:last').attr('id');
    var pos1 = lastTile.indexOf("_");
    var pos2 = lastTile.lastIndexOf("_");
    var lCol = parseInt(lastTile.substr(pos2+1));
    var lRow = parseInt(lastTile.substr(pos1+1,(pos2-pos1)-1));
    alert(lCol+' '+lRow+' #bdTile_'+lRow+'_'+lCol);
    for(lRow;lRow>=0;lRow--){
         //Iterate by col:
         for(lCol;lCol>=0;lCol--){
        $('#bdTile_'+lRow+'_'+lCol).animate({
            opacity: 0
            }, 100, function() {
            $('#bdTile_'+lRow+'_'+lCol).remove();
        });
         }
     }
     alert(lCol+' '+lRow);
    }

        return this.each(function(index) {
            var o = options;
    //Create background:
    $(this).prepend('<div id="backDrop" style="color:white;position:absolute;z-index:998;background-color:'+o.bgColor+';height:'+o.height+'px;width:'+o.width+'px;"></div>');
             //create boxes:
     //First iterate by row:

     for(var iRow=0;iRow<o.tileRows;iRow++){
         //Iterate by col:
         for(var iCol=0;iCol<o.tileCols;iCol++){
         $('#backDrop').append('<span class="backDropTile" id="bdTile_'+iRow+'_'+iCol+'" style="z-index:998;float:left;background-color:green;height:'+o.tileHeight+'px;width:'+o.tileWidth+'px;"></span>');
         }
     }

        });
    }
});

})(jQuery);

用法：

    $(document).ready(function() {
        $('#book').boxAnimate();
        $('#clickme').click(function() {
            $('#book').boxAnimate().reveal();
        });
    });

所以我非常清楚我的问题是什么，但我对创建jQuery插件来解决它并不熟悉。看起来我读的越多，我就越困惑，因为它似乎有很多方法可以达到这个目的。

Answer 1

我喜欢将我的插件分成四个部分。

1：$ .fn实现，它迭代jQuery元素集合并附加插件。

2：插件“构造函数”或init。

3：插件默认选项

4：插件实例方法或实现。

以下是我如何构建您的插件。我认为这比你所提供的更容易理解。

(function($){

// constructor or init task
var boxAnimate = function(el, options) {
    this.element = $(el);
    this.options = options;

    if (this.options.height == 'auto') this.options.height = this.element.height();
    if (this.options.width == 'auto') this.options.width= this.element.width();
    if (this.options.tileHeight == 'auto') this.options.tileHeight = this.options.height/25;
    if (this.options.tileWidth == 'auto') this.options.tileWidth = this.options.width/25;

    //Create background:
    this.element.prepend('<div id="backDrop" style="color:white;position:absolute;z-index:998;background-color:'+this.options.bgColor+';height:'+this.options.height+'px;width:'+this.options.width+'px;"></div>');

    //create boxes:
    for(var iRow=0;iRow<this.options.tileRows;iRow++){
        for(var iCol=0;iCol<this.options.tileCols;iCol++){
             $('#backDrop').append('<span class="backDropTile" id="bdTile_'+iRow+'_'+iCol+'" style="z-index:998;float:left;background-color:green;height:'+this.options.tileHeight+'px;width:'+this.options.tileWidth+'px;"></span>');
        }
    }
}

// default options
boxAnimate.defaults = {
    bgColor: '#000000',
    padding: 20,
    height: 'auto',
    width: 'auto',
    tileRows:25,
    tileHeight: 'auto',
    tileCols:25,
    tileWidth: 'auto',
    speed: 500
};

// instance methods
boxAnimate.prototype = {
    reveal: function() {
        var lastTile = $('.backDropTile:last').attr('id');
        var pos1 = lastTile.indexOf("_");
        var pos2 = lastTile.lastIndexOf("_");
        var lCol = parseInt(lastTile.substr(pos2+1));
        var lRow = parseInt(lastTile.substr(pos1+1,(pos2-pos1)-1));

        for(var row=lRow;row>=0;row--) {
            for(var col=lCol;col>=0;col--) {
                $('#bdTile_'+row+'_'+col).animate({
                    opacity: 0
                }, 1000, function() {
                    $('#bdTile_'+row+'_'+col).remove();
                });
             }
         }
    }      
}

// $.fn registration
$.fn.boxAnimate = function(options) {
    return this.each(function() {
        var el = $(this);
        var o = $.extend({}, boxAnimate.defaults, options)
        if (!el.data('boxAnimate'))
            el.data('boxAnimate', new boxAnimate(el, o));
    });
}
})(jQuery);


    $('#book').boxAnimate(); 
    $('#clickme').click(function(e) {
        $('#book').data('boxAnimate').reveal();
        e.preventDefault();
    });

Answer 2

当您在插件“构造函数”中分配方法时，就像在此处一样：

this.reveal = function(){}

您将其指定为jQuery.prototype.boxAnimate对象的静态方法。这意味着您可以在将从构造函数返回的对象上调用它：

$('#element').boxAnimate().reveal();

或：

var instance = $('#element').boxAnimate();
instance.reveal();

如果你想把它放在$.data对象里面（个人推荐），你可以这样做（在this.each循环中）：

$.data(this, 'boxAnimate', {
    reveal: function() {
        // some code
    }
});

示例：http://jsfiddle.net/AyffZ/

Answer 3

首先，阅读本教程：http://docs.jquery.com/Plugins/Authoring

其次，你的问题肯定是用法：

$(document).ready(function() {
    $('#book').boxAnimate(); // First Init
    $('#clickme').click(function() {
        $('#book')
            .boxAnimate() // Second Init
            .reveal();
    });
});

我链接的教程解释了在插件中包含方法的多种方法。您还可以使用jQuery UI小部件工厂，它提供了包含方法的钩子。

调用方法时，Jquery插件重新进入

3 个答案: