JQuery плагин расширить проблему по умолчанию - PullRequest
Новая
       23

JQuery плагин расширить проблему по умолчанию

0 голосов
/ 01 октября 2010

это мой первый пост, поэтому я надеюсь, что отправлю в нужное место.

Я пытаюсь разработать диалог / модальный плагин. это мой первый плагин, и я не уверен, правильно ли я его выполнил. У меня проблема в том, что $ .extend не обновляет объект настроек. У меня есть 2 элемента, используя плагин. элемент #dialog не расширяет объект настроек плагинов. Пару дней я пытался узнать, как работают плагины, и это убивает меня изнутри:) 

$("#icon_menu").Dialog();
$("#dialog").Dialog({closeable:false,clear_on_close : true});

Любая помощь, которую вы можете мне оказать, будет принята с благодарностью

вот код 

(function( $ ){

$.fn.Dialog = function( method ) {           

    var elem = this;

    var settings = {
      'mask'         : '#mask',
      'closeable'    : true,
      'clear_on_close' : false
    };

  var methods = {
    init : function( options ) { 

                if ( options ) { 
                    $.extend( settings, options );
                }

                console.log(settings);

            }, 
    open : function( options ) { 

            var window_width = $(window).width();
            var window_height = $(window).height();

            var modal_height = "";
            var modal_width = "";

            var top = "";
            var left = "";

            if(!settings.set_width)
            {
                modal_width = elem.outerWidth();
            }else{
                modal_width = settings.set_width;
            }

            if(!settings.set_height)
            {
                modal_height = elem.outerHeight(); 
            }else{
                modal_height = settings.set_height;
            }

            if(!settings.set_y_pos)
            {
                top = (window_height-modal_height)/2;
            }else{
                top = settings.set_y_pos;
            }

            if(!settings.set_x_pos)
            {
                left = (window_width-modal_width)/2; 
            }else{
                left = settings.set_x_pos;
            }

            elem.addClass('active').css({'top': top + 'px', 'left': left + 'px'});

            $(settings.mask).css({ 'display' : 'block', opacity : 0}).fadeTo(500,0.8);

            elem.css({ 'display' : 'block', opacity : 0}).fadeTo(500,1);

                if(settings.closeable){$(settings.mask).bind('click.Dialog',  methods.close );}

                $(window).bind('scroll.Dialog', methods.reposition);            

    },
    open_ajax : function(options)
    {

        $.get(options.page, function(data){ 
            elem.html(data);
             methods.open();
        });//$.get("sign_in.html",

    },
    close : function( options ) { 

                $(settings.mask).fadeOut(500);

                elem.fadeOut(500);

                //alert(settings.clear_on_close)

                console.log(settings.clear_on_close)

                if(settings.clear_on_close)
                {

                    elem.html("");

                }

                $(window).unbind('scroll.Dialog');
                $(settings.mask).unbind('click.Dialog');


    },
    reposition : function( options )
    {



            $(settings.mask).css({"marginTop": ($(window).scrollTop()) + "px"});
            elem.stop().animate({"marginTop": ($(window).scrollTop()) + "px"},1000);


    }

  };


    if ( methods[method] ) {
      return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else if ( typeof method === 'object' || ! method ) {
      return methods.init.apply( this, arguments );
    } else {
      $.error( 'Method ' +  method + ' does not exist on jQuery.tooltip' );
    }    

  };

})( jQuery );

Ответы [ 3 ]

0 голосов
/ 01 октября 2010

Проблема в том, что ваш плагин имеет внутреннее состояние.Каждый раз, когда вы вызываете метод диалога для объекта, создается новое состояние - на старое состояние никогда не ссылаются и не сохраняют.

Прочтите раздел данных в этом руководстве, чтобы получить больше идей о том, как сохранить состояние между вызовами функций.: http://docs.jquery.com/Plugins/Authoring#Data

0 голосов
/ 04 июля 2012

Это фантастический ресурс для создания плагинов jquery:

http://jqueryboilerplate.com/

0 голосов
/ 01 октября 2010

Это шаблон, который я обычно использую.Обратите внимание, что я применяю настройки по умолчанию сразу после того, как они определены в моем коде плагина.Я не на 100%, мой шаблон тоже правильный.Но это работает . 

(function($) {
$.fn.extend({

    dropList: function(options) {

        var defaults = {
            url: '',
            sortable: false,
            hoverClass: 'ui-state-highlight',
            rowSelected: function() {
            },
            rowDblClicked: function() {
            },
            onDrop:  function(ui) {
            }
        };

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

        return this.each(function() {
            //this is where I act on the selected element
        }
    }
}); })(jQuery)
...