3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4 <title>qooxdoo » Demo</title>
5 <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/>
7 <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/>
9 <script type="text/javascript" src="../../script/qx.js"></script>
12 <script type="text/javascript" src="../../script/layout.js"></script>
14 <div id="demoDescription">
15 <p>Test file for qx.ui.embed.Gallery, now with QxToolTips assigned.</p>
16 <button onclick="updateAdd()">Update Add</button>
19 <style type="text/css">
20 .qx.ui.embed.Gallery .galleryFrame{
24 .qx.ui.embed.Gallery .galleryCell{
25 border: 1px solid #444;
31 font-family: Tahoma, Verdana, sans-serif;
36 -moz-user-select: none;
40 .qx.ui.embed.Gallery .galleryCell img{
41 vertical-align: bottom;
45 .qx.ui.embed.Gallery .galleryCell .galleryTitle,
46 .qx.ui.embed.Gallery .galleryCell .galleryComment{
55 .qx.ui.embed.Gallery .galleryCell .galleryTitle{
56 border-bottom: 1px solid #aaa;
59 .qx.ui.embed.Gallery .galleryCell .galleryComment{
60 border-top: 1px solid #aaa;
63 .qx.ui.embed.Gallery .galleryCell-Selected{
65 border: 1px solid #2760A1;
68 .qx.ui.embed.Gallery .galleryCell-Selected .galleryTitle,
69 .qx.ui.embed.Gallery .galleryCell-Selected .galleryComment{
73 .qx.ui.embed.Gallery .galleryCell-Selected .galleryTitle{
74 border-bottom: 1px dotted #2760A1;
77 .qx.ui.embed.Gallery .galleryCell-Selected .galleryComment{
78 border-top: 1px dotted #2760A1;
89 .qx.ui.embed.Gallery .galleryCell{
91 border: 1px solid #DCDFE8;
94 .qx.ui.embed.Gallery .galleryCell-Selected{
95 border: 1px solid #5E6474;
100 <script type="text/javascript">
103 qx.core.Init.getInstance().defineMain(function()
105 var galleryList = [];
107 for (var i=0; i<100; i++)
110 display : "bmzN9ci5",
115 title : "gohome" + i + ".png",
116 timestamp : Math.random().toString(),
117 comment : "Cool Comment: " + i,
118 id : "7686191121780974-10682-" + i,
119 src : qx.manager.object.AliasManager.getInstance().resolvePath("icon/64/paint.png")
123 var gallery = new qx.ui.embed.Gallery(galleryList);
126 gallery.setRight(335);
128 gallery.setBottom(48);
129 gallery.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
130 gallery.setShowTitle(false);
131 gallery.setShowComment(false);
132 gallery.setDecorHeight(0);
134 qx.ui.core.ClientDocument.getInstance().add(gallery);
138 var toolTip = new qx.ui.popup.ToolTip("Photo Details", "icon/32/colors.png");
139 gallery.setToolTip(toolTip);
141 gallery.addEventListener("beforeToolTipAppear", function(e)
143 var vNode = e.getData();
144 var vEntry = this.getEntryByNode(vNode);
146 toolTip.getAtom().setLabel("<strong>" + vEntry.title + "</strong><br/>" + vEntry.comment);
148 this.setToolTip(toolTip);
152 updateAdd = function()
154 var galleryListUpdated = qx.lang.Array.copy(gallery.getList());
156 for (var i=galleryListUpdated.length, j=i+10; i<j; i++)
158 galleryListUpdated.push({
159 display : "bmzN9ci5",
164 title : "gohome" + i + ".png",
165 timestamp : Math.random().toString(),
166 comment : "Cool Comment: " + i,
167 id : "7686191121780974-10682-" + i,
168 src : qx.manager.object.AliasManager.getInstance().resolvePath("icon/64/colors.png")
172 gallery.addFromUpdatedList(galleryListUpdated);