HTML and CSS Reference
In-Depth Information
mechanism for AJAX response insertion and handling concurrent calls (
https://
sponseText
.
You can build on the code from the slide, flip, and rotate demos by adding some sec‐
ondary pages and linking to them. You can then parse the links and create transitions
on the fly.
<div
id=
"home-page"
class=
"page"
>
<h1>
Home Page
</h1>
<a
href=
"demo2/home-detail.html"
class=
"fetch"
>
Find out more about the home page!
</a>
</div>
As you can see, this snippet leverages semantic markup with a link to another page. The
child page follows the same node/class structure as its parent. You could take this a step
further and use the
data-*
attribute for
page
nodes, and the like.
Here is the detail page (child) located in a separate HTML file (
/demo2/home-
detail.html
), which will be loaded, cached, and set up for transition on app load.
<div
id=
"home-page-detail"
class=
"page"
>
<h1>
Home Page Details
</h1>
<p>
Here are the details.
</p>
</div>
Now take a look at the JavaScript. For simplicity's sake, I'm leaving any helpers or op‐
timizations out of the code. The code is looping through a specified array of DOM nodes
to dig out links to fetch and cache. For the complete source, see
https://github.com/
var
fetchAndCache
=
function
()
{
// iterate through all nodes in this DOM to
//find all mobile pages we care about
var
pages
=
document
.
getElementsByClassName
(
'page'
);
for
(
var
i
=
0
;
i
<
pages
.
length
;
i
++
)
{
// find all links
var
pageLinks
=
pages
[
i
].
getElementsByTagName
(
'a'
);
for
(
var
j
=
0
;
j
<
pageLinks
.
length
;
j
++
)
{
var
link
=
pageLinks
[
j
];
if
(
link
.
hasAttribute
(
'href'
)
&&
//'#' in the href tells us that this page is
//already loaded in the DOM - and
// that it links to a mobile transition/page
