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.
122 lines (114 loc) • 4.09 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>iPhone Shipto-Billto</title>
<link href="../../../../../dojox/mobile/themes/iphone/iphone.css" rel="stylesheet"/>
<link href="../css/iphone-format.css" rel="stylesheet"/>
<!-- use links below for android theme
<link href="../../../../../dojox/mobile/themes/android/android.css" rel="stylesheet">
<link href="../css/android-format.css" rel="stylesheet">
-->
<script type="text/javascript" src="../../../../../dojo/dojo.js" djConfig="parseOnLoad: true, isDebug: true"></script>
<script language="JavaScript" type="text/javascript">
//dojo.require("dojo.parser");
dojo.require("dojox.mobile.parser");
dojo.require("dojox.mobile");
dojo.require("dojox.mobile.TextBox");
dojo.require("dojox.mobile.Button");
dojo.require("dojox.mvc");
dojo.require("dojox.mvc.Group");
dojo.require("dojox.mvc.Repeat");
dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat");
// Initial data
var names = {
"Serial" : "360324",
"First" : "John",
"Last" : "Doe",
"Email" : "jdoe@us.ibm.com",
"ShipTo" : {
"Street" : "123 Valley Rd",
"City" : "Katonah",
"State" : "NY",
"Zip" : "10536"
},
"BillTo" : {
"Street" : "17 Skyline Dr",
"City" : "Hawthorne",
"State" : "NY",
"Zip" : "10532"
}
};
var model = dojox.mvc.newStatefulModel({ data : names });
</script>
</head>
<body>
<h1 data-dojo-type="dojox.mobile.Heading">iPhone Data Binding Ex.</h1>
<div class="row" data-dojo-type="dojox.mvc.Group" data-dojo-props="ref:'model'">
<div>
<label for="serialInput">Order #:</label>
</div>
<div>
<input class="cell" id="serialInput" data-dojo-type="dojox.mobile.TextBox"
data-dojo-props="ref:'rel:Serial'"/>
</div>
<div>
<label for="lastnameInput">Last:</label>
</div>
<div>
<input id="lastnameInput" data-dojo-type="dojox.mobile.TextBox"
data-dojo-props="ref:'rel:Last'"/>
</div>
<div>
<label for="emailInput">Email:</label>
</div>
<div>
<input id="emailInput" data-dojo-type="dojox.mobile.TextBox"
data-dojo-props="ref:'rel:Email'"/>
</div>
</div>
<div class="spacer"></div>
<button id="shipto" type="button" data-dojo-type="dojox.mobile.Button" class="mblBlueButton" onclick="setRef('addrGroup', model.ShipTo)">Ship To</button>
<button id="billto" type="button" data-dojo-type="dojox.mobile.Button" class="mblBlueButton" onclick="setRef('addrGroup', model.BillTo)">Bill To</button>
<br/>
<div class="row" id="addrGroup" data-dojo-type="dojox.mvc.Group" data-dojo-props="ref:model.ShipTo">
<div>
<label for="streetInput">Street:</label>
</div>
<div>
<input id="streetInput" data-dojo-type="dojox.mobile.TextBox"
placeHolder="Street" data-dojo-props="ref:'rel:Street'"/>
</div>
<div>
<label for="cityInput">City:</label>
</div>
<div>
<input id="cityInput" data-dojo-type="dojox.mobile.TextBox"
placeHolder="City" data-dojo-props="ref:'rel:City'"/>
</div>
<div>
<label for="stateInput">State:</label>
</div>
<div>
<input id="stateInput" data-dojo-type="dojox.mobile.TextBox"
placeHolder="State" data-dojo-props="ref:'rel:State'"/>
</div>
<div>
<label for="zipInput">ZIP Code:</label>
</div>
<div>
<input id="zipInput" data-dojo-type="dojox.mobile.TextBox"
placeHolder="ZIP Code" data-dojo-props="ref:'rel:Zip'"/>
</div>
</div>
<div class="spacer"></div>
<button id="reset" type="button" data-dojo-type="dojox.mobile.Button" class="mblBlueButton" onclick="model.reset()">Reset</button>
<script type="text/javascript">
function setRef(id, addrRef) {
var widget = dijit.byId(id);
widget.set("ref", addrRef);
}
</script>
</body>
</html>