Skip to content

Instantly share code, notes, and snippets.

@planetoftheweb

planetoftheweb/gist:2999733

Created June 26, 2012 22:28
Show Gist options
  • Save planetoftheweb/2999733 to your computer and use it in GitHub Desktop.
Save planetoftheweb/2999733 to your computer and use it in GitHub Desktop.
Download ZIP
jQuery Mobile Progression
Raw
gistfile1.txt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My App</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<meta name = "viewport" content = "width = device-width">
</head>
<body>
<!-------------- home -------------->
<div id="home"
data-role="page"
data-theme="b">
<div data-role="header"
data-theme="e">
<a href="#home"
data-icon="home"
data-iconpos="notext"
>Home</a>
<a href="#info"
data-icon="info"
data-iconpos="notext"
data-transition="pop"
data-rel="dialog"
>info</a>
<h1>My App</h1>
</div><!-- header -->
<div data-role="content">
<p>Welcome to my first mobile app</p>
<a href="#list" data-icon="grid" data-role="button">List Page</a>
</div>
<div data-role="footer"
data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#list" data-icon="grid" data-iconpos="top">List Page</a></li>
<li><a href="#home" data-iconpos="notext" data-icon="home">Home</a></li>
<li><a href="#photos" data-iconpos="notext" data-icon="grid">Photos</a></li>
<li><a href="#home" data-iconpos="notext" data-icon="home">Home</a></li>
<li><a href="#home" data-iconpos="notext" data-icon="home">Home</a></li>
</ul>
</div>
</div><!-- footer -->
</div>
<!-------------- List -------------->
<div id="list" data-role="page">
<div data-role="header"
data-theme="e">
<a href="#home"
data-icon="home"
data-iconpos="notext"
>Home</a>
<a href="#info"
data-icon="info"
data-iconpos="notext"
data-transition="pop"
data-rel="dialog"
>info</a>
<h1>My App</h1>
</div>
<!-- content -->
<div data-role="content">
<ul data-role="listview" data-filter="true">
<li>
<a href="#home">
<h2>Ray Villalobos</h2>
<p>My awesome home page looks great.</p>
<img src="logo.png" alt="logo" />
</a>
</li>
<li>Eric Villalobos</li>
<li>German Villalobos</li>
</ul>
</div>
<div data-role="footer"
data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#list" data-icon="grid" data-iconpos="top">List Page</a></li>
<li><a href="#home" data-iconpos="notext" data-icon="home">Home</a></li>
<li><a href="#photos" data-iconpos="notext" data-icon="grid">Photos</a></li>
<li><a href="#home" data-iconpos="notext" data-icon="home">Home</a></li>
<li><a href="#home" data-iconpos="notext" data-icon="home">Home</a></li>
</ul>
</div>
</div><!-- footer -->
</div>
<!-------------- info -------------->
<div data-role="page" id="info" data-theme="d">
<div data-role="header">
<a href="#home"
data-icon="back"
data-iconpos="notext"
>Info</a>
<h1>My App</h1>
</div><!-- header -->
<div data-role="content">
<p>Check out the cool app that I just built using jQuery Mobile.</p>
</div><!-- content -->
</div><!-- page -->
<!-------------- grid -------------->
<div id="photos" data-role="page">
<div data-role="header"
data-theme="e">
<a href="#home"
data-icon="home"
data-iconpos="notext"
>Home</a>
<a href="#info"
data-icon="info"
data-iconpos="notext"
data-transition="pop"
data-rel="dialog"
>info</a>
<h1>My App</h1>
</div>
<!-- content -->
<div data-role="content">
<div class="ui-grid-d">
<div class="ui-block-a"><a href="#photo_dvd"><img src="dvd.jpg" alt="photo" /></a></div>
<div class="ui-block-b"><img src="monster.jpg" alt="photo" /></div>
<div class="ui-block-c"><img src="tunnel.jpg" alt="photo" /></div>
<div class="ui-block-d"><img src="closeup.jpg" alt="photo" /></div>
<div class="ui-block-e"><img src="group.jpg" alt="photo" /></div>
<div class="ui-block-a"><img src="chiquita.jpg" alt="photo" /></div>
</div><!-- grid -->
</div><!-- content -->
<div data-role="footer"
data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#list" data-icon="grid" data-iconpos="top">List Page</a></li>
<li><a href="#home" data-iconpos="notext" data-icon="home">Home</a></li>
<li><a href="#photos" data-iconpos="notext" data-icon="grid">Photos</a></li>
<li><a href="#home" data-iconpos="notext" data-icon="home">Home</a></li>
<li><a href="#home" data-iconpos="notext" data-icon="home">Home</a></li>
</ul>
</div>
</div><!-- footer -->
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment