diff options
Diffstat (limited to 'swat.obsolete/apps/qooxdoo-examples/test/Gallery_3.html')
| -rw-r--r-- | swat.obsolete/apps/qooxdoo-examples/test/Gallery_3.html | 178 |
1 files changed, 178 insertions, 0 deletions
diff --git a/swat.obsolete/apps/qooxdoo-examples/test/Gallery_3.html b/swat.obsolete/apps/qooxdoo-examples/test/Gallery_3.html new file mode 100644 index 00000000000..7b4258891b5 --- /dev/null +++ b/swat.obsolete/apps/qooxdoo-examples/test/Gallery_3.html @@ -0,0 +1,178 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>Test file for qx.ui.embed.Gallery, now with QxToolTips assigned.</p> + <button onclick="updateAdd()">Update Add</button> + </div> + + <style type="text/css"> + .qx.ui.embed.Gallery .galleryFrame{ + padding: 2px; + } + + .qx.ui.embed.Gallery .galleryCell{ + border: 1px solid #444; + background: #fff; + margin: 2px; + float: left; + overflow: hidden; + + font-family: Tahoma, Verdana, sans-serif; + font-size: 10px; + + cursor: default; + + -moz-user-select: none; + user-select: none; + } + + .qx.ui.embed.Gallery .galleryCell img{ + vertical-align: bottom; + display: block; + } + + .qx.ui.embed.Gallery .galleryCell .galleryTitle, + .qx.ui.embed.Gallery .galleryCell .galleryComment{ + background: #eee; + padding: 3px 6px; + text-align: center; + cursor: default; + overflow: hidden; + white-space: nowrap; + } + + .qx.ui.embed.Gallery .galleryCell .galleryTitle{ + border-bottom: 1px solid #aaa; + } + + .qx.ui.embed.Gallery .galleryCell .galleryComment{ + border-top: 1px solid #aaa; + } + + .qx.ui.embed.Gallery .galleryCell-Selected{ + background: #DCE8F6; + border: 1px solid #2760A1; + } + + .qx.ui.embed.Gallery .galleryCell-Selected .galleryTitle, + .qx.ui.embed.Gallery .galleryCell-Selected .galleryComment{ + background: #9BBFE7; + } + + .qx.ui.embed.Gallery .galleryCell-Selected .galleryTitle{ + border-bottom: 1px dotted #2760A1; + } + + .qx.ui.embed.Gallery .galleryCell-Selected .galleryComment{ + border-top: 1px dotted #2760A1; + } + + + /* customize */ + + .qx.ui.embed.Gallery{ + background: #fff; + padding: 5px; + } + + .qx.ui.embed.Gallery .galleryCell{ + margin: 5px; + border: 1px solid #DCDFE8; + } + + .qx.ui.embed.Gallery .galleryCell-Selected{ + border: 1px solid #5E6474; + background: #DADDE4; + } + </style> + + <script type="text/javascript"> + var updateAdd; + + qx.core.Init.getInstance().defineMain(function() + { + var galleryList = []; + + for (var i=0; i<100; i++) + { + galleryList.push({ + display : "bmzN9ci5", + width : 350, + height : 350, + thumbWidth : 64, + thumbHeight : 64, + title : "gohome" + i + ".png", + timestamp : Math.random().toString(), + comment : "Cool Comment: " + i, + id : "7686191121780974-10682-" + i, + src : qx.manager.object.AliasManager.getInstance().resolvePath("icon/64/paint.png") + }); + }; + + var gallery = new qx.ui.embed.Gallery(galleryList); + + gallery.setLeft(20); + gallery.setRight(335); + gallery.setTop(48); + gallery.setBottom(48); + gallery.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + gallery.setShowTitle(false); + gallery.setShowComment(false); + gallery.setDecorHeight(0); + + qx.ui.core.ClientDocument.getInstance().add(gallery); + + + + var toolTip = new qx.ui.popup.ToolTip("Photo Details", "icon/32/colors.png"); + gallery.setToolTip(toolTip); + + gallery.addEventListener("beforeToolTipAppear", function(e) + { + var vNode = e.getData(); + var vEntry = this.getEntryByNode(vNode); + + toolTip.getAtom().setLabel("<strong>" + vEntry.title + "</strong><br/>" + vEntry.comment); + + this.setToolTip(toolTip); + }); + + + updateAdd = function() + { + var galleryListUpdated = qx.lang.Array.copy(gallery.getList()); + + for (var i=galleryListUpdated.length, j=i+10; i<j; i++) + { + galleryListUpdated.push({ + display : "bmzN9ci5", + width : 350, + height : 350, + thumbWidth : 64, + thumbHeight : 64, + title : "gohome" + i + ".png", + timestamp : Math.random().toString(), + comment : "Cool Comment: " + i, + id : "7686191121780974-10682-" + i, + src : qx.manager.object.AliasManager.getInstance().resolvePath("icon/64/colors.png") + }); + }; + + gallery.addFromUpdatedList(galleryListUpdated); + }; + + }); + </script> +</body> +</html>
\ No newline at end of file |