| 1 | <!DOCTYPE html> |
|---|
| 2 | <html lang="en"> |
|---|
| 3 | <head> |
|---|
| 4 | <meta charset="utf-8"> |
|---|
| 5 | <title>Test Dojo</title> |
|---|
| 6 | <link rel="stylesheet" href="../../../dojox/mobile/themes/iphone/iphone.css"/> |
|---|
| 7 | <link rel="stylesheet" href="../../../dojox/mobile/themes/iphone/iphone-compat.css"/> |
|---|
| 8 | <script src="../../../dojo/dojo.js" data-dojo-config="async:true, parseOnLoad:true, locale:'en', isDebug:true"></script> |
|---|
| 9 | <script> |
|---|
| 10 | require([ |
|---|
| 11 | "dojo/parser", |
|---|
| 12 | "dojo/ready", |
|---|
| 13 | // non referenced includes |
|---|
| 14 | "dojox/mobile", |
|---|
| 15 | "dojox/mobile/compat", |
|---|
| 16 | "dojox/mobile/SwapView", |
|---|
| 17 | "dojox/mobile/PageIndicator" |
|---|
| 18 | ], function (parser, ready) { |
|---|
| 19 | |
|---|
| 20 | ready(function () { |
|---|
| 21 | Button1.on('click', function(){ |
|---|
| 22 | Pane1.show(); |
|---|
| 23 | PageIndicator.reset(); |
|---|
| 24 | }); |
|---|
| 25 | |
|---|
| 26 | Button2.on('click', function(){ |
|---|
| 27 | var activeView = Pane1.getShowingView(); |
|---|
| 28 | activeView.goTo(-1, 'Pane1'); |
|---|
| 29 | }); |
|---|
| 30 | }); |
|---|
| 31 | }); |
|---|
| 32 | </script> |
|---|
| 33 | <style> |
|---|
| 34 | .mblView { |
|---|
| 35 | border-top: 1px solid transparent; |
|---|
| 36 | border-bottom: 10px solid red; |
|---|
| 37 | } |
|---|
| 38 | </style> |
|---|
| 39 | </head> |
|---|
| 40 | <body style="visibility:hidden;"> |
|---|
| 41 | <h1 data-dojo-type="dojox/mobile/Heading" data-dojo-props="label:'Test SwapView'"> |
|---|
| 42 | <span data-dojo-id="Button1" data-dojo-type="dojox/mobile/ToolBarButton">Go to Pane1</span> |
|---|
| 43 | <span data-dojo-id="Button2" data-dojo-type="dojox/mobile/ToolBarButton">Slide to Pane1</span> |
|---|
| 44 | </h1> |
|---|
| 45 | |
|---|
| 46 | <div data-dojo-type="dojox/mobile/PageIndicator" data-dojo-id="PageIndicator"> |
|---|
| 47 | </div> |
|---|
| 48 | |
|---|
| 49 | <div data-dojo-type="dojox/mobile/SwapView" data-dojo-id="Pane1" id="Pane1"> |
|---|
| 50 | <div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props='shadow:true'> |
|---|
| 51 | 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. |
|---|
| 52 | </div> |
|---|
| 53 | </div> |
|---|
| 54 | |
|---|
| 55 | <div data-dojo-type="dojox/mobile/SwapView" data-dojo-id="Pane2"> |
|---|
| 56 | <div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props='shadow:true'> |
|---|
| 57 | Pane 2 |
|---|
| 58 | </div> |
|---|
| 59 | </div> |
|---|
| 60 | |
|---|
| 61 | <div data-dojo-type="dojox/mobile/SwapView" data-dojo-id="Pane3"> |
|---|
| 62 | <div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props='shadow:true'> |
|---|
| 63 | Pane 3 |
|---|
| 64 | </div> |
|---|
| 65 | </div> |
|---|
| 66 | |
|---|
| 67 | </body> |
|---|
| 68 | </html> |
|---|
