Плагин Jquery перезапускается при вызове метода

Question

Это моя первая попытка создать плагин JQuery, поэтому я прошу прощения за мой нуббери. Моя проблема в том, что я считаю, что плагин реинициализируется, когда я пытаюсь вызвать публичный метод. Это простой плагин, который создает div и заполняет его плитками, метод .reveal () должен удалять плитки.

Объявление плагина:

(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: плагин-in "constructor" или 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

Сначала прочитайте этот урок: http://docs.jquery.com/Plugins/Authoring

Во-вторых, ваша проблема, безусловно, заключается в использовании:

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

Учебник, который я связал, объясняет несколько способов включения методов в плагины. Вы также можете использовать фабрику виджетов jQuery UI, которая предоставляет хуки для включения методов.

Answer 3

Когда вы назначаете метод внутри плагина «конструктор», как вы делаете здесь:

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/