@@ -30,6 +30,13 @@ ] } ).appendTo('#test-container'); + + TABLE( + TR( TH('This is'), TH('another table') ), + TR( TD('generated using'), TD('shortcut methods') ), + {style: "margin:20px auto"} + ).appendTo('#test-container-2'); + }); </script> </head> @@ -78,6 +85,18 @@ <div id='test-container'></div> + <p>It's also possible to use shortcut methods for each tag although by using + these you forgo the ability to neatly specify IDs/classes: + + <div class='caption'>Example:</div> + <pre>TABLE( + TR( TH('This is'), TH('another table') ), + TR( TD('generated using'), TD('shortcut methods') ), + {style: "margin:20px auto"} +).appendTo('#test-container-2');</pre> + + <div id='test-container-2'></div> + <p>The general form of each call to <code>$$()</code> is:</p> <pre>$$(nodeName, content1, content2 ... contentN, options);</pre> dom-builder.html @@ -1,6 +1,6 @@ /** * Simple DOM Builder - * (c) 2008 Jason Frame (jason@onehackoranother.com) + * (c) 2008, 2009 Jason Frame (jason@onehackoranother.com) * * Usage: * @@ -45,3 +45,27 @@ function $$(tagName) { return $ele; }; + +$$.make = function(tagName) { + return function() { + var args = jQuery.makeArray(arguments); + args.unshift(tagName); + return $$.apply(this, args); + }; +}; + +(function(scope) { + // thank you, http://www.htmldog.com/reference/htmltags/ + var tags = ["a", "abbr", "acronym", "address", "area", "b", "base", "bdo", + "big", "blockquote", "body", "br", "button", "caption", "cite", + "code", "col", "colgroup", "dd", "del", "dfn", "div", "dl", + "dt", "em", "fieldset", "form", "h1", "h2", "h3", "h4", "h5", + "h6", "head", "html", "hr", "i", "img", "input", "ins", "kbd", + "label", "legend", "li", "link", "map", "meta", "noscript", + "object", "ol", "optgroup", "option", "p", "param", "pre", "q", + "samp", "script", "select", "small", "span", "strong", "style", + "sub", "sup", "table", "tbody", "td", "textarea", "tfoot", "th", + "thead", "title", "tr", "tt", "ul", "var"]; + for (var i = 0; i < tags.length; i++) + scope[tags[i].toUpperCase()] = $$.make(tags[i]); +})(this); javascripts/jquery.dom-builder.js 64e40149607f9ed0db848b008678d09c634d9955 Jason Frame jason@magiclamp.co.uk http://github.com/jaz303/jquery-grab-bag/commit/f1a3cc1e86cbb248bcb41391d6eff115b1be6d89 f1a3cc1e86cbb248bcb41391d6eff115b1be6d89 2009-03-03T17:04:23-08:00 2009-03-03T17:04:23-08:00 Added shortcut methods for node creation 43b068ad7502c14cf5c58f64e98e1c659a76e9bd Jason Frame jason@magiclamp.co.uk