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.
70 lines (63 loc) • 2.42 kB
HTML
<html lang="en">
<head>
<meta 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>Test Dojo</title>
<link rel="stylesheet" href="../../../dojox/mobile/themes/iphone/iphone.css"/>
<link rel="stylesheet" href="../../../dojox/mobile/themes/iphone/iphone-compat.css"/>
<script src="../../../dojo/dojo.js" data-dojo-config="async:true, parseOnLoad:true, locale:'en', isDebug:true"></script>
<script>
require([
"dojo/parser",
"dojo/ready",
// non referenced includes
"dojox/mobile",
"dojox/mobile/compat",
"dojox/mobile/SwapView",
"dojox/mobile/PageIndicator"
], function (parser, ready) {
ready(function () {
Button1.on('click', function(){
Pane1.show();
PageIndicator.reset();
});
Button2.on('click', function(){
var activeView = Pane1.getShowingView();
activeView.goTo(-1, 'Pane1');
});
});
});
</script>
<style>
.mblView {
border-top: 1px solid transparent;
border-bottom: 10px solid red;
}
</style>
</head>
<body style="visibility:hidden;">
<h1 data-dojo-type="dojox/mobile/Heading" data-dojo-props="label:'Test SwapView'">
<span data-dojo-id="Button1" data-dojo-type="dojox/mobile/ToolBarButton">Go to Pane1</span>
<span data-dojo-id="Button2" data-dojo-type="dojox/mobile/ToolBarButton">Slide to Pane1</span>
</h1>
<div data-dojo-type="dojox/mobile/PageIndicator" data-dojo-id="PageIndicator">
</div>
<div data-dojo-type="dojox/mobile/SwapView" data-dojo-id="Pane1" id="Pane1">
<div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props='shadow:true'>
Swipe me to the left until Pane 3 is displayed, then click the Go to Pane1 button and check that everything is ok (including the page indicator value). Then do the same using the Slide to Pane1 button.
</div>
</div>
<div data-dojo-type="dojox/mobile/SwapView" data-dojo-id="Pane2">
<div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props='shadow:true'>
Pane 2
</div>
</div>
<div data-dojo-type="dojox/mobile/SwapView" data-dojo-id="Pane3">
<div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props='shadow:true'>
Pane 3
</div>
</div>
</body>
</html>