122 lines
3.9 KiB
HTML
122 lines
3.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>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 dojoType="dojox.mobile.Heading">iPhone Data Binding Ex.</h1>
|
|
<div class="row" dojoType="dojox.mvc.Group" ref="model">
|
|
<div>
|
|
<label for="serialInput">Order #:</label>
|
|
</div>
|
|
<div>
|
|
<input class="cell" id="serialInput" dojoType="dojox.mobile.TextBox"
|
|
ref="'rel:Serial'"/>
|
|
</div>
|
|
<div>
|
|
<label for="lastnameInput">Last:</label>
|
|
</div>
|
|
<div>
|
|
<input id="lastnameInput" dojoType="dojox.mobile.TextBox"
|
|
ref="'rel:Last'"/>
|
|
</div>
|
|
<div>
|
|
<label for="emailInput">Email:</label>
|
|
</div>
|
|
<div>
|
|
<input id="emailInput" dojoType="dojox.mobile.TextBox"
|
|
ref="'rel:Email'"/>
|
|
</div>
|
|
</div>
|
|
<div class="spacer"></div>
|
|
<button id="shipto" type="button" dojoType="dojox.mobile.Button" class="mblBlueButton" onclick="setRef('addrGroup', model.ShipTo)">Ship To</button>
|
|
<button id="billto" type="button" dojoType="dojox.mobile.Button" class="mblBlueButton" onclick="setRef('addrGroup', model.BillTo)">Bill To</button>
|
|
<br/>
|
|
<div class="row" id="addrGroup" dojoType="dojox.mvc.Group" ref="model.ShipTo">
|
|
<div>
|
|
<label for="streetInput">Street:</label>
|
|
</div>
|
|
<div>
|
|
<input id="streetInput" dojoType="dojox.mobile.TextBox"
|
|
placeHolder="Street" ref="'rel:Street'"/>
|
|
</div>
|
|
<div>
|
|
<label for="cityInput">City:</label>
|
|
</div>
|
|
<div>
|
|
<input id="cityInput" dojoType="dojox.mobile.TextBox"
|
|
placeHolder="City" ref="'rel:City'"/>
|
|
</div>
|
|
<div>
|
|
<label for="stateInput">State:</label>
|
|
</div>
|
|
<div>
|
|
<input id="stateInput" dojoType="dojox.mobile.TextBox"
|
|
placeHolder="State" ref="'rel:State'"/>
|
|
</div>
|
|
<div>
|
|
<label for="zipInput">ZIP Code:</label>
|
|
</div>
|
|
<div>
|
|
<input id="zipInput" dojoType="dojox.mobile.TextBox"
|
|
placeHolder="ZIP Code" ref="'rel:Zip'"/>
|
|
</div>
|
|
</div>
|
|
<div class="spacer"></div>
|
|
<button id="reset" type="button" dojoType="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>
|