HTML and CSS Reference
In-Depth Information
<body>
<div id="itemEditor">
<div>
<label for="item">Item:</label><input id="item">
</div>
<div>
<label for="quantity">Quantity:</label><input id="quantity">
</div>
<div>
<label for="stores">Store:</label>
<select id="stores" size="3"></select>
</div>
</div>
</body>
</html>
The markup in this file provides a
select
and two
input
elements to allow the user to edit
the details of a grocery list item. The difference from the previous example is that this is a com-
plete HTML document that contains a
script
element that imports the
itemDetail.js
file and
a
link
element that imports the
itemDetail.css
file, both of which I have created in the same
pages/itemDetail
folder, alongside
itemDetail.html
.
■
The
itemDetail.css
file just contains some basic CSS styles; you can see these in the
source code download if you are interested, but there is nothing new or Metro-specific to see.
Tip
he
itemDetail.js
file contains the callback for when the page is loaded, as shown in
Listing 3-14.
Listing 3-14.
Defining the Page Callback for the itemDetail.html Page
/// <reference path="//Microsoft.WinJS.0.6/js/base.js" />
/// <reference path="//Microsoft.WinJS.0.6/js/ui.js" />
(function () {
"use strict";
WinJS.UI.Pages.define("/pages/itemDetail/itemDetail.html", {
ready: function (targetElement) {
var selectedIndex=ViewModel.State.selectedItemIndex;
var selectedItem=ViewModel.UserData.getItems().getAt(selectedIndex);
document.getElementById("item").value=selectedItem.item;
document.getElementById("quantity").value=selectedItem.quantity;
var selectElement=WinJS.Utilities.query('select#stores')[0];
WinJS.Utilities.empty(selectElement);
var list=ViewModel.UserData.getStores();
list.forEach(function (item) {
var newOption=document.createElement("option");
Search WWH ::
Custom Search