jquery插件扩展默认值问题

Question

这是我的第一篇文章，所以我希望我发布到正确的地方。

我正在尝试开发一个对话框/模式插件。这是我的第一个插件，我不确定我是否以正确的方式制作了它。我遇到的问题是 $.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 );

Answer 1

问题是你的插件有一个内部状态。每次在对象上调用对话框方法时，都会创建一个新状态——旧状态永远不会被引用或保存。

阅读本教程中的数据部分，了解有关如何跨函数调用存储状态的更多想法：http:// /docs.jquery.com/Plugins/Authoring#Data

Answer 2

这是我通常使用的模式。请注意，我在插件代码中定义默认值后直接应用它们。我的模式也不是 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)

Answer 3

这是创建 jquery 插件的绝佳资源：

http://jqueryboilerplate.com/