スライド1: [id] uu.id(id, ctx = document) → node [bind] uu.ev(node, "click,mousemove+", fn) → node[tag] uu.tag(tag, ctx = document) → [node...] [unbind] uu.ev.unbind(node) → node[class] uu.klass("class ...", ctx = document) → [node...] [unbind] uu.ev.unbind(node, "click,my.*") → node[css] uu.query(expr, ctx = document) → [node...] uu.ev.has(node, "my.click") → nodeuu(expr, ctx = document) → uu.jam uu.ev.stop(evt) → evt* E[ATTR] :enabled :first-child[extend info]#id E[ATTR=VALUE] :disabled :last-child [custom] uu.ev.fire(node, name, param1, param2) → node.class E[ATTR!=VALUE] :checked :only-child [loop] uu.ev.times(node, "click", cyclic, fn, ...) → nodeE E[ATTR*=VALUE] :empty :first-of-typeE,F E[ATTR^=VALUE] :lang(ja) :last-of-type [toggle class] uu.ev.hover(node, "toggleClassName") → nodeE F E[ATTR$=VALUE] :root :only-of-typeE>F E[ATTR/=”VALUE”i] :not(expr) :nth-child [bind, custom] uu.click(node, param1, param2) → nodeE+F E[ATTR~=VALUE] :target :nth-last-childmousedown, mouseup, mousemove,E~F E[ATTR|=VALUE] :link :nth-of-typemousewheel, click, dblclick, keydown,E{STYLE:VALUE} :visited :nth-last-of-typekeypress, keyup, change, submit, focus, blurE{STYLE=VALUE} :hover [unbind]E{ATTR!=VALUE} :focus :contains("...")E{ATTR*=VALUE} :digitE{ATTR^=VALUE} :negativeE{ATTR$=VALUE} :tweenE{ATTR/=”VALUE”i} :momuupaa.js version 0.7 cheat sheetSELECTOR EVENTuu.ev.more(evt) → { btn, vkey, wheel,clicks, vkeycode }uu.ev.hover(node, enterfn, leavefn) → nodeuu.unclick(node) → nodeunmousedown, unmouseup, unmousemove,unmousewheel, unclick, undblclick, unkeydown,unkeypress, unkeyup, unchange,unsubmit, unfocus, unblur[dom ready] uu.ready(fn, order = 0)E{ATTR>=VALUE} :scope [callback] window.xboot(uu) { ... } ← DOMContentLoadedE{ATTR<=VALUE} ! [callback] window.xwin(uu) { ... } ← window.onloadE{ATTR&=VALUE1~VALUE2} [callback] window.xcanvas(uu) { ... } ← <canvas> ready
スライド2: ATTRIBUTE[get all] uu.attr(node) → { all: attrs, ... } [build nodes] uu.div(uu.a(), uu.p()) → <div>[get] uu.attr(node, "title") → "title val" [build text] uu.div(":hello") → <div>hello</div>[get] uu.attr(node, "title,id") → { title: "val", id: "val" } [build text] uu.div(uu.text("hello")) → <div>hello</div>[set] uu.attr(node, "title", "hello") → node [with attr] uu.div("title,hello") → <div title="hello">[set] uu.attr(node, { title: "hello", id: "yes") → node [with attr] uu.div({ title: "hello" }) → <div title="hello">CLASS NAMEuu.klass.has(node, "class1 class2") → Boolean [with style] uu.div("", "color,red") → <div style="color:red">uu.klass.add(node, "class1 class2") → node [with style] uu.div("", {color: "red" }) → <div style="color:red">uu.klass.sub(node, "class1 class2") → node [add/ref] uu.html(...) → <html>uu.klass.toggle(node, "class1 class2") → node [add/ref] uu.head(...) → <head>NODE[add/ref] uu.body(...) → <body>[build HTML4] uu.img(...) → <img>[add to body] uu.node(uu.div()) → <div> img, iframe, input, li, ol, option, p, pre,uu.node.remove(node) → node [build HTML5] uu.canvas(...) → <canvas>[clone] uu.node.bulk(node) → DocumentFragment datalist, details, dialog, eventsource, figure,[build] uu.node.bulk("<p>txt</p>") → DocumentFragment footer, header, hgroup, mark, menu,[create id] uu.nodeid(node) → nodeid [callback] window.xtag(uu, <div>, "tagid") ← uu.div("#tagid")[extract] uu.nodeid.toNode(nodeid) → node [callback] window.xtag(uu, <div>, 123) ← uu.div(123)[remove id] uu.nodeid.remove(node) → node[with href] uu.a("url:http://...") → <a href="http://...">[with src] uu.img("url:http://...") → <img src="http://...">[with src] uu.iframe("url:http://") → <iframe src="http://">a, b, br, dd, div, dl, dt, h1, h2, h3, h4, h5, h6, i,[add to ctx] uu.node(uu.div(), ctx) → <div> select, span, table, tbody, tr, td, th, tfoot,[add to ctx] uu.node("<div>hello</div>", ctx) → <div> textarea, u, ul[childNode?] uu.node.has(node, ctx) → true abbr, article, aside, audio, bb, canvas, datagrid,uu.node.swap(swapin, swapout) → swapout node meter, nav, output, progress, section, time, videouu.node.clear(ctx) → ctxNODE BUILDER
スライド3: Array[through] uu.ary([1, 2]) → [1,2] [camel] uu.fix("background-color") → "backgroundColor"[convert] uu.ary(NodeList) → [node, ...] [xbrowse] uu.fix("float") → "cssFloat" or "styleFloat"(IE)[convert] uu.ary(Arguments) → [arg, ...] [trim] uu.trim("□A□□B□□C□") → "A□□B□□C"[split ,] uu.ary("token,token") → ["token", "token"] [inner too] uu.trim.inner("□A□□B□□C□") → "A□B□C"[has literals] uu.ary.has([1, 2], [1, 2, 3]) → true [split sp] uu.split("□A□□B□□C□") → ["A", "B", "C"][has nodes] uu.ary.has(<body>, [<head>, <body>]) → true [comma too] uu.split.comma(",□,,A,,B,C,□") → ["A", "B", "C"]uu.ary.sort([0, 1, 2], "0-9") → [0, 1, 2]uu.ary.clean([,,1,2,,]) → [1, 2][nodes] uu.ary.unique([<body>, "9-0", <body>]) "a-z", "z-a" → [<body>][literal] uu.ary.unique([0,1,2,1,0], 1) → [0, 1, 2] [detect] uu.type("str") → 0x100 (uu.STR)uu.each([...], function(v, i) { ... }) [multi] uu.type("str", uu.STR | uu.NUM) → trueHash[clone] uu.mix({}, hash) → cloned hash [define] uu.HASH, uu.NODE, uu.FAKE, uu.RGBA, uu.NULL,[through] uu.hash({ key: mix }) → { key: mix } uu.REX, uu.ARY, uu.FUNC, uu.DATE[to hash] uu.hash("key", mix) → { key: mix }[split ,] uu.hash("A,a,B,b") → { A: "a", B: "b" }uu.hash.size({ a: 1, b: 2 }) → 2 [meta] uu.ver = { ua, re, sl, fl, ie, ie6, ie7, ie8, ie67,[combine] uu.hash.combine(["a", "b"], [1, 2]) → { a:1, b:2} [alias] uu.ie, uu.ie6, uu.ie7, uu.ie8, uu.ie67,[find val] uu.hash.indexOf({a: 1, b: 2, c: 2}, 2) → "b" uu.opera, uu.gecko, uu.webkit[find val] uu.hash.hasValue({ a: 1, b: 2 }, 2) → trueuu.isnum(123) → trueuu.isstr("str") → trueuu.isary([]) → trueStringTypeuu.isfunc(function(){}) → true[mixin] uu.mix(base, flavor, aroma, override = 1) → base uu.isnum(123) → true[default arg] uu.arg(arg1, arg2, arg3) → new hash uu.UNDEF, uu.BOOL, uu.NUM, uu.STR,Otheruu.hash.keys({ a: 1, b: 2 }) → ["a", "b"] opera, gecko, webkit, chrome, safari,uu.hash.values({ a: 1, b: 2 }) → [1, 2] iphone, quirks, advanced, majority, lib }uu.hash.has({a:1, b:2}, {a:1, b:2, c:3}) → true [export scope] uu.exp(node, prefix, suffix)[eval] uu.js("js code") → eval result
スライド4: [create] uu.jam(expr, ctx) → new uu.jam(expr, ctx) show(fadein = 0, endopacity = 1) → this[alias] uu(expr, ctx) → new uu.jam(expr, ctx) hide(fadeout = 0) → this[find node idx] index(node) → Number, -1 is not found [toggle class] hover("toggleClassName") → this[find node] first() → [node, ...] [get] html() → [innerHTML, ...][add] first(node) → this [set] html("<p>text</p>") → this[add] first("<p>text</p>") → this [get] text() → [innerText, ...]prev(...), next(...), last(...), [set] text("text") → thisfirstChild(...), lastChild(...), add(...) [get] val() → [value, ...]remove() → this [set] val("value") → this[get] attr("title") → ["title", ...] each(function(v, i) { ... }) → this[get] attr("title,id") → [{ title: "val", id: "val" }, ...][set] attr(node, "title", "hello") → this[set] attr(node, { title: "hello", id: "yes") → this ~ STACK ~[add] klass("class1 class2") → tthis find(expr) → this[sub] klass("-class1 class2") → this back() → this[toggle] klass("*class1 class2") → this[clear] klass() → this e.g.[get] css("color") → ["red", ...] uu("div.note").css(“bgcolor”, “skyblue”).hide(300);[get] css("color,width") → [{ color: "red", width: "20px"}, ...][set] css("color", "red") → this[set] css({ color: "red" }) → thisuu.jambind("click", fn) → this[nodeset nth] nth(n = 0) → node or void 0 unbind("click") → this[nodeset size] size() → Number hover(enterfn, leavefn) → this