159 lines
4.9 KiB
HTML
159 lines
4.9 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
<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" djConfig="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">
|
|
<div dojoType="dojox.mobile.ToolBarButton" label="Done" class="mblColorBlue" style="position:absolute;width:45px;right:0;"
|
|
onclick="listPicker.hide(true)"></div>
|
|
<div dojoType="dojox.mobile.ToolBarButton" label="Cancel" class="mblColorBlue" style="position:absolute;width:45px;left:0;"
|
|
onclick="listPicker.hide(false)"></div>
|
|
</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>
|