dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
110 lines (101 loc) • 3.6 kB
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>Screen Size Aware Demo</title>
<script type="text/javascript" src="../deviceTheme.js" data-dojo-config="mblThemeFiles: ['base','FixedSplitter']"></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/ItemFileWriteStore",
"dojo/dom-construct",
"dojo/ready",
"dijit/registry",
"dojox/mobile/Heading",
"dojox/mobile/ScrollableView",
"dojox/mobile/EdgeToEdgeDataList",
"dojox/mobile/ScreenSizeAware",
"dojox/mobile/parser",
"dojox/mobile",
"dojox/mobile/compat",
"dojox/mobile/FixedSplitter",
"dojox/mobile/Container"
], function(connect, ItemFileWriteStore, domConstruct, ready, registry, Heading,
ScrollableView, EdgeToEdgeDataList, ScreenSizeAware){
var viewCache = {};
function leftItemSelected(e){
var item = e ? registry.getEnclosingWidget(e.target) : registry.byId("list1").getChildren()[0];
if(!item){ return; }
var id = viewCache[item.data];
if(!id){
// Dynamically creates a new view
id = item.id ? item.id + "View" : undefined;
var view = new ScrollableView({
id: id
}, domConstruct.create("DIV", null, "rightPane"));
id = viewCache[item.data] = view.id;
var heading = new Heading({
label: item.label,
back: "Home",
moveTo: "view1",
fixed: "top"
});
view.addFixedBar(heading);
var store = new ItemFileWriteStore({url: item.data});
var list = new EdgeToEdgeDataList({
store: store
});
list.placeAt(view.containerNode);
this.updateBackButton();
this.updateTransition();
view.startup();
}
item.transitionTo(id);
}
function leftItemsLoaded(){
if(!ssa.isPhone()){
ssa.leftItemSelected();
ssa.updateSelectedItem();
}
}
ready(function(){
ssa = ScreenSizeAware.getInstance();
connect.connect(registry.byId("list1").domNode, "onclick", ssa, leftItemSelected);
connect.connect(registry.byId("list1"), "onComplete", null, leftItemsLoaded);
connect.connect(ssa, "leftItemSelected", ssa, leftItemSelected);
connect.connect(ssa, "getDestinationId", null, function(item){
return viewCache[item.data];
});
});
store1 = new ItemFileWriteStore({url: "data/insurance.json"});
});
</script>
<style>
html, body{
height: 100%;
overflow: hidden;
position: relative;
}
.iphone_theme #leftPane, .blackberry_theme #leftPane {
border-right: 1px solid black;
}
.android_theme #leftPane {
border-right: 1px solid gray;
}
</style>
</head>
<body style="visibility:hidden;">
<div data-dojo-type="dojox.mobile.FixedSplitter" data-dojo-props='orientation:"H", screenSizeAware:true'>
<div id="leftPane" data-dojo-type="dojox.mobile.Container" style="width:300px;">
<div id="view1" data-dojo-type="dojox.mobile.ScrollableView">
<h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props='fixed:"top"'>Insurance</h1>
<ul data-dojo-type="dojox.mobile.EdgeToEdgeDataList" id="list1" data-dojo-props='store:store1, query:{label: "*"}, stateful:true'></ul>
</div>
</div>
<div id="rightPane" data-dojo-type="dojox.mobile.Container"></div>
</div>
</body>
</html>