Hi everyone
this is my first post so I hope I am posting to the right place.
I am trying to develop a dialog/modal plugin. this is my first plugin and I'm not sure if I have produced it in the correct way. The problem I am having is that the $.extend is not updating the settings object. I've got 2 elements using the plugin. the #dialog element is not extending the plugins settings object. I've been trying for a couple of days to learn how plugins work and its killing me from the inside :)
$("#icon_menu").Dialog(); $("#dialog").Dialog({closeable:false,clear_on_close : true});
Any help you can give me would be greatly appreciated
Thanks
Mac :)
here is the code
(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 );