Skip to content

Instantly share code, notes, and snippets.

@mrtony

mrtony/jsbin.hadoqe.html

Created July 3, 2014 00:50
Show Gist options
  • Save mrtony/af457fbbf29a5bc18b76 to your computer and use it in GitHub Desktop.
Save mrtony/af457fbbf29a5bc18b76 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.hadoqe.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Another change page example" />
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<title>JQM Events</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).on("mobileinit", function() {
/* all pages default theme "e" */
$.mobile.page.prototype.options.theme = "e";
/* all listviews default icon to "star" */
$.mobile.listview.prototype.options.icon = "star";
$.mobile.page.prototype.options.addBackBtn = true;
$.mobile.page.prototype.options.backBtnText = "Lost?";
$.mobile.page.prototype.options.backBtnTheme = "d";
});
</script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script>
/* change theme of page Z */
$(document).on("pagebeforecreate", "#pagez", function() {
$(this).page({
theme: "b"
});
});
/* change listview icon of listview #foo */
$(document).on("pagecreate", "#pagez", function() {
$("#foo").listview({
icon: "bars"
});
});
/* skip showing page Y */
$(document).on("pagebeforechange", function(e, data) {
var to_page = data.toPage[0].id;
if (to_page == "pagey") {
$.mobile.changePage("#pagez", {
transition: "flip"
});
e.preventDefault();
}
});
</script>
</head>
<body>
<div data-role="page" id="pagex">
<div data-role="header">
<h1>Page X</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li><a href="#">Acura</a>
</li>
<li><a href="#">Audi</a>
</li>
<li><a href="#">BMW</a>
</li>
<li><a href="#">Cadillac</a>
</li>
<li><a href="#">Ferrari</a>
</li>
</ul> <a href="#pagey" data-role="button">Go to Page Y</a>
</div>
</div>
<div data-role="page" id="pagey">
<div data-role="header">
<h1>Page Y</h1>
</div>
</div>
<div data-role="page" id="pagez">
<div data-role="header">
<h1>Page Z</h1>
</div>
<div data-role="content">
<p>Sorry, Page Y cant be viewed!</p>
<ul data-role="listview" data-inset="true" id="foo">
<li><a href="#">Acura</a>
</li>
<li><a href="#">Audi</a>
</li>
<li><a href="#">BMW</a>
</li>
<li><a href="#">Cadillac</a>
</li>
<li><a href="#">Ferrari</a>
</li>
</ul>
</div>
</div>
</body>
</html>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment