92 lines
3.5 KiB
HTML
92 lines
3.5 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
<html style="overflow:hidden;">
|
|
<head>
|
|
<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>Action Sheet Sample</title>
|
|
<style>
|
|
/* Tooltip styles */
|
|
.mblTooltip.mblOpener {
|
|
padding: 2px;
|
|
-webkit-box-shadow: 0 0 60px #808080;
|
|
}
|
|
.mblTooltip.mblOpener #cancel {
|
|
display: none;
|
|
}
|
|
.mblTooltip.mblOpener button {
|
|
margin: 4px;
|
|
width: 240px;
|
|
height: 40px;
|
|
-webkit-box-shadow: 0 1px 1px #343a4b;
|
|
font-size: 18px;
|
|
line-height: 38px;
|
|
}
|
|
/* Overlay styles */
|
|
.mblOverlay.mblOpener {
|
|
padding-top: 10px;
|
|
background-color: #60656f;
|
|
background-image: -webkit-gradient(linear, left top, left bottom, from(#a6abb4), to(#5b616c), color-stop(0.1, #7b808b), color-stop(0.1, #60656f));
|
|
}
|
|
.mblOverlay.mblOpener button {
|
|
margin: 5px;
|
|
width: 90%;
|
|
height: 44px;
|
|
border: 3px inset #3a3d43;
|
|
-webkit-border-radius: 12px;
|
|
-webkit-box-shadow: 0 1px 1px #787c84;
|
|
font-size: 18px;
|
|
line-height: 38px;
|
|
}
|
|
.mblOverlay.mblOpener #cancel {
|
|
margin: 15px 5px;
|
|
background-color: #293039; /* for non-webkit browser */
|
|
background-image: none; /* for non-webkit browser */
|
|
background-image: -webkit-gradient(linear, left top, left bottom, from(#6d7278), to(#383f49), color-stop(0.5, #343c44), color-stop(0.5, #293039));
|
|
color: white;
|
|
}
|
|
.dj_bb button { /* BB BoxShadow Workaround */
|
|
-webkit-box-shadow: none !important;
|
|
}
|
|
</style>
|
|
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="parseOnLoad: true, async:true"></script>
|
|
<script language="JavaScript" type="text/javascript">
|
|
require([
|
|
"dojo/_base/html", // dojo.byId
|
|
"dijit/_base/manager", // dijit.byId
|
|
"dojox/mobile", // This is a mobile app.
|
|
"dojox/mobile/compat", // This mobile app supports running on desktop browsers
|
|
"dojox/mobile/parser", // This mobile app uses declarative programming with fast mobile parser
|
|
"dojox/mobile/deviceTheme", // This mobile app automatically changes it's theme to match devices
|
|
"dojox/mobile/Button",
|
|
"dojox/mobile/Opener"
|
|
]);
|
|
|
|
function clicked(id){
|
|
dijit.byId("actionSheet").hide();
|
|
var span = dojo.byId("msgArea");
|
|
span.innerHTML += """ + dojo.byId(id).innerHTML + "" button was clicked.";
|
|
setTimeout(function(){
|
|
span.innerHTML = "";
|
|
}, 2000);
|
|
}
|
|
|
|
</script>
|
|
</head>
|
|
<body style="visibility:hidden;">
|
|
<center>
|
|
<button dojoType="dojox.mobile.Button" class="mblBlueButton" style="margin-top:20px;width:200px;"
|
|
onclick="dijit.byId('actionSheet').show(this, ['above-centered','below-centered','after','before'])">Open Action Sheet</button>
|
|
<div id="msgArea" style="margin-top:5px;"></div>
|
|
</center>
|
|
|
|
<!-- Action Sheet -->
|
|
<div id="actionSheet" data-dojo-type="dojox.mobile.Opener">
|
|
<button id="Bookmark" dojoType="dojox.mobile.Button" onclick="clicked(this.id)">Add Bookmark</button><br>
|
|
<button id="HomeScreen" dojoType="dojox.mobile.Button" onclick="clicked(this.id)">Add to Home Screen</button><br>
|
|
<button id="MailLink" dojoType="dojox.mobile.Button" onclick="clicked(this.id)">Mail Link to this Page</button><br>
|
|
<button id="cancel" dojoType="dojox.mobile.Button" onclick="clicked(this.id)">Cancel</button>
|
|
</div>
|
|
<!-- Action Sheet -->
|
|
</body>
|
|
</html>
|