<section>
<?= t_head('Internal Navigation with jQuery Mobile', "10–15") ?>
<p>Create an HTML file called <code>minilab16.html</code> containing two “internal pages” using the custom <code>data-role</code> attributes that jQuery Mobile looks for. Create links between the two internal pages using the pages’ ID attributes.</p>
</section>
<section>
<?= t_head('Ajax Navigation with jQuery Mobile', "10–15") ?>
<p>Create a new <samp>pagethree.html</samp> file which contains the same full HTML skeleton as the first file, but with a third <code>div</code> whose <code>role</code> is <code>page</code>.</p>
<p>Create a link from one of the first two pages that goes to <samp>pagethree.html</samp>. jQuery Mobile will automatically load <samp>pagethree.html</samp> using Ajax, then find the <strong>first</strong> div inside that file whose role is <code>page</code>, and show that.</p>
</section>
<section>
<?= t_head('Page Transitions (optional)', "10–15") ?>
<p>jQuery Mobile looks for custom <code>data-transition</code> attributes to specify page transitions, as specified here:</p>
<p class="resource"><a href="http://jquerymobile.com/demos/1.2.0/docs/pages/page-transitions.html">http://jquerymobile.com/demos/1.2.0/docs/pages/page-transitions.html</a></p>
<p>Specify a different page transition for each link in your above two files.</p>
</section>
<footer>
<p>If you’ve finished everything, good job! Experiment with adding jQuery Mobile UI elements like buttons, lists, and sliders.</p>
</footer>