| 1 | <!DOCTYPE html> |
|---|
| 2 | <html> |
|---|
| 3 | <head> |
|---|
| 4 | <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> |
|---|
| 5 | <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/> |
|---|
| 6 | <meta name="apple-mobile-web-app-capable" content="yes"/> |
|---|
| 7 | <title>Transition Parameter</title> |
|---|
| 8 | |
|---|
| 9 | <script type="text/javascript" src="../deviceTheme.js" data-dojo-config="mblThemeFiles: ['base']"></script> |
|---|
| 10 | <script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script> |
|---|
| 11 | |
|---|
| 12 | <script type="text/javascript"> |
|---|
| 13 | require([ |
|---|
| 14 | "dojo/_base/declare", |
|---|
| 15 | "dojo/dom", |
|---|
| 16 | "dojox/mobile/parser", |
|---|
| 17 | "dojo/hash", |
|---|
| 18 | "dojox/mobile", |
|---|
| 19 | "dojox/mobile/compat" |
|---|
| 20 | ], function(declare, dom, parser){ |
|---|
| 21 | function loadPage(moveTo){ |
|---|
| 22 | if(!(moveTo.match(/#(\w+)/))){ return; } |
|---|
| 23 | moveTo.match(/#(\w+)(.*)/); |
|---|
| 24 | var id = RegExp.$1; |
|---|
| 25 | var param = RegExp.$2; |
|---|
| 26 | if(!param){ return; } |
|---|
| 27 | var container = dom.byId(id); |
|---|
| 28 | // You may want to dynamically load page contents here |
|---|
| 29 | container.innerHTML = '<h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props=\'back:"Home", moveTo:"#home"\'>'+param+'</h1>\n'+param; |
|---|
| 30 | parser.parse(container); |
|---|
| 31 | } |
|---|
| 32 | dojox.mobile.ViewEx = declare( |
|---|
| 33 | "dojox.mobile.ViewEx", |
|---|
| 34 | dojox.mobile.View, |
|---|
| 35 | { |
|---|
| 36 | onStartView: function(){ |
|---|
| 37 | loadPage(location.hash); |
|---|
| 38 | }, |
|---|
| 39 | onBeforeTransitionIn: function(moveTo, dir, transition, context, method){ |
|---|
| 40 | loadPage("#"+moveTo); |
|---|
| 41 | } |
|---|
| 42 | }); |
|---|
| 43 | }); |
|---|
| 44 | </script> |
|---|
| 45 | |
|---|
| 46 | <style> |
|---|
| 47 | .lnk { |
|---|
| 48 | font-size: 14px; |
|---|
| 49 | color: #0B5199; |
|---|
| 50 | text-decoration: none; |
|---|
| 51 | } |
|---|
| 52 | </style> |
|---|
| 53 | </head> |
|---|
| 54 | <body style="visibility:hidden;"> |
|---|
| 55 | <div id="home" data-dojo-type="dojox.mobile.View" data-dojo-props='selected:true'> |
|---|
| 56 | <h1 data-dojo-type="dojox.mobile.Heading">Animations</h1> |
|---|
| 57 | <h2 data-dojo-type="dojox.mobile.RoundRectCategory">Transition Effects</h2> |
|---|
| 58 | <ul data-dojo-type="dojox.mobile.RoundRectList"> |
|---|
| 59 | <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-1.png", moveTo:"#view2&myParam=0001"'> |
|---|
| 60 | Document 0001 |
|---|
| 61 | </li> |
|---|
| 62 | <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-2.png", moveTo:"#view2&myParam=0002"'> |
|---|
| 63 | Document 0002 |
|---|
| 64 | </li> |
|---|
| 65 | <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-3.png", moveTo:"#view2&myParam=0003"'> |
|---|
| 66 | Document 0003 |
|---|
| 67 | </li> |
|---|
| 68 | </ul> |
|---|
| 69 | <div data-dojo-type="dojox.mobile.RoundRect"> |
|---|
| 70 | 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. |
|---|
| 71 | </div> |
|---|
| 72 | </div> |
|---|
| 73 | |
|---|
| 74 | <div id="view2" data-dojo-type="dojox.mobile.ViewEx">view2</div> |
|---|
| 75 | </body> |
|---|
| 76 | </html> |
|---|
