swat.obsolete/apps/qooxdoo-examples/example/RadioButton_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.RadioButton. qx.ui.form.RadioButton extends qx.ui.basic.Atom and so it inherits all the options and properties defined there.</p>
  16     <p>To group multiple QxRadioButtons you must define a instance of qx.manager.selection.RadioManager and add them to this new instance. All QxRadioButtons assigned to the same group make sure that only one of them is checked at the same time.</p>
  17     <p>
  18   </div>
  19
  20   <script type="text/javascript">
  21   qx.core.Init.getInstance().defineMain(function()
  22   {
  23     var d = qx.ui.core.ClientDocument.getInstance();
  24
  25     var rb1 = new qx.ui.form.RadioButton("Option #1", "rb1");
  26     with(rb1)
  27     {
  28       setTop(80);
  29       setLeft(20);
  30     };
  31     d.add(rb1);
  32
  33     var rb2 = new qx.ui.form.RadioButton("Option #2", "rb2");
  34     with(rb2)
  35     {
  36       setTop(110);
  37       setLeft(20);
  38     };
  39     d.add(rb2);
  40     rb2.setChecked(true);
  41
  42
  43     var rb3 = new qx.ui.form.RadioButton("Top RadioButton", "rb3");
  44     with(rb3)
  45     {
  46       setTop(160);
  47       setLeft(20);
  48       setIconPosition("top");
  49     };
  50     d.add(rb3);
  51
  52     var rb4 = new qx.ui.form.RadioButton("Bottom RadioButton", "rb4");
  53     with(rb4)
  54     {
  55       setTop(160);
  56       setLeft(160);
  57       setIconPosition("bottom");
  58     };
  59     d.add(rb4);
  60
  61
  62     var rb5 = new qx.ui.form.RadioButton("Left RadioButton", "rb5");
  63     with(rb5)
  64     {
  65       setTop(220);
  66       setLeft(20);
  67       setIconPosition("left");
  68     };
  69     d.add(rb5);
  70
  71     var rb6 = new qx.ui.form.RadioButton("Right RadioButton", "rb6");
  72     with(rb6)
  73     {
  74       setTop(220);
  75       setLeft(160);
  76       setIconPosition("right");
  77     };
  78     d.add(rb6);
  79
  80     var rb7 = new qx.ui.form.RadioButton(null, "rb7");
  81     with(rb7)
  82     {
  83       setTop(280);
  84       setLeft(20);
  85     };
  86     d.add(rb7);
  87
  88
  89     var rg1 = new qx.manager.selection.RadioManager("mygroup", [rb1, rb2, rb3, rb4, rb5, rb6, rb7]);
  90
  91
  92
  93
  94
  95     var linfo = new qx.ui.basic.Atom("Current Value: \"" + rg1.getSelected().getLabel() + "\" (" + rg1.getSelected().getValue() + ")", "icon/16/forward.png");
  96
  97     with(linfo)
  98     {
  99       setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 100       setPadding(2, 4);
 101       setBackgroundColor("white");
 102       setTop(48);
 103       setLeft(20);
 104     };
 105
 106     rg1.addEventListener("changeSelected", function(e) {
 107       linfo.setLabel("Current Value: \"" + e.getData().getLabel() + "\" (" + e.getData().getValue() + ")");
 108     });
 109
 110     d.add(linfo);
 111   });
 112   </script>
 113 </body>
 114 </html>