[jQuery] jQuery OOP Question - Need Suggestions
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;
}
}
}