swat/apps/qooxdoo-examples/example/CheckBox_1.html

   1 <html>
   2 <head>
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   4   <title>qooxdoo &raquo; Demo</title>
   5   <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/>
   6   <!--[if IE]>
   7   <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/>
   8   <![endif]-->
   9   <script type="text/javascript" src="../../script/qx.js"></script>
  10 </head>
  11 <body>
  12   <script type="text/javascript" src="../../script/layout.js"></script>
  13
  14   <div id="demoDescription">
  15     <p>Tests for qx.ui.form.CheckBox. qx.ui.form.CheckBox extends qx.ui.basic.Atom and so it inherits all the options and properties defined there.</p>
  16   </div>
  17
  18   <script type="text/javascript">
  19   qx.core.Init.getInstance().defineMain(function()
  20   {
  21     var d = qx.ui.core.ClientDocument.getInstance();
  22
  23     var c1 = new qx.ui.form.CheckBox("Send Data to Server", "c1checked", "c1");
  24     with(c1)
  25     {
  26       setTop(48);
  27       setLeft(20);
  28     };
  29     d.add(c1);
  30
  31     var c2 = new qx.ui.form.CheckBox("Delete all Data on Server", "c2checked", "c2");
  32     with(c2)
  33     {
  34       setTop(78);
  35       setLeft(20);
  36     };
  37     d.add(c2);
  38     c2.setChecked(true);
  39
  40
  41     var c3 = new qx.ui.form.CheckBox("Top Checkbox", "c3checked", "c3");
  42     with(c3)
  43     {
  44       setTop(120);
  45       setLeft(20);
  46       setIconPosition("top");
  47     };
  48     d.add(c3);
  49
  50     var c4 = new qx.ui.form.CheckBox("Bottom Checkbox", "c4checked", "c4");
  51     with(c4)
  52     {
  53       setTop(120);
  54       setLeft(140);
  55       setIconPosition("bottom");
  56     };
  57     d.add(c4);
  58
  59
  60     var c5 = new qx.ui.form.CheckBox("Left Checkbox", "c5checked", "c5");
  61     with(c5)
  62     {
  63       setTop(180);
  64       setLeft(20);
  65       setIconPosition("left");
  66     };
  67     d.add(c5);
  68
  69     var c6 = new qx.ui.form.CheckBox("Right Checkbox", "c6checked", "c6");
  70     with(c6)
  71     {
  72       setTop(180);
  73       setLeft(140);
  74       setIconPosition("right");
  75     };
  76     d.add(c6);
  77
  78     var c7 = new qx.ui.form.CheckBox(null, "c7checked", "c7");
  79     with(c7)
  80     {
  81       setTop(250);
  82       setLeft(20);
  83     };
  84     d.add(c7);
  85
  86     var c8 = new qx.ui.form.CheckBox(null, "c7checked", "c7");
  87     with(c8)
  88     {
  89       setTop(300);
  90       setLeft(20);
  91       setLabel("Label pure");
  92       setShow("label");
  93       setBorder(qx.renderer.border.BorderPresets.getInstance().black);
  94       setBackgroundColor(new qx.renderer.color.Color("red"));
  95     };
  96     d.add(c8);
  97
  98     c8.addEventListener("changeChecked", function(e) {
  99       this.setBackgroundColor(new qx.renderer.color.Color(this.getChecked() ? "green" : "red"));
 100     });
 101   });
 102   </script>
 103 </body>
 104 </html>