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.
77 lines (73 loc) • 2.98 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>Progress Indicator</title>
<script type="text/javascript" src="../deviceTheme.js" data-dojo-config="mblThemeFiles: ['base']"></script>
<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>
<script type="text/javascript">
require([
"dojo/_base/declare",
"dojo/dom",
"dojox/mobile/parser",
"dojox/mobile/ProgressIndicator",
"dojox/mobile",
"dojox/mobile/bookmarkable",
"dojox/mobile/compat"
], function(declare, dom, parser, ProgressIndicator){
function loadPage(moveTo){
if(!(moveTo.match(/#(\w+)/))){ return; }
moveTo.match(/#(\w+)(.*)/);
var id = RegExp.$1;
var param = RegExp.$2;
if(!param){ return; }
var container = dom.byId(id);
container.innerHTML = "";
var prog = ProgressIndicator.getInstance();
container.appendChild(prog.domNode);
prog.start();
setTimeout(function(){ // network latency simulation
prog.stop();
container.innerHTML = '<h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props=\'back:"Home", moveTo:"#home"\'>'+param+'</h1>\n'+param;
parser.parse(container);
}, 5000);
}
dojox.mobile.ViewEx = declare(
"dojox.mobile.ViewEx",
dojox.mobile.View,
{
onStartView: function(){
loadPage(location.hash);
},
onBeforeTransitionIn: function(moveTo, dir, transition, context, method){
loadPage("#"+moveTo);
}
});
});
</script>
</head>
<body style="visibility:hidden;">
<div id="home" data-dojo-type="dojox.mobile.View" data-dojo-props='selected:true'>
<h1 data-dojo-type="dojox.mobile.Heading">Progress Indicator</h1>
<h2 data-dojo-type="dojox.mobile.RoundRectCategory">External Documents</h2>
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-1.png", moveTo:"#view2?myParam=0001"'>
Document 0001
</li>
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-2.png", moveTo:"#view2?myParam=0002"'>
Document 0002
</li>
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-3.png", moveTo:"#view2?myParam=0003"'>
Document 0003
</li>
</ul>
<div data-dojo-type="dojox.mobile.RoundRect">
A progress indicator shows up about 5 seconds before a view content is displayed.
After you move to other views, you should also be able to navigate through the views with browser's back and forward buttons. Also, views should be bookmarkable. Note that you can pass parameters (e.g. ?myParam=001) to a destination view.
</div>
</div>
<div id="view2" data-dojo-type="dojox.mobile.ViewEx"></div>
</body>
</html>