Есть ли у моего плагина jQuery слабость (по шаблону)? - PullRequest
Новая
       9

Есть ли у моего плагина jQuery слабость (по шаблону)?

2 голосов
/ 17 декабря 2010

Я нашел шаблон плагинов в Интернете.(Я отправлю ссылку, как только найду ее обратно), и немного изменил ее, чтобы создать свой собственный плагин для диалога.Боюсь, даже если код работает, то, как я это сделал, не имеет смысла.

Я должен:

  • Уметь назначать свой плагин для нескольких элементов (более одного диалогового окна) -Приложено
  • Я должен иметь доступ к его методу: openDialog, closeDialog, assignOptions извне его области действия -Не реализовано
  • Я хотел бы отправить ссылку натекущий диалог при нажатии кнопки - частично реализован.Я использую $(this).getDialog() метод.this ссылка на нажатую кнопку

Вот плагин: 

(function($) {
    var pluginName = "Dialog",
        dialogContent = { "Title" : "h2", "SubTitle" : "p.sub-title", "Body" : "div.content" }

    var infDialog = function( el, options ) {
        var $el = $(el),
            currentConfig = {
                position : [100, 100],
                autoOpen : true
            };

        $el.data( pluginName, $el);

        if ( options ) {
            currentConfig = $.extend( currentConfig, options );
        }

        $el.css({ "top" : currentConfig.position[1], "left" : currentConfig.position[0], "z-index" : 9999 });

        if ( currentConfig.autoOpen ) {
            $el.fadeIn( "slow" );
        }

        if ( currentConfig.buttons ) {
            $.each(currentConfig.buttons, function(i, j) {
                if ( $.isFunction( j ) && $(el).find("input[value='" + i + "']").length )
                {
                    var $currentButton = $(el).find("input[value='" + i + "']");

                    $(el).find("input[value='" + i + "']").click(function() {
                        j.call( $currentButton );
                    });
                }
            });
        }

        if ( currentConfig.onOpen ) {
            currentConfig.onOpen.call( $el );
        }

        if ( currentConfig.onClose ) {
            $el.bind("onclose", function() {
                currentConfig.onClose.call( $el );
            });
        }

        $el.getDialog().bind("click", function( e ) {
            var currentDialog = this.id,
                currentPosition = $(this).css("z-index");

            if ( currentPosition < 9999 || currentPosition == "auto" ) {
                $(".dialog").each(function(i) {
                    if ( this.id == currentDialog ) {
                        $(this).css("z-index", 9999);
                    } else {
                        $(this).css("z-index", 9990);
                    }
                });

                $(this).css("z-index");
            }
        });
    }

    $.fn.infDialog = function( options ) {
        return this.each(function() {
            ( new infDialog( this, options ) );
        });
    }

    $.fn.closeDialog = function() {
        return $(this).getDialog().fadeOut("slow", function() {
            $(this).trigger("onclose");
        });
    }

    $.fn.getDialog = function() {
        return ( ! $(this).is(".dialog") ) ? $(this).closest(".dialog") : $(this);
    }

    $.fn.assignOption = function( options ) {
        var $currentPlugin = $(this);

        $.each( options, function(i, j) {
            if ( dialogContent[ i ] ) {
                $currentPlugin.find( dialogContent[ i ] ).empty().html( j );
            }
        });
    }
})(jQuery);

и HTML-код диалога: 

<div id="dialogTest" class="dialog">
    <div>
        <h2>title</h2>
        <p class="sub-title">
            subtitle
        </p>
        <div class="content">
            Content
        </div>
        <p class="buttons"><input type="button" value="Action" /> <input type="button" value="Close" class="normal" /></p>
    </div>
</div>

и jQueryкод: 

$("#dialogTest").infDialog({
    position : [400, 190],
    buttons : {
        "Action" : function() {
            var $dialog = $(this).getDialog(),
                obj = $dialog.data("Dialog"),
                $currentDialog = $(this).getDialog();

            $currentDialog.assignOption({
                "Title" : "New Title",
                "SubTitle" : "Lorem ipsum",
                "Bob" : "unknown body tag",
                "Body" : "testbody"
            });

            $(this).attr("value", Math.random());
        },
        "Close" : function() {
            $(this).closeDialog();
        }
    },
    onOpen : function() {

    },
    onClose : function() {
        var $currentDialog = $(this).getDialog();

        $currentDialog.fadeIn("fast");
    }
});

Я делаю что-то не так или я на самом деле иду хорошим путем?

На заметке стороннего производителя я обнаружил, что этот код: $ el.data( pluginName, $el);, предложенныйшаблон дизайна не работает.Фактически, каждый раз, когда я пытался получить объект, используя $("#dialogTest").data("Dialog"), возвращаемый объект был пустым.

Спасибо

Ответы [ 2 ]

0 голосов
/ 17 декабря 2010

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

Относительно вашей задачи assignOptions ...

Если у вас есть приватный объект настроек и вы передаете плагину параметры, он работает хорошо (это, конечно, описано в руководстве).

Пример расширения 

(function( $ ){

  $.fn.tooltip = function( options ) {  
    //private settings
    var settings = {
      'location'         : 'top',
      'background-color' : 'blue'
    };
    // returning this.each ensures your plugin works on multiple matched elements
    return this.each(function() {        
      // If options exist, lets merge them
      // with our default settings
      if ( options ) { 
        $.extend( settings, options );
      }

      // Tooltip plugin code here

    });

  };
})( jQuery );
//initiate plugin with an options object
var options = { 'location' : 'left' };
$('div').tooltip( options );
0 голосов
/ 17 декабря 2010

Несколько быстрых советов для вас:

  1. В выражении функции, присвоенном jquery.fn (прототипу jQuery), this уже является объектом jQuery. 

    $.fn.method = function( options ) {
    return this.each(function() {
        //do something
    });
}

  2. Обычно одному плагину не рекомендуется использовать 4 имени метода в пространстве имен jquery.fn. Используя jQuery UI Widget framework, вы будете использовать только одно имя метода 

    $.widget("cybrix.coolDialog", {
    ...
    close: function() { ... },
    open: function() { ... },
    assign: function() { ... }
}

    Тогда 

    $("#dialogTest").coolDialog('close');
$("#dialogTest").coolDialog('open');
$("#dialogTest").coolDialog('assign');

    Вы могли бы сделать это или нечто подобное без зависимости от jquery.ui.widget.js

  3. Префикс on необычен для большинства событий jQuery

...