<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Testing the ThumbnailPicker + Lightbox</title>
<script type='text/JavaScript' src='http://www.onemap.sg/API/JS?accessKEY=xkg8VRu6Ol+gMH+SUamkRIEB7fKzhwMvfMo/2U8UJcFhdvR4yN1GutmUIA3A6r3LDhot215OVVkZvNRzjl28TNUZgYFSswOi'></script>
<!-- required: a default theme file -->
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dijit/themes/claro/claro.css"/>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dojox/image/resources/image.css" />
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dojox/image/resources/ThumbnailPicker.css" />
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2"></script>
<script type="text/javascript">
var djConfig = {
parseOnLoad: true
};
</script>
<script type="text/javascript">
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.form.Button");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.Dialog");
function setContent() {
var c = new dijit.layout.BorderContainer({style:"border:0px"});
var p = new dijit.layout.ContentPane({
content: "<table><tr><td><font color = '#000000' size = '2'><u><b>LINKS</b></u></td></tr><br/><tr><td><span id=\"list\"></span></td></tr></table>"
});
c.addChild(p);
var forward = new dijit.form.Button({
style: "border:0px;background:red;",
label: "NEXT"
});
var back = new dijit.form.Button({
label: "BACK"
});
c.addChild(back);
c.addChild(forward);
var foodStore = new dojo.data.ItemFileReadStore({ data:{
identifier: 'name',
items: [{
name: 'Adobo',
aisle: 'Mexican',
price: 3.01
},
{
name: 'Balsamic vinegar',
aisle: 'Condiments',
price: 4.01
},
{
name: 'Basil',
aisle: 'Spices',
price: 3.59
},
{
name: 'Bay leaf',
aisle: 'Spices',
price: 2.01
},
{
name: 'Beef Bouillon Granules',
aisle: 'Soup',
price: 5.01
},
{
name: 'Vinegar',
aisle: 'Condiments',
price: 1.99
},
{
name: 'White cooking wine',
aisle: 'Condiments',
price: 2.01
},
{
name: 'Worcestershire Sauce',
aisle: 'Condiments',
price: 3.99
},
{
name: 'pepper',
aisle: 'Spices',
price: 1.01
}]
} });
var totalItems = 0; //How many total items should we expect.
var request = null; //Our request object we're using to hold the positions and the callbacks.
var currentStart = 0; //Current index into the pages.
currentCount = 4; //Current size of the page.
//Callback to perform an action when the data items are starting to be returned:
function clearOldList(size, request) {
var list = dojo.byId("list");
if (list) {
while (list.firstChild) {
list.removeChild(list.firstChild);
}
}
//Save off the total size. We need it to determine when to ignore the buttons.
totalItems = size;
}
//Callback for processing a returned list of items.
function gotItems(items, request) {
//Save off the current page info being displayed.
currentStart = request.start;
currentCount = request.count;
var list = dojo.byId("list");
if (list) {
var i;
for (i = 0; i < items.length; i++) {
var item = items[i];
var img =document.createElement("img") ;
img.src = "images/link.png";
//img.setAttribute('height', '2px');
//img.setAttribute('width', '2px');
img.width = "19";
img.height ="20";
list.appendChild(img);
var link = document.createTextNode(foodStore.getValue(item, "name"));
list.appendChild(link);
list.appendChild(document.createElement("br"));
}
}
}
//Callback for if the lookup fails.
function fetchFailed(error, request) {
alert("lookup failed.");
}
//Button event to page forward.
function nextPage() {
//If we haven't hit the end of the pages yet, allow for requesting another.
if ((currentStart + currentCount) < totalItems) {
request.start += currentCount;
request = foodStore.fetch(request);
}
}
//Button event to page back;
function previousPage() {
//If we haven't hit the beginning of the pages yet, allow for another shift backwards.
if (currentStart > 0) {
request.start -= currentCount;
request = foodStore.fetch(request);
}
}
//Fetch the data.
request = foodStore.fetch({
onBegin: clearOldList,
onComplete: gotItems,
onError: fetchFailed,
start: currentStart,
count: currentCount
});
//Link the click event of the button to driving the fetch.
dojo.connect(back, "onClick", previousPage);
dojo.connect(forward, "onClick", nextPage);
var dialog = new dijit.Dialog({});
dialog.attr("content", c.domNode);
dialog.show();
}
dojo.addOnLoad(setContent);
</script>
</head>
<body >
</body>
</html>
Bookmarks