Require + TinyDOM Example

by Jason Miller

HTML

require demo

CSS

body{color:#555; font-family:arial,sans-serif;}
*{cursor:default;}

JavaScript

/*
** require.path **
You can set this to "//supbitch.com/jslibs/", and then put foo.js files there to require('foo') here.

** require.paths **
Custom lib path overrides, like:
require.paths.picolib = '//html5man.com/jslibs/picolib.js';

** Basic Usage **
require('tinydom', function(lib) {
    // 'lib' is now tinydom.
    // You can call the injected library anything you want,
    // or you can just leave that out and reference a global.
});

** Multiple Require **
require('tinydom,picolib,jsSHA', function(dom, pico, sha) {
    console.log({
        tinydom : dom,
        picolib : pico,
        jsSHA   : sha
    });
});
*/


// stick this in your page (@top, probably using an inline script)
function require(lib,cb){var a=arguments,s,p,d=document,r=require,g=r.paths,h=r.path,w=window,k=lib.split(',');if(a.length>2){k=k.concat(Array.prototype.slice.call(a,1,a.length-1));cb=a[a.length-1];}if(k.length>1){d=0;g=[];p=function(l){d++;if(d>=k.length){h=[];for(d=g.length;d--;){h[d]=w[g[d]];}cb.apply(cb,h);}};for(s=0;s<k.length;s++){g.push(r(k[s],p));}return;}if(/^\w{3,9}\:\/\//.test(lib)){p=lib;lib=(/([^\/]+)\.\w+$/gim).exec(lib)[1];}else{p=g[lib];if(!p)p=h.replace('{lib}',lib);if(p===h)p=h+lib+'.js';}if(w[lib]){cb(w[lib]);}else{s=d.createElement('script');s.onload=s.onerror=function(){cb(w[lib]=w[lib]||true);cb=null;};s.src=p;(d.getElementsByTagName('head')[0]||d.body).appendChild(s);}return lib;}
require.path='//html5man.com/jslibs/';
require.paths={};



/** Example!!!!11!!!1 */

function doStuff() {
    require('tinydom,picolib', function(dom, pico) {
        var f = dom.el({
            css : 'position:absolute;left:200px;top:200px;width:100px;height:100px;background:#DDD;overflow:auto;border-radius:5px;box-shadow:0 0 9px #999;border:2px solid #FFF;',
            innerHTML : 'loading xkcd'
        }, document.body).css({
            left   : 50,
            top    : 50,
            width  : 400,
            height : 400
        }, {tween:'medium'});
        
      ...