You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
230 lines
8.6 KiB
230 lines
8.6 KiB
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
|
|
<title>dojox.image.Badge Tests | The Dojo Toolkit</title> |
|
|
|
<!-- required: a default theme file, and project css: --> |
|
<link rel="stylesheet" id="themeStyles" href="../../../dijit/themes/claro/claro.css" /> |
|
<link rel="stylesheet" href="../resources/image.css" /> |
|
|
|
<style type="text/css"> |
|
@import "../../../dojo/resources/dojo.css"; |
|
@import "../../../dijit/tests/css/dijitTests.css"; |
|
body, html { width:100%; height:100%; margin:0; padding:0; } |
|
|
|
.fixed { |
|
position:fixed; |
|
font:32pt Arial,sans-serif; |
|
color:#777; |
|
text-align:center; |
|
line-height:42px; |
|
} |
|
.dj_ie .fixed { |
|
display:none; |
|
} |
|
img.thing { width:50px; height:50px; } |
|
.noBorderWrapper .dojoxBadge { |
|
border:none; |
|
} |
|
|
|
.b1 { background:url('images/square.jpg') !important; } |
|
.b2 { background-image:url('images/imageHoriz.jpg') !important; } |
|
.b3 { background-image:url('images/imageVert.jpg') !important; } |
|
.b4 { background-image:url('images/imageHoriz2.jpg') !important; } |
|
</style> |
|
|
|
<!-- required: dojo.js --> |
|
<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug:true, parseOnLoad:true"></script> |
|
|
|
<!-- do not use! only for testing dynamic themes --> |
|
<script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script> |
|
<script> |
|
require(["dojo/parser", "dojox/image/Badge", "dojox/data/FlickrStore", "dojo/domReady!"]); |
|
</script> |
|
|
|
<!--script type="text/javascript"> |
|
// programatic flickrstore implementation [basic] |
|
function onComplete(items,request){ |
|
if (items.length>0){ |
|
dojo.forEach(items,function(item){ |
|
var part = { |
|
title: flickrStore.getValue(item,"title"), |
|
href: flickrStore.getValue(item,"imageUrl") |
|
}; |
|
// FIXME: make addImage more accessible, or do this internally |
|
// _attachedDialog is dijit.byId("dojoxLightboxDialog"), and the |
|
// is only one per page. |
|
dijit.byId('fromStore')._attachedDialog.addImage(part,"flickrStore"); |
|
}); |
|
dojo.byId('flickrButton').disabled = false; |
|
} |
|
} |
|
|
|
function onError(error,request){ |
|
console.warn(error,request); |
|
} |
|
|
|
function init(){ |
|
var flickrRequest = { |
|
query: {}, |
|
onComplete: onComplete, |
|
onError: onError, |
|
userid: "jetstreet", |
|
tags: "jetstreet", |
|
count: 10 |
|
}; |
|
flickrStore.fetch(flickrRequest); |
|
} |
|
dojo.addOnLoad(init); |
|
</script--> |
|
|
|
|
|
</head> |
|
<body class="claro"> |
|
|
|
<div style="padding:20px;"> |
|
|
|
<h1 class="testTitle">a Dojo based Badge thingr:</h1> |
|
|
|
<h3>[2x2] From IMG</h3> |
|
<div dojoType="dojox.image.Badge" rows="2" cols="2" children="img.thing"> |
|
<img src="images/square.jpg" class="thing" alt="thingr" /> |
|
<img src="images/square.jpg" class="thing" alt="thingr" /> |
|
<img src="images/square.jpg" class="thing" alt="thingr" /> |
|
<img src="images/square.jpg" class="thing" alt="thingr" /> |
|
</div> |
|
|
|
<h3>[4x3]</h3> |
|
<div dojoType="dojox.image.Badge" rows="3" cols="4" cellSize="50"> |
|
<div class="dojoxBadgeImage"></div> |
|
<div class="dojoxBadgeImage"></div> |
|
<div class="dojoxBadgeImage"></div> |
|
<div class="dojoxBadgeImage"></div> |
|
|
|
<div class="dojoxBadgeImage"></div> |
|
<div class="dojoxBadgeImage"></div> |
|
<div class="dojoxBadgeImage"></div> |
|
<div class="dojoxBadgeImage"></div> |
|
|
|
<div class="dojoxBadgeImage"></div> |
|
<div class="dojoxBadgeImage"></div> |
|
<div class="dojoxBadgeImage"></div> |
|
<div class="dojoxBadgeImage"></div> |
|
</div> |
|
|
|
|
|
<h3>[3x4] Grid, delay:2500</h3> |
|
|
|
<div dojoType="dojox.image.Badge" delay="4000" rows="4" cols="3" style="width:150px; height:200px"> |
|
<div class="dojoxBadgeImage"></div> |
|
<div class="dojoxBadgeImage"></div> |
|
<div class="dojoxBadgeImage"></div> |
|
<div class="dojoxBadgeImage"></div> |
|
|
|
<div class="dojoxBadgeImage"></div> |
|
<div class="dojoxBadgeImage"></div> |
|
<div class="dojoxBadgeImage"></div> |
|
<div class="dojoxBadgeImage"></div> |
|
|
|
<div class="dojoxBadgeImage"></div> |
|
<div class="dojoxBadgeImage"></div> |
|
<div class="dojoxBadgeImage"></div> |
|
<div class="dojoxBadgeImage"></div> |
|
</div> |
|
|
|
<div style="position:absolute; top:100px; left:275px"> |
|
<h2>[6x2] Picker, in absolute node</h2> |
|
<div dojoType="dojox.image.Badge" rows="2" cols="6"> |
|
<div class="dojoxBadgeImage"></div> |
|
<div class="dojoxBadgeImage"></div> |
|
<div class="dojoxBadgeImage"></div> |
|
<div class="dojoxBadgeImage"></div> |
|
|
|
<div class="dojoxBadgeImage"></div> |
|
<div class="dojoxBadgeImage"></div> |
|
<div class="dojoxBadgeImage"></div> |
|
<div class="dojoxBadgeImage"></div> |
|
|
|
<div class="dojoxBadgeImage"></div> |
|
<div class="dojoxBadgeImage"></div> |
|
<div class="dojoxBadgeImage"></div> |
|
<div class="dojoxBadgeImage"></div> |
|
</div> |
|
|
|
<h2>[3x2] But only 3 images</h2> |
|
<div class="noBorderWrapper"> |
|
<div dojoType="dojox.image.Badge" cellSize="150" rows="2" cols="3"> |
|
<div class="dojoxBadgeImage b1"></div> |
|
<div class="dojoxBadgeImage b2"></div> |
|
<div class="dojoxBadgeImage b3"></div> |
|
</div> |
|
</div> |
|
|
|
</div> |
|
|
|
<h3>position:fixed;</h3> |
|
<ul> |
|
<li>Does not work in IE6. At all. There are docType hacks if you choose. </li> |
|
</ul> |
|
<div dojoType="dojox.image.Badge" children="div" rows="6" cols="2" class="fixed" style="top:0; right:0"> |
|
<div>a</div> |
|
<div>b</div> |
|
<div>c</div> |
|
<div>d</div> |
|
|
|
<div>e</div> |
|
<div>f</div> |
|
<div>g</div> |
|
<div>h</div> |
|
|
|
<div>i</div> |
|
<div>j</div> |
|
<div>k</div> |
|
<div>l</div> |
|
</div> |
|
|
|
<h2>[6x6] threads:3</h2> |
|
<div class="noBorderWrapper"> |
|
<div dojoType="dojox.image.Badge" threads="2" rows="6" cols="6"> |
|
<div class="dojoxBadgeImage"></div><div class="dojoxBadgeImage"></div><div class="dojoxBadgeImage"></div><div class="dojoxBadgeImage"></div><div class="dojoxBadgeImage"></div><div class="dojoxBadgeImage"></div> |
|
<div class="dojoxBadgeImage"></div><div class="dojoxBadgeImage"></div><div class="dojoxBadgeImage"></div><div class="dojoxBadgeImage"></div><div class="dojoxBadgeImage"></div><div class="dojoxBadgeImage"></div> |
|
<div class="dojoxBadgeImage"></div><div class="dojoxBadgeImage"></div><div class="dojoxBadgeImage"></div><div class="dojoxBadgeImage"></div><div class="dojoxBadgeImage"></div><div class="dojoxBadgeImage"></div> |
|
<div class="dojoxBadgeImage"></div><div class="dojoxBadgeImage"></div><div class="dojoxBadgeImage"></div><div class="dojoxBadgeImage"></div><div class="dojoxBadgeImage"></div><div class="dojoxBadgeImage"></div> |
|
<div class="dojoxBadgeImage"></div><div class="dojoxBadgeImage"></div><div class="dojoxBadgeImage"></div><div class="dojoxBadgeImage"></div><div class="dojoxBadgeImage"></div><div class="dojoxBadgeImage"></div> |
|
<div class="dojoxBadgeImage"></div><div class="dojoxBadgeImage"></div><div class="dojoxBadgeImage"></div><div class="dojoxBadgeImage"></div><div class="dojoxBadgeImage"></div><div class="dojoxBadgeImage"></div> |
|
</div> |
|
</div> |
|
|
|
<div id="prog"></div> |
|
<!--div dojoType="dojox.image.Badge"> |
|
|
|
<a href="images/imageVert.jpg" dojoType="dojox.image.Lightbox" title="More Guatemala...">tall</a> |
|
<a href="images/imageHoriz.jpg" dojoType="dojox.image.Lightbox" title="Antigua, Guatemala">4:3 image</a> |
|
<a href="images/broken.jpg" dojoType="dojox.image.Lightbox" title="broken href example">Broken link</a> |
|
|
|
<a href="images/huuuge.png" dojoType="dojox.image.Lightbox" title="a large image">large than viewport?</a> |
|
<a href="images/imageHoriz2.jpg" dojoType="dojox.image.Lightbox" group="group1" title="Amsterdam Train Depot">wide image</a> |
|
<a href="images/square.jpg" dojoType="dojox.image.Lightbox" group="group1" title="1:1 aspect">square</a> |
|
|
|
<a href="images/extraWide.jpg" dojoType="dojox.image.Lightbox" group="group1" title="Greeneville, TN">wide image</a> |
|
<a href="images/broken.jpg" dojoType="dojox.image.Lightbox" group="group1" title="broken href example">Broken link</a> |
|
<a href="images/imageHoriz2.jpg" dojoType="dojox.image.Lightbox" group="group2" title="Amsterdam Train Depot">wide image</a> |
|
|
|
<a href="images/square.jpg" dojoType="dojox.image.Lightbox" group="group2" title="1:1 aspect">square</a> |
|
<a href="images/imageHoriz.jpg" dojoType="dojox.image.Lightbox" group="group2" title="Antigua, Guatemala">4:3 image</a> |
|
<a href="images/imageVert.jpg" dojoType="dojox.image.Lightbox" group="group2" title="More Guatemala...">tall</a> |
|
|
|
</div--> |
|
|
|
<!--h3>From dojox.data.FlickrStore:</h3> |
|
|
|
<div dojoType="dojox.data.FlickrStore" data-dojo-id="flickrStore" label="title"></div> |
|
<div id="fromStore" dojoType="dojox.image.Lightbox" store="flickrStore" group="flickrStore"></div> |
|
|
|
<input id="flickrButton" type="button" onclick="dijit.byId('fromStore').show()" value="show flickr lightbox" disabled="disabled" --> |
|
|
|
</div> |
|
|
|
</body> |
|
</html>
|
|
|