HTML and CSS Reference
In-Depth Information
■
Notice that I have used the
size
attribute on the
select
element so that several
choices are shown at once. This is the Metro convention for
select
elements that are part of the
main application layout. However, for flyouts, such as the one I created earlier in this chapter, the
convention is a single-line
select
that opens a drop-down list of options.
Tip
Displaying External Content
The WinJS page feature works only on content that is part of the application. You will generate
an error if you request an external URL using the
WinJS.UI.Pages.render
method. Instead, you
must use an
iframe
element if you want to display an external HTML document, but you can
combine this element with the WinJS page feature if you want to get the benefit of breaking your
application down into small and manageable pieces. To demonstrate this, I have created a new
file in the
html
directory called
storeDetail.html
. Listing 3-16 shows the contents of this file.
Listing 3-16.
The storeDetail.html File
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="noStoreSelectionContainer" class="win-type-x-large">
<p>Select an item on the list</p>
</div>
<div id="storeSelectionContainer">
<iframe id="storeFrame" seamless sandbox=""></iframe>
</div>
</body>
</html>
This is a simple document that acts as a wrapper around the
iframe
element and a place-
holder element to display when no list item has been selected. The most important element is,
of course, the
iframe
. he
seamless
attribute specifies that no border should be drawn around
the
iframe
, and setting the
sandbox
attribute to the empty string prevents the embedded con-
tent from running any scripts, navigating to new pages, and submitting forms. I am going to
use the
iframe
to display the home page of the grocery store associated with the selected item.
These pages contain all sorts of tracking scripts and some very exception-prone code, all of
which I want to spare my user from having to deal with.
Adding the Callback
I am going to use the same approach for defining a callback as I did when loading a fragment.
I have added the callback function to the
pages.js
file, and you can see the additions in Listing
3-17.
Search WWH ::
Custom Search