Hi all, I found a few threads related to jQuery OOP, but since I'm pretty new to OOP maybe I just was not understanding a few things.
I pasted some code below, and it's my attempt at OOP, but is there a way to make this code more jQuery like? Or just better in general? All suggestions are welcome. Thanks. function jsWindow (opts){ var settings = $.extend( { title: 'Window', width: 400, dialogClass: 'jsWindow' }, opts ); this.width = settings.width; this.height = settings.height; this.title = settings.title; var self = this; // reference to object var $self; // will be used as reference to jQuery HTML element upon this.create.window() this.create = { window: function(){ $window = $('<div></div>'); $window .addClass(settings.dialogClass) .css( { width: settings.width} ) .append('<h2></h2>') .find('h2') .text(settings.title) .end() .append('<div></div>') .find('div') .addClass('content') .end() .append('<div></div>') .find('div') .eq(1) .addClass('buttons'); $self = $window; return $window; }, button: function (buttonType, buttonText, callback){ callback = (typeof(callback) == 'undefined') ? function(){} : callback; var $button = $('<button></button>'); $button .addClass(buttonType + 'Class') .text(buttonText) .click( function(){ callback(); self.close(); } ); return $button; } } this.add = { button: function(btn){ $self.find('div.buttons').append(btn); } } this.set = { title: function(string){ self.title = string; }, width: function(integer){ self.width = integer; $self.css({ width: integer }); }, height: function(integer){ self.height = integer; $self.css({ height: integer }); }, position: function(oTop, oLeft){ $self.css( { position: 'absolute', top: oTop, left: oLeft } ); }, content: function(oContent, oType){ switch (oType){ case 'url': $self.find('div.content').load(oContent); break; case 'html': $self.find('div.content').html(oContent); break; default: $self.find('div.content').html(oContent); break; } } } this.center = function(){ var viewWidth = $(window).width(); var viewHeight = $(window).height(); oLeft = (cleanInt(viewWidth, 'px') / 2) - (cleanInt(self.width, 'px') / 2); oTop = (cleanInt(viewHeight, 'px') / 2) - (cleanInt($self.height(), 'px') / 2); self.set.position(oTop, oLeft); } this.open = function (fx, speed){ if (typeof(fx) == 'undefined') { $self.appendTo('body').show(); } else { $self.appendTo('body').hide().animate(fx, speed); } } this.close = function(fx, speed){ if (typeof(fx) == 'undefined') { $self.remove(); } else { $self.animate(fx, speed, function(){ $(this).remove() }); } } function cleanInt(oString, unit){ if (typeof(oString) == 'string'){ var index = oString.indexOf(unit); var clean = (index != -1) ? parseInt(oString.substring(0, index)) : parseInt(oString); return clean; } else { return oString; } } }