Updated
This commit is contained in:
Éric Lemoine
158
master/examples/test_Opener-RoundSelectList-async.html
Normal file
158
master/examples/test_Opener-RoundSelectList-async.html
Normal file
@@ -0,0 +1,158 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user