diff options
Diffstat (limited to 'webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/test/CSS_1.html')
-rw-r--r-- | webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/test/CSS_1.html | 110 |
1 files changed, 110 insertions, 0 deletions
diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/test/CSS_1.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/test/CSS_1.html new file mode 100644 index 0000000000..c49016803d --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/test/CSS_1.html @@ -0,0 +1,110 @@ +<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> + + <style type="text/css"> + + .box { + position: absolute; + width: 100px; + height: 100px; + left: 30px; + top: 40px; + color: white; + padding: 5px; + } + + #box1 { + background-color: red; + } + + #box2 { + background-color: blue; + top: 200px; + left: 100px; + } + + </style> + +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>Some tests of qx.dom.StyleSheet</p> + </div> + + + <div id="box1" class="box"> + Box 1 + </div> + + <div id="box2" class="box"> + Box 2 + </div> + + <div style="display:none" id="control"> + <p> + <h3>Box 1</h3> + <a href="javascript://" onclick="qx.dom.StyleSheet.addRule(sheet, '#box1', 'background-color:green !important');">qx.dom.StyleSheet.addRule(style, '#box1', 'background-color:green !important')</a> <br> + <a href="javascript://" onclick="qx.dom.StyleSheet.removeRule(sheet, '#box1');">qx.dom.StyleSheet.removeRule(sheet, '#box1')</a> <br> + </p> + <h3>Box 1</h3> + <a href="javascript://" onclick="qx.dom.StyleSheet.addRule(sheet, '#box2', 'background-color:yellow !important');">qx.dom.StyleSheet.addRule(style, '#box2', 'background-color:yellow !important')</a> <br> + <a href="javascript://" onclick="qx.dom.StyleSheet.removeRule(sheet, '#box2');">qx.dom.StyleSheet.removeRule(sheet, '#box2')</a> <br> + <p> + <h3>All</h3> + <a href="javascript://" onclick="qx.dom.StyleSheet.removeAllRules(sheet)">qx.dom.StyleSheet.removeAllRules(sheet)</a> <br> + </p> + <p> + <h3>Import</h3> + add Import <br> + <a href="javascript://" onclick="qx.dom.StyleSheet.addImport(sheet, 'bigFont.css')">qx.dom.StyleSheet.addImport(sheet, 'bigFont.css')</a> <br> + <a href="javascript://" onclick="qx.dom.StyleSheet.addImport(sheet, 'boldFont.css')">qx.dom.StyleSheet.addImport(sheet, 'boldFont.css')</a> <br> + remove Import<br> + <a href="javascript://" onclick="qx.dom.StyleSheet.removeImport(sheet, 'bigFont.css')">qx.dom.StyleSheet.removeImport(sheet, 'bigFont.css')</a> <br> + <a href="javascript://" onclick="qx.dom.StyleSheet.removeImport(sheet, 'boldFont.css')">qx.dom.StyleSheet.removeImport(sheet, 'boldFont.css')</a> <br> + remove all Imports<br> + <a href="javascript://" onclick="qx.dom.StyleSheet.removeAllImports(sheet)">qx.dom.StyleSheet.removeAllImports(sheet)</a> <br> + </p> + + </div> + + <script type="text/javascript"> + + var sheet = qx.dom.StyleSheet.createElement(); + + qx.core.Init.getInstance().defineMain(function() + { + var d = qx.ui.core.ClientDocument.getInstance(); + + var ct1 = new qx.ui.basic.Label(document.getElementById("control").innerHTML); + + with(ct1) + { + setWidth(450); + setRight(335); + + setHeight(null); + setTop(48); + setBottom(48); + + setOverflow("auto"); + + setBackgroundColor(new qx.renderer.color.Color("white")); + setBorder(qx.renderer.border.BorderPresets.getInstance().groove); + setPadding(10); + }; + + d.add(ct1); + }); + + </script> +</body> +</html> |