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.
222 lines (209 loc) • 7.02 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 EdgeToEdgeDataList - demo</title>
<!-- This test shows a dojox/mobile/EdgeToEdgeDataList 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">
var dataStore;
require([
"dojox/mobile/parser",
"dojox/mobile",
"dojox/mobile/compat",
"dojo/ready",
"dijit/registry",
"dojo/data/ItemFileReadStore",
"dojox/mobile/ScrollableView",
"dojox/mobile/EdgeToEdgeDataList",
"dojox/mobile/FilteredListMixin",
"dojox/mobile/SearchBox",
"dojox/mobile/SimpleDialog",
"dojox/mobile/RoundRect",
"dojox/mobile/Button",
"dojox/mobile/RadioButton",
"dojox/mobile/Switch"
], function(parser, mobile, compat, ready, registry,
ItemFileReadStore, ScrollableView, EdgeToEdgeDataList, FilteredListMixin,
SearchBox, SimpleDialog, RoundRect, Button, RadioButton, Switch){
var filterBox;
var static_data = {
items: [
{label: "Alabama"},
{label: "Alaska"},
{label: "American Samoa"},
{label: "Arizona"},
{label: "Arkansas"},
{label: "Armed Forces Europe"},
{label: "Armed Forces Pacific"},
{label: "Armed Forces the Americas"},
{label: "California"},
{label: "Colorado"},
{label: "Connecticut"},
{label: "Delaware"},
{label: "District of Columbia"},
{label: "Federated States of Micronesia"},
{label: "Florida"},
{label: "Georgia"},
{label: "Guam"},
{label: "Hawaii"},
{label: "Idaho"},
{label: "Illinois"},
{label: "Indiana"},
{label: "Iowa"},
{label: "Kansas"},
{label: "Kentucky"},
{label: "Louisiana"},
{label: "Maine"},
{label: "Marshall Islands"},
{label: "Maryland"},
{label: "Massachusetts"},
{label: "Michigan"},
{label: "Minnesota"},
{label: "Mississippi"},
{label: "Missouri"},
{label: "Montana"},
{label: "Nebraska"},
{label: "Nevada"},
{label: "New Hampshire"},
{label: "New Jersey"},
{label: "New Mexico"},
{label: "New York"},
{label: "North Carolina"},
{label: "North Dakota"},
{label: "Northern Mariana Islands"},
{label: "Ohio"},
{label: "Oklahoma"},
{label: "Oregon"},
{label: "Pennsylvania"},
{label: "Puerto Rico"},
{label: "Rhode Island"},
{label: "South Carolina"},
{label: "South Dakota"},
{label: "Tennessee"},
{label: "Texas"},
{label: "Utah"},
{label: "Vermont"},
{label: "Virgin Islands, U.S."},
{label: "Virginia"},
{label: "Washington"},
{label: "West Virginia"},
{label: "Wisconsin"},
{label: "Wyoming"}
]
};
// dojo/data store for dojox/mobile/EdgeToEdgeDataList
dataStore = new ItemFileReadStore({data: static_data});
// 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.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("list").getFilterBox();
});
});
</script>
<style>
.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 EdgeToEdgeDataList</h1>
<input data-dojo-type="dojox/mobile/SearchBox" type="search" id="filterBox"
style="width:50%; float: left; margin-top: 2px" class="mblFilteredEdgeToEdgeListSearchBox">
<button style="float:right" onclick="showOptions('dlg_options')">Options</button>
<div style="clear:left" data-dojo-type="dojox/mobile/ScrollableView">
<ul data-dojo-type="dojox/mobile/EdgeToEdgeDataList" id="list"
data-dojo-mixins="dojox/mobile/FilteredListMixin"
data-dojo-props="filterBoxRef: 'filterBox', placeHolder: 'Search', store: dataStore"></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>