| 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>Animation</title> |
|---|
| 8 | |
|---|
| 9 | <link href="../themes/common/domButtons/DomButtonSilverCircleRedCross.css" rel="stylesheet"/> |
|---|
| 10 | <script type="text/javascript" src="../deviceTheme.js" data-dojo-config="mblThemeFiles: ['base','SimpleDialog','TextBox','Button']"></script> |
|---|
| 11 | <script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script> |
|---|
| 12 | |
|---|
| 13 | <script type="text/javascript"> |
|---|
| 14 | require([ |
|---|
| 15 | "dijit/registry", |
|---|
| 16 | "dojox/mobile/parser", |
|---|
| 17 | "dojox/mobile", |
|---|
| 18 | "dojox/mobile/compat", |
|---|
| 19 | "dojox/mobile/SimpleDialog", |
|---|
| 20 | "dojox/mobile/TextBox", |
|---|
| 21 | "dojox/mobile/Button" |
|---|
| 22 | ], function(registry){ |
|---|
| 23 | show = function(){ |
|---|
| 24 | registry.byId("dlg1").show(); |
|---|
| 25 | } |
|---|
| 26 | }); |
|---|
| 27 | </script> |
|---|
| 28 | |
|---|
| 29 | <style> |
|---|
| 30 | #dlg1 { |
|---|
| 31 | top: 25%; |
|---|
| 32 | left: 25%; |
|---|
| 33 | width: 700px; |
|---|
| 34 | height: 550px; |
|---|
| 35 | } |
|---|
| 36 | #dlg1 TABLE { |
|---|
| 37 | margin: 20px; |
|---|
| 38 | } |
|---|
| 39 | #dlg1 INPUT, #dlg1 TEXTAREA { |
|---|
| 40 | background-color: #000000; |
|---|
| 41 | color: #ffffff; |
|---|
| 42 | width: 90%; |
|---|
| 43 | font-size: 17px; |
|---|
| 44 | margin: 4px; |
|---|
| 45 | } |
|---|
| 46 | #dlg1 TEXTAREA { |
|---|
| 47 | height: 160px; |
|---|
| 48 | } |
|---|
| 49 | .dlgTitle { |
|---|
| 50 | font-family: Helvetica; |
|---|
| 51 | font-size: 17px; |
|---|
| 52 | margin: 14px 14px; |
|---|
| 53 | } |
|---|
| 54 | </style> |
|---|
| 55 | </head> |
|---|
| 56 | <body style="visibility:hidden;"> |
|---|
| 57 | <div id="dlg1" data-dojo-type="dojox.mobile.SimpleDialog" data-dojo-props='closeButton:true'> |
|---|
| 58 | <div class="dlgTitle">Account Information |
|---|
| 59 | <button id="btn1" data-dojo-type="dojox.mobile.Button" class="mblBlueButton" style="width:60px;float:right;">Edit</button> |
|---|
| 60 | </div> |
|---|
| 61 | <hr/> |
|---|
| 62 | <table style="width:100%"> |
|---|
| 63 | <tr> |
|---|
| 64 | <td style="width:250px"><img alt="" src="images/pic1.jpg" width="230" height="230"></td> |
|---|
| 65 | <td style="vertical-align:top"> |
|---|
| 66 | <input data-dojo-type="dojox.mobile.TextBox" value="Kirena Kobe" readOnly="readOnly"><br> |
|---|
| 67 | <input data-dojo-type="dojox.mobile.TextBox" value="123-456-7891"><br> |
|---|
| 68 | <input data-dojo-type="dojox.mobile.TextBox" value="kkobe@acme.com"> |
|---|
| 69 | </td> |
|---|
| 70 | </tr> |
|---|
| 71 | <tr> |
|---|
| 72 | <td colspan="2"><textarea>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi. Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae risus.</textarea></td> |
|---|
| 73 | </tr> |
|---|
| 74 | </table> |
|---|
| 75 | </div> |
|---|
| 76 | <div id="view1" data-dojo-type="dojox.mobile.View" data-dojo-props='selected:true'> |
|---|
| 77 | <h1 data-dojo-type="dojox.mobile.Heading">Animations</h1> |
|---|
| 78 | <h2 data-dojo-type="dojox.mobile.RoundRectCategory">Transition Effects</h2> |
|---|
| 79 | <button onclick="show()">Show Dialog</button> |
|---|
| 80 | <ul data-dojo-type="dojox.mobile.RoundRectList"> |
|---|
| 81 | <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-1.png", moveTo:"view2", transition:"slide"'> |
|---|
| 82 | Slide |
|---|
| 83 | </li> |
|---|
| 84 | <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-2.png", moveTo:"view2", transition:"flip"'> |
|---|
| 85 | Flip |
|---|
| 86 | </li> |
|---|
| 87 | <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-3.png", moveTo:"view2", transition:"fade"'> |
|---|
| 88 | Fade |
|---|
| 89 | </li> |
|---|
| 90 | </ul> |
|---|
| 91 | </div> |
|---|
| 92 | |
|---|
| 93 | <div id="view2" data-dojo-type="dojox.mobile.View"> |
|---|
| 94 | <h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props='back:"Home", moveTo:"view1"'>Search Result</h1> |
|---|
| 95 | <ul data-dojo-type="dojox.mobile.RoundRectList" data-dojo-props='variableHeight:true'> |
|---|
| 96 | <li data-dojo-type="dojox.mobile.ListItem" style="font-size:10px"> |
|---|
| 97 | 1. <a href="#" class="lnk">Dojo: Traditional Karate-do Spirit</a><br> |
|---|
| 98 | Sarah Connor Hardcover<br> |
|---|
| 99 | Eligible for FREE Super Saver Shipping<br> |
|---|
| 100 | <span style="color:red">$14.50 (50%)</span> In Stock<br> |
|---|
| 101 | # (531) |
|---|
| 102 | </li> |
|---|
| 103 | <li data-dojo-type="dojox.mobile.ListItem" style="font-size:10px"> |
|---|
| 104 | 2. <a href="#" class="lnk">Japanese Martial Arts Dojo</a><br> |
|---|
| 105 | Martin Parker Hardcover<br> |
|---|
| 106 | <span style="color:red">$14.00 (60%)</span> In Stock<br> |
|---|
| 107 | # (173) |
|---|
| 108 | </li> |
|---|
| 109 | <li data-dojo-type="dojox.mobile.ListItem" style="font-size:10px"> |
|---|
| 110 | 3. <a href="#" class="lnk">Total Solar Eclipse</a><br> |
|---|
| 111 | Steven Young Hardcover<br> |
|---|
| 112 | Get it by Mar. 2 if you order in the next <span style="color:green"><b>16 hours</b></span><br> |
|---|
| 113 | Eligible for FREE Super Saver Shipping<br> |
|---|
| 114 | <span style="color:red">$9.50 (62%)</span> In Stock<br> |
|---|
| 115 | # (1199) |
|---|
| 116 | </li> |
|---|
| 117 | <li data-dojo-type="dojox.mobile.ListItem" style="font-size:10px"> |
|---|
| 118 | 4. <a href="#" class="lnk">The History of Java Coffee</a><br> |
|---|
| 119 | Marco Rodriguez Hardcover<br> |
|---|
| 120 | <span style="color:blue">Not Available</span> |
|---|
| 121 | </li> |
|---|
| 122 | <li data-dojo-type="dojox.mobile.ListItem" style="font-size:10px"> |
|---|
| 123 | 5. <a href="#" class="lnk">The Principles of Spider's Web</a><br> |
|---|
| 124 | Melissa Morgan Hardcover<br> |
|---|
| 125 | Eligible for FREE Super Saver Shipping<br> |
|---|
| 126 | <span style="color:red">$12.00 (60%)</span> In Stock<br> |
|---|
| 127 | # (1847) |
|---|
| 128 | </li> |
|---|
| 129 | </ul> |
|---|
| 130 | </div> |
|---|
| 131 | </body> |
|---|
| 132 | </html> |
|---|
