| 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|---|
| 2 | <html style="overflow:hidden;"> |
|---|
| 3 | <head> |
|---|
| 4 | <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/> |
|---|
| 5 | <meta name="apple-mobile-web-app-capable" content="yes" /> |
|---|
| 6 | <title>Action Sheet Sample</title> |
|---|
| 7 | <style> |
|---|
| 8 | /* Tooltip styles */ |
|---|
| 9 | .mblTooltip.mblOpener { |
|---|
| 10 | padding: 2px; |
|---|
| 11 | -webkit-box-shadow: 0 0 60px #808080; |
|---|
| 12 | } |
|---|
| 13 | .mblTooltip.mblOpener #cancel { |
|---|
| 14 | display: none; |
|---|
| 15 | } |
|---|
| 16 | .mblTooltip.mblOpener button { |
|---|
| 17 | margin: 4px; |
|---|
| 18 | width: 240px; |
|---|
| 19 | height: 40px; |
|---|
| 20 | -webkit-box-shadow: 0 1px 1px #343a4b; |
|---|
| 21 | font-size: 18px; |
|---|
| 22 | line-height: 38px; |
|---|
| 23 | } |
|---|
| 24 | /* Overlay styles */ |
|---|
| 25 | .mblOverlay.mblOpener { |
|---|
| 26 | padding-top: 10px; |
|---|
| 27 | background-color: #60656f; |
|---|
| 28 | background-image: -webkit-gradient(linear, left top, left bottom, from(#a6abb4), to(#5b616c), color-stop(0.1, #7b808b), color-stop(0.1, #60656f)); |
|---|
| 29 | } |
|---|
| 30 | .mblOverlay.mblOpener button { |
|---|
| 31 | margin: 5px; |
|---|
| 32 | width: 90%; |
|---|
| 33 | height: 44px; |
|---|
| 34 | border: 3px inset #3a3d43; |
|---|
| 35 | -webkit-border-radius: 12px; |
|---|
| 36 | -webkit-box-shadow: 0 1px 1px #787c84; |
|---|
| 37 | font-size: 18px; |
|---|
| 38 | line-height: 38px; |
|---|
| 39 | } |
|---|
| 40 | .mblOverlay.mblOpener #cancel { |
|---|
| 41 | margin: 15px 5px; |
|---|
| 42 | background-color: #293039; /* for non-webkit browser */ |
|---|
| 43 | background-image: none; /* for non-webkit browser */ |
|---|
| 44 | background-image: -webkit-gradient(linear, left top, left bottom, from(#6d7278), to(#383f49), color-stop(0.5, #343c44), color-stop(0.5, #293039)); |
|---|
| 45 | color: white; |
|---|
| 46 | } |
|---|
| 47 | .dj_bb button { /* BB BoxShadow Workaround */ |
|---|
| 48 | -webkit-box-shadow: none !important; |
|---|
| 49 | } |
|---|
| 50 | </style> |
|---|
| 51 | <script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="parseOnLoad: true, async:true"></script> |
|---|
| 52 | <script language="JavaScript" type="text/javascript"> |
|---|
| 53 | require([ |
|---|
| 54 | "dojo/_base/html", // dojo.byId |
|---|
| 55 | "dijit/_base/manager", // dijit.byId |
|---|
| 56 | "dojox/mobile", // This is a mobile app. |
|---|
| 57 | "dojox/mobile/compat", // This mobile app supports running on desktop browsers |
|---|
| 58 | "dojox/mobile/parser", // This mobile app uses declarative programming with fast mobile parser |
|---|
| 59 | "dojox/mobile/deviceTheme", // This mobile app automatically changes it's theme to match devices |
|---|
| 60 | "dojox/mobile/Button", |
|---|
| 61 | "dojox/mobile/Opener" |
|---|
| 62 | ]); |
|---|
| 63 | |
|---|
| 64 | function clicked(id){ |
|---|
| 65 | dijit.byId("actionSheet").hide(); |
|---|
| 66 | var span = dojo.byId("msgArea"); |
|---|
| 67 | span.innerHTML += """ + dojo.byId(id).innerHTML + "" button was clicked."; |
|---|
| 68 | setTimeout(function(){ |
|---|
| 69 | span.innerHTML = ""; |
|---|
| 70 | }, 2000); |
|---|
| 71 | } |
|---|
| 72 | |
|---|
| 73 | </script> |
|---|
| 74 | </head> |
|---|
| 75 | <body style="visibility:hidden;"> |
|---|
| 76 | <center> |
|---|
| 77 | <button dojoType="dojox.mobile.Button" class="mblBlueButton" style="margin-top:20px;width:200px;" |
|---|
| 78 | onclick="dijit.byId('actionSheet').show(this.domNode, ['above-centered','below-centered','after','before'])">Open Action Sheet</button> |
|---|
| 79 | <div id="msgArea" style="margin-top:5px;"></div> |
|---|
| 80 | </center> |
|---|
| 81 | |
|---|
| 82 | <!-- Action Sheet --> |
|---|
| 83 | <div id="actionSheet" data-dojo-type="dojox.mobile.Opener"> |
|---|
| 84 | <button id="Bookmark" dojoType="dojox.mobile.Button" onclick="clicked(this.id)">Add Bookmark</button><br> |
|---|
| 85 | <button id="HomeScreen" dojoType="dojox.mobile.Button" onclick="clicked(this.id)">Add to Home Screen</button><br> |
|---|
| 86 | <button id="MailLink" dojoType="dojox.mobile.Button" onclick="clicked(this.id)">Mail Link to this Page</button><br> |
|---|
| 87 | <button id="cancel" dojoType="dojox.mobile.Button" onclick="clicked(this.id)">Cancel</button> |
|---|
| 88 | </div> |
|---|
| 89 | <!-- Action Sheet --> |
|---|
| 90 | </body> |
|---|
| 91 | </html> |
|---|
