[jQuery] Help with a basic module
I'm trying to get an understanding of jQuery modules, so I thought I'd
start simple (perhaps too simple...)
Anyway, here is what I have:
jQuery.table.js:
(function($) {
$.Table = {
build: function(settings) {
var table = $('<table class="testTable"></table>');
var headRow = $('<tr></tr>').appendTo(table);
var rhcol_one = $('<th>' + settings.rhcol1 + '</
th>').appendTo(headRow);
var rhcol_two = $('<th>' + settings.rhcol2 +'</
th>').appendTo(headRow);
var row_one = $('<tr></tr>').appendTo(table);
var r1col_one = $('<td>' + settings.r1col1 + '</
td>').appendTo(row_one);
var r1col_two = $('<td>' + settings.r1col2 + '</
td>').appendTo(row_one);
return $(table);
}
};
})(jQuery);
function testthisout() {
$("body").append(' Whopee!
');
$("body").append(jQuery.Table.build({
rhcol1: 'Header 1',
rhcol2: 'Header 2',
r1col1: 'Row 1 Col 1',
r1col2: 'Row 1 Col 2',
}));
}
I then have a simple html page built with a link whose onclick calls
testthisout.
Now maybe I'm misunderstanding things, but if I want to be able to
chain stuff onto my "table" module, I need to return a jQuery object
from it. I *think* that that is what I'm doing, as far as I can
understand things. Can anyone confirm this?
Also, is there a cleaner way to hide all the rhcol1...etc stuff? I
want to be able to pass information along that way, but when I append
the table I want to do it like: $
("body").append(jQuery.Table.build(my_table_info)).doSomethingElse(my_other_stuff)
(etc etc etc). Should I just build all that info into a var and
that's it?
I'm trying to avoid buildDOMxxxxxElement calls. Is there a better way
to do that than what I'm trying? jQuery just seems a lot nicer than
that.
I appologize if this seems noobie-ish. In truth I'm going to be
building more complex modules; I just want to get a firm grasp on this
at a simple level before I dive into that.