Skip to content

Instantly share code, notes, and snippets.

@alwaysovercast

alwaysovercast/gist:3877662

Created October 12, 2012 06:44
Show Gist options
  • Save alwaysovercast/3877662 to your computer and use it in GitHub Desktop.
Save alwaysovercast/3877662 to your computer and use it in GitHub Desktop.
Download ZIP
jQuery Mobile : Navbar with Icons
Raw
gistfile1.txt
<!DOCTYPE html>
<html>
<head>
<title>Navigation Bar</title>
<!-- the three things that jQuery Mobile needs to work -->
<link rel="stylesheet" href="../jquery.mobile-1.0rc2/jquery.mobile-1.0rc2.css" />
<script src="../jquery-1.6.4.js" type="text/javascript"></script>
<script src="../jquery.mobile-1.0rc2/jquery.mobile-1.0rc2.js" type="text/javascript"></script>
</head>
<body>
<!-- This is the first page -->
<section id="firstpage" data-role="page">
<header data-role="header">
<h1>
Header Bar
</h1>
<nav data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active ui-state-persist" data-icon="plus">One</a></li>
<li><a href="#secondpage" data-icon="minus">Two</a></li>
<li><a href="#" data-icon="check">Three</a></li>
<li><a href="#" data-icon="grid">Four</a></li>
</ul>
</nav>
</header>
<div data-role="content">
<p>This is page 1</p>
</div>
</section>
<section id="secondpage" data-role="page">
<header data-role="header">
<h1>
Header Bar
</h1>
<nav data-role="navbar">
<ul>
<li><a href="#firstpage" data-icon="plus">One</a></li>
<li><a href="#" class="ui-btn-active ui-state-persist" data-icon="minus">Two</a></li>
<li><a href="#" data-icon="check">Three</a></li>
<li><a href="#" data-icon="grid">Four</a></li>
</ul>
</nav>
</header>
<div data-role="content">
<p>This is page 2</p>
</div>
</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment