diff options
Diffstat (limited to 'webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/test/BoxLayout_1.html')
| -rw-r--r-- | webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/test/BoxLayout_1.html | 283 |
1 files changed, 0 insertions, 283 deletions
diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/test/BoxLayout_1.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/test/BoxLayout_1.html deleted file mode 100644 index 36bcf5f9a2..0000000000 --- a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/test/BoxLayout_1.html +++ /dev/null @@ -1,283 +0,0 @@ -<html> -<head> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> - <title>qooxdoo » Demo</title> - <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> - <!--[if IE]> - <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> - <![endif]--> - <script type="text/javascript" src="../../script/qx.js"></script> -</head> -<body> - <script type="text/javascript" src="../../script/layout.js"></script> - - <div id="testCommand" class="manualFrame"> - <style type="text/css"> - #testCommand{ - position: absolute; - right: 335px; - bottom: 48px; - width: 350px; - } - - .setform select{ - font-size: 11px; - min-width: 75px; - } - - .setform button{ - font-size: 11px; - } - </style> - - <table class="setform"><tbody> - - <tr> - <td> - <label for="sel_orientation">Orientation:</label> - </td> - <td> - <select id="sel_orientation"> - <option selected="selected">horizontal</option> - <option>vertical</option> - </select> - </td> - </tr> - - <tr> - <td>Width/Height:</td> - <td> - <select id="sel_width"> - <option>100</option> - <option selected="selected">250</option> - <option>500</option> - <option>auto</option> - </select> - <select id="sel_height"> - <option>100</option> - <option selected="selected">250</option> - <option>500</option> - <option>auto</option> - </select> - </td> - </tr> - - <tr> - <td>Spacing/Padding:</td> - <td> - <select id="sel_spacing"> - <option selected="selected">0</option> - <option>2</option> - <option>4</option> - <option>8</option> - </select> - <select id="sel_padding"> - <option selected="selected">0</option> - <option>2</option> - <option>4</option> - <option>8</option> - </select> - </td> - </tr> - - <tr> - <td> - <label for="sel_order">Order/Stretching:</label> - </td> - <td> - <select id="sel_order"> - <option selected="selected">default</option> - <option>reverse</option> - </select> - <select id="sel_stretch"> - <option selected="selected">enabled</option> - <option>disabled</option> - </select> - </td> - </tr> - - <tr> - <td>Horizontal/Vertical Align:</td> - <td> - <select id="sel_horalg"> - <option selected="selected">left</option> - <option>center</option> - <option>right</option> - </select> - <select id="sel_veralg"> - <option selected="selected">top</option> - <option>middle</option> - <option>bottom</option> - </select> - </td> - </tr> - - <tr> - <td> </td> - <td> - <button id="btn_save">Apply</button> - </td> - </tr> - - </tbody></table> - - <p><b>Tests</b></p> - <ul> - <li><a href="javascript:test1()">Test 1: Remove blue widget</a></li> - <li><a href="javascript:test2()">Test 2: Add blue widget</a></li> - <li><a href="javascript:test3()">Test 3: Add blue widget at position 2</a></li> - <li><a href="javascript:test4()">Test 4: Add blue widget at position 4</a></li> - <li><a href="javascript:test5()">Test 5: Add green widget at before the cdrom</a></li> - <li><a href="javascript:test6()">Test 6: Add green widget at after the color palette</a></li> - <li><a href="javascript:test7()">Test 7: Add new widget to layout</a></li> - </ul> - </div> - - <div id="demoDescription"> - <p>Now something more complex. Try to configure multiple things and then press <apply>.</p> - </div> - - <script type="text/javascript"> - - var bl, w1, w2, w3, w4, w5, w6, w7, w8; - - var _b = document.getElementById("btn_save"); - var _t = document.getElementById("sel_orientation"); - var _w = document.getElementById("sel_width"); - var _h = document.getElementById("sel_height"); - var _s = document.getElementById("sel_spacing"); - var _p = document.getElementById("sel_padding"); - var _o = document.getElementById("sel_order"); - var _r = document.getElementById("sel_stretch"); - var _l = document.getElementById("sel_horalg"); - var _v = document.getElementById("sel_veralg"); - - function save() - { - var vt = _t.options[_t.selectedIndex].firstChild.nodeValue; - var vw = _w.options[_w.selectedIndex].firstChild.nodeValue; - var vh = _h.options[_h.selectedIndex].firstChild.nodeValue; - var vs = _s.options[_s.selectedIndex].firstChild.nodeValue; - var vp = _p.options[_p.selectedIndex].firstChild.nodeValue; - var vo = _o.options[_o.selectedIndex].firstChild.nodeValue; - var vr = _r.options[_r.selectedIndex].firstChild.nodeValue; - var vl = _l.options[_l.selectedIndex].firstChild.nodeValue; - var vv = _v.options[_v.selectedIndex].firstChild.nodeValue; - - bl.setOrientation(vt); - bl.setWidth(vw == "auto" ? vw : parseInt(vw)); - bl.setHeight(vh == "auto" ? vh : parseInt(vh)); - bl.setSpacing(parseInt(vs)); - bl.setPadding(parseInt(vp)); - bl.setReverseChildrenOrder(vo == "reverse"); - bl.setStretchChildrenOrthogonalAxis(vr == "enabled"); - bl.setHorizontalChildrenAlign(vl); - bl.setVerticalChildrenAlign(vv); - }; - - if (_b.attachEvent) - _b.attachEvent("onclick", save); - else if (_b.addEventListener) - _b.addEventListener("click", save, false); - - - function test1() - { - bl.remove(w2); - qx.ui.core.Widget.flushGlobalQueues(); - }; - - function test2() - { - bl.add(w2); - qx.ui.core.Widget.flushGlobalQueues(); - }; - - function test3() - { - bl.addAt(w2, 2); - qx.ui.core.Widget.flushGlobalQueues(); - }; - - function test4() - { - bl.addAt(w2, 4); - qx.ui.core.Widget.flushGlobalQueues(); - }; - - function test5() - { - bl.addBefore(w3, w7); - qx.ui.core.Widget.flushGlobalQueues(); - }; - - function test6() - { - bl.addAfter(w3, w4); - qx.ui.core.Widget.flushGlobalQueues(); - }; - - function test7() - { - bl.addAt(w8, 1); - qx.ui.core.Widget.flushGlobalQueues(); - }; - - qx.core.Init.getInstance().defineMain(function() - { - var d = qx.ui.core.ClientDocument.getInstance(); - - bl = new qx.ui.layout.BoxLayout("horizontal"); - bl.setBorder(qx.renderer.border.BorderPresets.getInstance().black); - bl.setBackgroundColor(new qx.renderer.color.Color("white")); - bl.setWidth(250); - bl.setHeight(250); - bl.setTop(48); - bl.setLeft(20); - - w1 = new qx.ui.layout.CanvasLayout; - w1.setBackgroundColor(new qx.renderer.color.Color("orange")); - w1.setMinWidth(20); - w1.setMinHeight(20); - w1.setBorder(qx.renderer.border.BorderPresets.getInstance().black); - - w2 = new qx.ui.layout.CanvasLayout; - w2.setBackgroundColor(new qx.renderer.color.Color("blue")); - w2.setMinWidth(20); - w2.setMinHeight(20); - w2.setBorder(qx.renderer.border.BorderPresets.getInstance().black); - - w3 = new qx.ui.layout.CanvasLayout; - w3.setBackgroundColor(new qx.renderer.color.Color("green")); - w3.setMinWidth(20); - w3.setMinHeight(20); - w3.setBorder(qx.renderer.border.BorderPresets.getInstance().black); - - w4 = new qx.ui.basic.Image("icon/32/colors.png"); - - w5 = new qx.ui.layout.CanvasLayout; - w5.setBackgroundColor(new qx.renderer.color.Color("yellow")); - w5.setMinWidth(20); - w5.setMinHeight(20); - w5.setBorder(qx.renderer.border.BorderPresets.getInstance().black); - - w6 = new qx.ui.layout.CanvasLayout; - w6.setBackgroundColor(new qx.renderer.color.Color("red")); - w6.setMinWidth(20); - w6.setMinHeight(20); - w6.setBorder(qx.renderer.border.BorderPresets.getInstance().black); - - w7 = new qx.ui.basic.Image("icon/64/cdrom.png"); - - w8 = new qx.ui.layout.CanvasLayout; - w8.setBackgroundColor(new qx.renderer.color.Color("fuchsia")); - w8.setMinWidth(20); - w8.setMinHeight(20); - w8.setBorder(qx.renderer.border.BorderPresets.getInstance().black); - - bl.add(w1, w2, w3, w4, w5, w6, w7); - d.add(bl); - }); - </script> -</body> -</html>
\ No newline at end of file |