views:

11

answers:

0

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 );