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.
229 lines (217 loc) • 9.16 kB
HTML
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<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>Filtered RoundRectList - demo</title>
<!-- This test shows a dojox/mobile/RoundRectList filtered using dojox/mobile/FilteredListMixin. -->
<!-- Use-case: markup; demonstrates the customization of filtering criteria. -->
<script type="text/javascript" src="../deviceTheme.js"></script>
<script type="text/javascript" src="../../../dojo/dojo.js"
data-dojo-config="async: true, parseOnLoad: true"></script>
<script type="text/javascript">
require([
"dojox/mobile/parser",
"dojox/mobile",
"dojox/mobile/compat",
"dojo/ready",
"dijit/registry",
"dojox/mobile/FilteredListMixin",
"dojox/mobile/ScrollableView",
"dojox/mobile/SimpleDialog",
"dojox/mobile/RoundRect",
"dojox/mobile/Button",
"dojox/mobile/RadioButton",
"dojox/mobile/Switch"
], function(parser, mobile, compat, ready, registry,
FilteredListMixin, ScrollableView, SimpleDialog, RoundRect, Button, RadioButton, Switch){
var filterBox;
// Shows the Search Options dialog.
showOptions = function(dlg){
registry.byId(dlg).show();
};
// Hides the Search Options dialog. Optionally, applies the new search options.
hideOptions = function(dlg, applyOptions){
registry.byId(dlg).hide();
if(applyOptions){
filterBox.set("ignoreCase", registry.byId("ignoreCaseSwitch").value == "on");
filterBox.set("incremental", registry.byId("incrementalSwitch").value == "on");
if (registry.byId("radioStartsWith").checked){
filterBox.queryExpr = "${0}*";
}else if(registry.byId("radioContains").checked){
filterBox.queryExpr = "*${0}*";
}else if(registry.byId("radioIs").checked){
filterBox.queryExpr = "${0}";
}
}
};
ready(function(){
filterBox = registry.byId("filterBox");
});
});
</script>
<style>
/* Fit the margin defined by mblRoundRectList in all themes but ipad */
.searchOptions {
float: right;
margin-right: 9px;
}
/* Fit the margin defined by mblRoundRectList for ipad */
.dj_ipad.dj_tablet .searchOptions {
float: right;
margin-right: 30px;
}
.lnk {
font-size: 14px;
color: #0B5199;
text-decoration: none;
}
.mblSimpleDialogButton {
margin: 7px 0 0;
width: 262px;
font-size: 17px;
font-weight: bold;
opacity: 0.95;
}
.mblSimpleDialogButton2l {
float: left;
width: 127px;
margin: 7px 0 0;
font-size: 17px;
font-weight: bold;
opacity: 0.95;
}
.mblSimpleDialogButton2r {
float: right;
width: 127px;
margin: 7px 0 0;
font-size: 17px;
font-weight: bold;
opacity: 0.95;
}
</style>
</head>
<body style="visibility:hidden;background-color:#424142;">
<div data-dojo-type="dojox/mobile/View">
<h1 data-dojo-type="dojox/mobile/Heading" data-dojo-props="fixed: 'top'">Filtered RoundRectList</h1>
<div class="mblFilteredRoundRectListSearchBox">
<input data-dojo-type="dojox/mobile/SearchBox" type="search" id="filterBox"
data-dojo-props="filterBoxRef: 'filterBox'"
style="width: 50%; float: left">
</div>
<button class="searchOptions" onclick="showOptions('dlg_options')">Options</button>
<div data-dojo-type="dojox/mobile/ScrollableView">
<ul id="list" data-dojo-type="dojox/mobile/RoundRectList"
data-dojo-mixins="dojox/mobile/FilteredListMixin"
data-dojo-props="filterBoxRef: 'filterBox', placeHolder: 'Search'">
<li data-dojo-type="dojox/mobile/ListItem">Alabama</li>
<li data-dojo-type="dojox/mobile/ListItem">Alaska</li>
<li data-dojo-type="dojox/mobile/ListItem">American Samoa</li>
<li data-dojo-type="dojox/mobile/ListItem">Arizona</li>
<li data-dojo-type="dojox/mobile/ListItem">Arkansas</li>
<li data-dojo-type="dojox/mobile/ListItem">Armed Forces Europe</li>
<li data-dojo-type="dojox/mobile/ListItem">Armed Forces Pacific</li>
<li data-dojo-type="dojox/mobile/ListItem">Armed Forces the Americas</li>
<li data-dojo-type="dojox/mobile/ListItem">California</li>
<li data-dojo-type="dojox/mobile/ListItem">Colorado</li>
<li data-dojo-type="dojox/mobile/ListItem">Connecticut</li>
<li data-dojo-type="dojox/mobile/ListItem">Delaware</li>
<li data-dojo-type="dojox/mobile/ListItem">District of Columbia</li>
<li data-dojo-type="dojox/mobile/ListItem">Federated States of Micronesia</li>
<li data-dojo-type="dojox/mobile/ListItem">Florida</li>
<li data-dojo-type="dojox/mobile/ListItem">Georgia</li>
<li data-dojo-type="dojox/mobile/ListItem">Guam</li>
<li data-dojo-type="dojox/mobile/ListItem">Hawaii</li>
<li data-dojo-type="dojox/mobile/ListItem">Idaho</li>
<li data-dojo-type="dojox/mobile/ListItem">Illinois</li>
<li data-dojo-type="dojox/mobile/ListItem">Indiana</li>
<li data-dojo-type="dojox/mobile/ListItem">Iowa</li>
<li data-dojo-type="dojox/mobile/ListItem">Kansas</li>
<li data-dojo-type="dojox/mobile/ListItem">Kentucky</li>
<li data-dojo-type="dojox/mobile/ListItem">Louisiana</li>
<li data-dojo-type="dojox/mobile/ListItem">Maine</li>
<li data-dojo-type="dojox/mobile/ListItem">Marshall Islands</li>
<li data-dojo-type="dojox/mobile/ListItem">Maryland</li>
<li data-dojo-type="dojox/mobile/ListItem">Massachusetts</li>
<li data-dojo-type="dojox/mobile/ListItem">Michigan</li>
<li data-dojo-type="dojox/mobile/ListItem">Minnesota</li>
<li data-dojo-type="dojox/mobile/ListItem">Mississippi</li>
<li data-dojo-type="dojox/mobile/ListItem">Missouri</li>
<li data-dojo-type="dojox/mobile/ListItem">Montana</li>
<li data-dojo-type="dojox/mobile/ListItem">Nebraska</li>
<li data-dojo-type="dojox/mobile/ListItem">Nevada</li>
<li data-dojo-type="dojox/mobile/ListItem">New Hampshire</li>
<li data-dojo-type="dojox/mobile/ListItem">New Jersey</li>
<li data-dojo-type="dojox/mobile/ListItem">New Mexico</li>
<li data-dojo-type="dojox/mobile/ListItem">New York</li>
<li data-dojo-type="dojox/mobile/ListItem">North Carolina</li>
<li data-dojo-type="dojox/mobile/ListItem">North Dakota</li>
<li data-dojo-type="dojox/mobile/ListItem">Northern Mariana Islands</li>
<li data-dojo-type="dojox/mobile/ListItem">Ohio</li>
<li data-dojo-type="dojox/mobile/ListItem">Oklahoma</li>
<li data-dojo-type="dojox/mobile/ListItem">Oregon</li>
<li data-dojo-type="dojox/mobile/ListItem">Pennsylvania</li>
<li data-dojo-type="dojox/mobile/ListItem">Puerto Rico</li>
<li data-dojo-type="dojox/mobile/ListItem">Rhode Island</li>
<li data-dojo-type="dojox/mobile/ListItem">South Carolina</li>
<li data-dojo-type="dojox/mobile/ListItem">South Dakota</li>
<li data-dojo-type="dojox/mobile/ListItem">Tennessee</li>
<li data-dojo-type="dojox/mobile/ListItem">Texas</li>
<li data-dojo-type="dojox/mobile/ListItem">Utah</li>
<li data-dojo-type="dojox/mobile/ListItem">Vermont</li>
<li data-dojo-type="dojox/mobile/ListItem">Virgin Islands, U.S.</li>
<li data-dojo-type="dojox/mobile/ListItem">Virginia</li>
<li data-dojo-type="dojox/mobile/ListItem">Washington</li>
<li data-dojo-type="dojox/mobile/ListItem">West Virginia</li>
<li data-dojo-type="dojox/mobile/ListItem">Wisconsin</li>
<li data-dojo-type="dojox/mobile/ListItem">Wyoming</li>
</ul>
</div>
</div>
<div id="dlg_options" data-dojo-type="dojox/mobile/SimpleDialog">
<div class="mblSimpleDialogTitle">Search Options</div>
<table style="width:100%">
<tr>
<td><span class="bold">Ignore case</span></td>
<td style="text-align:left">
<input type="checkbox" data-dojo-type="dojox/mobile/Switch"
id="ignoreCaseSwitch" value="on"></td>
</tr>
<tr>
<td><span class="bold">Incremental</span></td>
<td style="text-align:left">
<input type="checkbox" data-dojo-type="dojox/mobile/Switch"
id="incrementalSwitch" value="on">
</td>
</tr>
<tr>
<td style="text-align:left">
<input type="radio" id="radioStartsWith" data-dojo-type="dojox/mobile/RadioButton"
name="mobileRadio" value="Starts with" checked>
<label for="radioStartsWith">Starts with</label>
</td>
</tr>
<tr>
<td style="text-align:left">
<input type="radio" id="radioContains" data-dojo-type="dojox/mobile/RadioButton"
name="mobileRadio" value="Contains">
<label for="radioContains">Contains</label>
</td>
</tr>
<tr>
<td style="text-align:left">
<input type="radio" id="radioIs" data-dojo-type="dojox/mobile/RadioButton"
name="mobileRadio" value="Is">
<label for="radioIs">Is</label>
</td>
</tr>
</table>
<button data-dojo-type="dojox/mobile/Button" class="mblSimpleDialogButton2l"
onclick="hideOptions('dlg_options', false)">Cancel</button>
<button data-dojo-type="dojox/mobile/Button" class="mblSimpleDialogButton2r mblBlueButton"
onclick="hideOptions('dlg_options', true)">OK</button>
</div>
</body>
</html>