webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/test/Image_3.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     Some advanced tests for qx.ui.basic.Image. Click on the fourth and fifth image to test the reflow possibilities.
  16     The debug log gives you information of the preferred dimensions.
  17   </div>
  18
  19   <script type="text/javascript">
  20   qx.core.Init.getInstance().defineMain(function()
  21   {
  22     var d = qx.ui.core.ClientDocument.getInstance();
  23
  24     var frame = new qx.ui.layout.CanvasLayout;
  25
  26     frame.setBorder(qx.renderer.border.BorderPresets.getInstance().ridge);
  27     frame.setWidth("auto");
  28     frame.setHeight("auto");
  29     frame.setPadding(8);
  30
  31     frame.setLeft(20);
  32     frame.setTop(48);
  33
  34     d.add(frame);
  35
  36
  37     var out = new qx.ui.layout.CanvasLayout;
  38
  39     out.setBorder(qx.renderer.border.BorderPresets.getInstance().inset);
  40     out.setWidth("auto");
  41     out.setHeight("auto");
  42     out.setPadding(8);
  43
  44     frame.add(out);
  45
  46
  47
  48     var bar = new qx.ui.layout.CanvasLayout;
  49
  50     bar.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
  51     bar.setWidth("auto");
  52     bar.setHeight("auto");
  53     bar.setPadding(4);
  54     bar.setBackgroundColor(new qx.renderer.color.Color("white"));
  55
  56
  57     out.add(bar);
  58
  59
  60
  61
  62     var part, icon;
  63     var icons = [ "reload", "bookmark", "run" ];
  64
  65
  66     for (var j=0; j<5; j++)
  67     {
  68       part = new qx.ui.layout.CanvasLayout;
  69
  70       part.setWidth("auto");
  71       part.setHeight("auto");
  72       part.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
  73       part.setLeft(j*90);
  74       part.setTop(0);
  75       part.setBackgroundColor(new qx.renderer.color.ColorObject("Threedface"));
  76       part.setPadding(4);
  77
  78       for (var i=0; i<icons.length; i++)
  79       {
  80         icon = new qx.ui.basic.Image("icon/22/" + icons[i] + ".png");
  81
  82         icon.setTop(0);
  83         icon.setLeft(26 * i);
  84         icon.setPadding(2);
  85
  86         part.add(icon);
  87       };
  88
  89       bar.add(part);
  90     };
  91
  92
  93
  94
  95
  96
  97
  98     bar.addEventListener("click", function(e)
  99     {
 100       var parts = bar.getChildren();
 101       var icons;
 102       var m;
 103       var s = (new Date).valueOf();
 104
 105       for (var j=0; j<parts.length; j++)
 106       {
 107         icons = parts[j].getChildren();
 108
 109         for (var i=0; i<icons.length; i++)
 110         {
 111           m = icons[i].getSource().indexOf("/22/") != -1;
 112           icons[i].setSource(m ? icons[i].getSource().replace("/22/", "/32/") : icons[i].getSource().replace("/32/", "/22/"));
 113           icons[i].setLeft(m ? 36 * i : 26 * i);
 114         };
 115
 116         parts[j].setLeft(m ? j * 120 : j * 90);
 117       };
 118
 119       // this.debug("Change Duration: " + ((new Date).valueOf() - s));
 120     });
 121   });
 122   </script>
 123 </body>
 124 </html>