swat.obsolete/apps/qooxdoo-examples/example/GalleryList_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
  11   <style type="text/css">
  12 .qx.ui.embed.GalleryList{
  13   position: absolute;
  14   visibility: visible;
  15 }
  16
  17 .qx.ui.embed.GalleryList .galleryFrame{
  18   padding: 2px;
  19 }
  20
  21 .qx.ui.embed.GalleryList .galleryCell{
  22   margin: 2px;
  23   padding-bottom: 2px;
  24   border: 1px solid #EEE;
  25
  26   background: #fff;
  27   overflow: hidden;
  28   white-space: normal;
  29
  30   font-family: Tahoma, Verdana, sans-serif;
  31   font-size: 12px;
  32
  33   cursor: default;
  34
  35   -moz-user-select: none;
  36   user-select: none;
  37
  38   position: relative;
  39 }
  40
  41 .qx.ui.embed.GalleryList .galleryCell img{
  42   vertical-align: bottom;
  43   display: block;
  44 }
  45
  46 .qx.ui.embed.GalleryList .galleryNumber{
  47   width: 45px;
  48   padding: 4px;
  49
  50   position: absolute;
  51   top: 0px;
  52   left: 0px;
  53 }
  54
  55 .qx.ui.embed.GalleryList .galleryImageContainer{
  56   position: absolute;
  57   top: 0px;
  58   left: 50px;
  59 }
  60
  61 .qx.ui.embed.GalleryList .galleryText{
  62   padding: 4px;
  63   position: absolute;
  64   top: 0px;
  65   left: 130px;
  66 }
  67
  68 .qx.ui.embed.GalleryList .galleryNumber,
  69 .qx.ui.embed.GalleryList .galleryText h3{
  70   font-weight: bold;
  71   font-size: 11px;
  72 }
  73
  74 .qx.ui.embed.GalleryList .galleryText p{
  75   font-size: 10px;
  76 }
  77
  78 .qx.ui.embed.GalleryList .galleryCell-Selected{
  79   background: #9BBCFF;
  80   border-color: #3B7CFF;
  81 }
  82   </style>
  83 </head>
  84 <body>
  85   <script type="text/javascript" src="../../script/layout.js"></script>
  86
  87   <div id="demoDescription">
  88     <p>ListSort implementation</p>
  89   </div>
  90
  91   <script type="text/javascript">
  92     qx.core.Init.getInstance().defineMain(function()
  93     {
  94       var imgPath = qx.manager.object.AliasManager.getInstance().resolvePath("icon/48/bug.png");
  95
  96       var galleryData = [];
  97
  98       for (var i=0; i<100; i++)
  99       {
 100         galleryData.push({
 101           display : "bmzN9ci5",
 102           width : 350,
 103           height : 350,
 104           thumbWidth : 48,
 105           thumbHeight : 48,
 106           title : "gohome.png",
 107           timestamp : Math.random().toString(),
 108           comment : "Cool Comment sadas asd dsa asdas dasd asd asdas dasdasdasd sadasdas dsds as",
 109           id : "7686191121780974-10682",
 110           src : imgPath,
 111           number : "#" + i
 112         });
 113       };
 114
 115       var galleryList = new qx.ui.embed.GalleryList(galleryData);
 116
 117       galleryList.setWidth(400);
 118       galleryList.setTop(48);
 119       galleryList.setBottom(48);
 120       galleryList.setLeft(250);
 121
 122       galleryList.setBorder(qx.renderer.border.BorderPresets.getInstance().inset);
 123       galleryList.setBackgroundColor("white");
 124
 125       qx.ui.core.ClientDocument.getInstance().add(galleryList);
 126     });
 127   </script>
 128 </body>
 129 </html>