dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
159 lines (155 loc) • 4.91 kB
HTML
<html>
<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>Opener-RoundSelectList</title>
<style>
.mblTooltip.mblOpener DIV[label='Cancel'] {
display: none;
}
.mblTooltip #header1 {
width: 300px;
}
.mblOverlay#listPicker {
height: 200px;
}
</style>
<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="parseOnLoad: true, async: true"></script>
<script type="text/javascript">
var ringtone, listPicker, trim;
require([
"dojo/ready", // ready
"dojo/_base/html", // dojo.byId
"dojo/_base/lang", // dojo.trim
"dijit/registry", // 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/Opener",
"dojox/mobile/ScrollableView"
], function(ready, html, lang, registry){
ready(function(){
ringtone = html.byId('ringtone');
listPicker = registry.byId('listPicker');
trim = lang.trim;
});
});
var checkedItem = 'Marimba';
function getSelectedRingtone(node, accept){
if(accept === true){
ringtone.value = checkedItem || '';
}
}
function setSelectedRingtone(node){
// NOOP
}
function onCheck(item, checked){
setTimeout(function(){
if(checked){
checkedItem = trim(item.labelNode.innerText || item.labelNode.textContent || '');
}
}, 500);
}
</script>
</head>
<body style="visibility:hidden;">
<table cellspacing="20" style="margin-top:100px;padding-bottom:1500px;z-index:9999;"><!-- scrollable for testing purposes -->
<tr>
<td style="text-align:right;font-weight:bold;z-index:9999;">Ringtone</td>
<td><input id="ringtone" readOnly value="" placeholder="Select a ringtone"
onclick="listPicker.show(this, ['above-centered','below-centered','after','before'])" /></td>
</tr>
</table>
<!-- if onBlur returns !false, then the popup is closed when a click event is received away from the popup -->
<!-- override user's custom z-index -->
<div id="listPicker" style="z-index:10000;" data-dojo-type="dojox.mobile.Opener" data-dojo-props="onHide:getSelectedRingtone, onShow:setSelectedRingtone, onBlur:function(){ return true; }">
<h1 id="header1" dojoType="dojox.mobile.Heading" label="Ringtone">
<span dojoType="dojox.mobile.ToolBarButton" label="Done" class="mblColorBlue" style="position:absolute;width:45px;right:0;"
onclick="listPicker.hide(true)"></span>
<span dojoType="dojox.mobile.ToolBarButton" label="Cancel" class="mblColorBlue" style="position:absolute;width:45px;left:0;"
onclick="listPicker.hide(false)"></span>
</h1>
<div dojoType="dojox.mobile.ScrollableView" selected="true" height="auto">
<ul id="list1" dojoType="dojox.mobile.RoundRectList" select="single" data-dojo-props="onCheckStateChanged:onCheck">
<li id="item1" dojoType="dojox.mobile.ListItem" checked="true">
Marimba
</li>
<li dojoType="dojox.mobile.ListItem">
Alarm
</li>
<li dojoType="dojox.mobile.ListItem">
Ascending
</li>
<li dojoType="dojox.mobile.ListItem">
Bark
</li>
<li dojoType="dojox.mobile.ListItem">
Bell Tower
</li>
<li dojoType="dojox.mobile.ListItem">
Blues
</li>
<li dojoType="dojox.mobile.ListItem">
Boing
</li>
<li dojoType="dojox.mobile.ListItem">
Crickets
</li>
<li dojoType="dojox.mobile.ListItem">
Digital
</li>
<li dojoType="dojox.mobile.ListItem">
Doorbell
</li>
<li dojoType="dojox.mobile.ListItem">
Duck
</li>
<li dojoType="dojox.mobile.ListItem">
Harp
</li>
<li dojoType="dojox.mobile.ListItem">
Motorcycle
</li>
<li dojoType="dojox.mobile.ListItem">
Old Car Horn
</li>
<li dojoType="dojox.mobile.ListItem">
Old Phone
</li>
<li dojoType="dojox.mobile.ListItem">
Piano Roll
</li>
<li dojoType="dojox.mobile.ListItem">
Pinball
</li>
<li dojoType="dojox.mobile.ListItem">
Robot
</li>
<li dojoType="dojox.mobile.ListItem">
Sci-Fi
</li>
<li dojoType="dojox.mobile.ListItem">
Sonar
</li>
<li dojoType="dojox.mobile.ListItem">
Strum
</li>
<li dojoType="dojox.mobile.ListItem">
Timba
</li>
<li dojoType="dojox.mobile.ListItem">
Time Passing
</li>
<li dojoType="dojox.mobile.ListItem">
Trill
</li>
<li dojoType="dojox.mobile.ListItem">
Xylophone
</li>
</ul>
</div>
</div>
</body>
</html>