Skip to content

Instantly share code, notes, and snippets.

@t-kashima
Created September 14, 2011 18:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save t-kashima/1217375 to your computer and use it in GitHub Desktop.
Save t-kashima/1217375 to your computer and use it in GitHub Desktop.
jQueryMobileTest
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQueryMobileTest</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />
<style type="text/css"></style>
<script type="text/javascript">
$(document).bind('pagechange', function (e, data) {
console.log("page change");
});
</script>
</head>
<body>
<!-- page one -->
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>jQueryMobileTest</h1>
<a href="#option" data-icon="gear" class="ui-btn-right">Option</a>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="#about">About</a></li>
<li><a href="#gallery">Gallery</a></li>
</ul>
</div>
</div><!-- /page one -->
<!-- page two -->
<div data-role="page" id="about" data-title="About">
<div data-role="header" data-position="fixed">
<a data-icon="back" data-rel="back">Back</a>
<h1>jQueryMobileTest</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<h2>About</h2>
<p>This is about.</p>
</ul>
</div>
</div><!-- /page two -->
<!-- page three -->
<div data-role="page" id="gallery" data-title="Gallery">
<div data-role="header" data-position="fixed">
<a data-icon="back" data-rel="back">Back</a>
<h1>jQueryMobileTest</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<h2>Gallery</h2>
<p>This is gallery.</p>
</ul>
</div>
</div><!-- /page three -->
<!-- option -->
<div data-role="page" id="option" data-title="Option">
<div data-role="header" data-position="fixed">
<a data-icon="back" data-rel="back">Back</a>
<h1>jQueryMobileTest</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<h2>Option</h2>
<p>How are you?</p>
</ul>
</div>
</div><!-- /option -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment