Index of jquery template 2 Minuteman Summer Web Dev.
1. C:UsersSummerDesktopjQuery Template 2index.html Thursday, July 18, 2013 9:00 AM
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Multi-page template</title>
<link rel="stylesheet" href=
"http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
</head>
<body>
<!-- Start of first page: #one -->
<div data-role="page" id="one">
<div data-role="header">
<h1>Minuteman Lexington High School Summer Mobile App</h1>
</div><!-- /header -->
<div data-role="content" >
<h2>Welcome To The Minuteman High School Summer Web Development Mobile App</h2>
<p>I have an <code>id</code> of "one" on my page container. I'm first in the source
order so I'm shown when the page loads.</p>
<p>This is a multi-page boilerplate template that you can copy to build your first
jQuery Mobile page. This template contains multiple "page" containers inside, unlike a
<a href="page-template.html"> single page template</a> that has just one page within it.
</p>
<p>Just view the source and copy the code to get started. All the CSS and JS is linked
to the jQuery CDN versions so this is super easy to set up. Remember to include a meta
viewport tag in the head to set the zoom level.</p>
<p>You link to internal pages by referring to the <code>id</code> of the page you want
to show. For example, to <a href="#two" >link</a> to the page with an <code>id</code>
of "two", my link would have a <code>href="#two"</code> in the code.</p>
<h3>Show internal pages:</h3>
<p><a href="#two" data-role="button">Tutorials(page 2)</a></p>
<p><a href="#popup" data-role="button" data-rel="dialog" data-transition="pop">Show
page "popup" (as a dialog)</a></p>
<p><a href="#four" data-role="button" data-transition="flip">Course
Information(page 4)</a></p> <p><a href="#five" data-role="button"
data-transition="flip">Important Links</a></p
></div><!-- /content -->
<div data-role="footer" data-theme="d">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page one -->
-1-
2. C:UsersSummerDesktopjQuery Template 2index.html Thursday, July 18, 2013 9:00 AM
<!-- Start of second page: #two -->
<div data-role="page" id="two" data-theme="a">
<div data-role="header">
<h1>Tutorials</h1>
</div><!-- /header -->
<div data-role="content" data-theme="a">
<h2>Tutorials</h2>
<p>I have an id of "two" on my page container. I'm the second page container in this
multi-page template.</p>
<p>Notice that the theme is different for this page because we've added a few <code>
data-theme</code> swatch assigments here to show off how flexible it is. You can add
any content or widget to these pages, but we're keeping these simple.</p>
<p><a href="#one" data-direction="reverse" data-role="button" data-theme="b">Back to
page "one"</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page two -->
<!-- Start of third page: #popup -->
<div data-role="page" id="popup">
<div data-role="header" data-theme="e">
<h1>Dialog</h1>
</div><!-- /header -->
<div data-role="content" data-theme="d">
<h2>Popup</h2>
<p>I have an id of "popup" on my page container and only look like a dialog because the
link to me had a <code>data-rel="dialog"</code> attribute which gives me this inset
look and a <code>data-transition="pop"</code> attribute to change the transition to
pop. Without this, I'd be styled as a normal page.</p>
<p><a href="#one" data-rel="back" data-role="button" data-inline="true" data-icon="back"
>Back to page "one"</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page popup -->
<!-- Start of Fourth Page: #four -->
<div data-role="page" id="four" data-theme="a">
<div data-role="header">
<h1>Course Information</h1>
</div><!-- /header -->
-2-
3. C:UsersSummerDesktopjQuery Template 2index.html Thursday, July 18, 2013 9:00 AM
<div data-role="content" data-theme="a">
<h2>Course Information</h2>
<p>I have an id of "two" on my page container. I'm the second page container in this
multi-page template.</p>
<p>Notice that the theme is different for this page because we've added a few <code>
data-theme</code> swatch assigments here to show off how flexible it is. You can add
any content or widget to these pages, but we're keeping these simple.</p>
<p><a href="#one" data-direction="reverse" data-role="button" data-theme="b">Back to
page "one"</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page two -->
<!-- Start of second page: #five -->
<div data-role="page" id="five" data-theme="a">
<div data-role="header">
<h1>Important Links</h1>
</div><!-- /header -->
<div data-role="content" data-theme="c">
<h2>Important Links</h2>
<p>I have an id of "two" on my page container. I'm the second page container in this
multi-page template.</p>
<p>Notice that the theme is different for this page because we've added a few <code>
data-theme</code> swatch assigments here to show off how flexible it is. You can add
any content or widget to these pages, but we're keeping these simple.</p>
<p><a href="#one" data-direction="reverse" data-role="button" data-theme="c">Back to
page "one"</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page two -->
</body>
</html>
-3-
