Home
JS
D-h
Links
Sign in
PyOoHtml - JS ---
JavaScript port of Python Object Oriented HTML
Tutorial 1
// the argument is an element var div = new PyOoHtml.Node(document.getElementById("out1")); div.B("An element").text(" - "); // the argument is the element ID div = new PyOoHtml.Node("out1"); div.text("The element ID").BR(); // escape the text div.text("Escaped text: <b>Bold</b>"); // does not escape the text div.html("<hr>Not escaped text: <b>Bold</b>");
Tutorial 2
var div = new PyOoHtml.Node("out2"); // When the first argument is text, return the parent div.CODE("code").U("underline").text("text").B("bold").I("italic").HR() // When the first argument is not text, return self div.CODE().U("underline").A("link", {href: "http://python.org"}) div.HR() // When return the parent, child exists div.U("PARENT").child.CODE("underline").I("italic").text("text").B("bold")
Tutorial 3
var div = new PyOoHtml.Node("out3"); // See all supported TAGS div.B("TAGS: ") for (var i in PyOoHtml.TAGS) { div.CODE().U(PyOoHtml.TAGS[i].toUpperCase()).text(" ") }
Tutorial 4
var div = new PyOoHtml.Node("out4"); // tag function: name (mandatory), attributes (optional) var a = div.tag("a", {href: "http://python.org"}) a.text("Link");
Tutorial 5
var div = new PyOoHtml.Node("out5"); // selected option select = div.SELECT({name: "select", multiple: true, size: "2"}) select.OPTION("Value 1", {value: "val1"}) select.OPTION("Value 2", {value: "val2", selected: true})
Tutorial 6
var div = new PyOoHtml.Node("out6"); div.text("Before empty..."); alert("Before empty..."); // empty function div.empty().B("...after empty function");
Tutorial 7
var div = new PyOoHtml.Node("out7"); // table function fix the IE problems var table = div.table({border: "1"}); var tr = table.TR(); tr.TD("td 1.1"); tr.TD("td 1.2"); tr = table.TR(); tr.TD("td 2.1"); tr.TD("td 2.2");
Tutorial 8
var div = new PyOoHtml.Node("out8"); // readOnly is case sensitive div.INPUT({type: "text", value: "read only", readOnly: true}); div.BR(); // readonly does not work! div.INPUT({type: "text", value: "not read only", readonly: true});