webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Resizer_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>Test for qx.ui.resizer.Rezizer.</p>
  16     <p>
  17       The Resizer widget acts as a wrapper of another widget.  It allows the child widget to be resized by the end user.
  18     </p>
  19   </div>
  20
  21   <script type="text/javascript">
  22     function newResizer() {
  23       var tArea = new qx.ui.form.TextArea;
  24       tArea.setValue("Resize me\nI'm resizable");
  25       tArea.set({
  26         minWidth: 100,
  27         minHeight: 50,
  28         width: 200,
  29         height: 100
  30       });
  31       return new qx.ui.resizer.Resizer(tArea);
  32     }
  33
  34     function newHBox() {
  35       var hBox = new qx.ui.layout.BoxLayout;
  36       hBox.set({
  37         spacing: 10
  38       });
  39       hBox.auto();
  40       hBox.add(newResizer(), newResizer());
  41       return hBox;
  42     }
  43
  44     qx.core.Init.getInstance().defineMain(function() {
  45       var vBox = new qx.ui.layout.VerticalBoxLayout;
  46       var list = new qx.ui.form.List;
  47       list.set({width: 100, height: 200, minWidth: 50, minHeight: 100, overflow: 'auto'});
  48       for (var i = 0; i < 100; i++) {
  49         list.add(new qx.ui.form.ListItem('Option number '+i));
  50       }
  51       vBox.add(new qx.ui.resizer.Resizer(list));
  52       vBox.set({
  53         spacing: 10,
  54         top: 50,
  55         left: 30
  56       });
  57       vBox.auto();
  58       vBox.add(newHBox(), newHBox());
  59       vBox.addToDocument();
  60     });
  61   </script>
  62 </body>
  63 </html>