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
);