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.
58 lines
2.5 KiB
58 lines
2.5 KiB
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/> |
|
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/> |
|
<meta name="apple-mobile-web-app-capable" content="yes"/> |
|
<title>Carousel Demo (dojo.data)</title> |
|
|
|
<script type="text/javascript" src="../deviceTheme.js" data-dojo-config="mblThemeFiles: ['base','Carousel','PageIndicator']"></script> |
|
<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true, mblAlwaysHideAddressBar: true"></script> |
|
|
|
<script type="text/javascript"> |
|
require([ |
|
"dojo/_base/connect", |
|
"dojo/data/ItemFileReadStore", |
|
"dojo/ready", |
|
"dijit/registry", |
|
"dojox/mobile/parser", |
|
"dojox/mobile", |
|
"dojox/mobile/compat", |
|
"dojox/mobile/ScrollableView", |
|
"dojox/mobile/DataCarousel" |
|
], function(connect, ItemFileReadStore, ready, registry){ |
|
store1 = new ItemFileReadStore({url: "data/carousel-categ.json"}); |
|
ready(function(){ |
|
connect.subscribe("/dojox/mobile/carouselSelect", function(w, img, item, idx){ |
|
if(w.id == "carousel1"){ |
|
var store2 = new ItemFileReadStore({url: "data/carousel-"+item.value+".json"}); |
|
var w2 = registry.byId("carousel2"); |
|
w2.set("title", item.value); |
|
w2.setStore(store2); |
|
registry.byId("rect1").domNode.style.display = "none"; |
|
}else if(w.id == "carousel2"){ |
|
var rect1 = registry.byId("rect1"); |
|
var u = "unknown"; |
|
var desc = "<div style='float:right;font:14px arial;width:49%'>Model: "+(item.model?item.model:u)+"<br>"+ |
|
"Design: "+(item.design?item.design:u)+"<br>"+ |
|
"Produced: "+(item.produced?item.produced:u)+"<br>"+ |
|
"Size: "+(item.size?item.size:u)+"<br>"+ |
|
"Price: "+(item.price?item.price:u)+"<br></div>"; |
|
rect1.containerNode.innerHTML = desc+"<img src='"+item.src+"' width='50%' align='top'>"; |
|
rect1.domNode.style.display = ""; |
|
} |
|
}); |
|
}); |
|
}); |
|
</script> |
|
</head> |
|
<body style="visibility:hidden;background-color:#6D6D6D"> |
|
<div id="foo" data-dojo-type="dojox.mobile.ScrollableView"> |
|
<div id="carousel1" data-dojo-type="dojox.mobile.DataCarousel" |
|
data-dojo-props='height:"150px", navButton:true, store:store1, itemWidth:156, title:"Category"'></div> |
|
<div id="carousel2" data-dojo-type="dojox.mobile.DataCarousel" |
|
data-dojo-props='height:"110px", navButton:true, itemWidth:100'></div> |
|
<div id="rect1" data-dojo-type="dojox.mobile.RoundRect" style="display:none"></div> |
|
</div> |
|
</body> |
|
</html>
|
|
|