mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-16 22:10:25 +00:00
119 lines
3.9 KiB
HTML
119 lines
3.9 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>changePage JSON Sample</title>
|
|
<link rel="stylesheet" href="../../../css/themes/default/">
|
|
<script src="../../../js/jquery.js"></script>
|
|
<script src="../../../js/"></script>
|
|
<script type="text/javascript">
|
|
|
|
// Load the JSON data for a specific category, based on
|
|
// the URL passed in. Generate markup for the items in the
|
|
// category, inject it into an embedded page, and then make
|
|
// that page the current active page.
|
|
function showCategory( url, options )
|
|
{
|
|
$.getJSON( url, function( category ) {
|
|
if ( category ) {
|
|
// Get the page we are going to dump our content into.
|
|
var $page = $( "#category-items" ),
|
|
|
|
// Get the header for the page.
|
|
$header = $page.children( ":jqmData(role=header)" ),
|
|
|
|
// Get the content area element for the page.
|
|
$content = $page.children( ":jqmData(role=content)" ),
|
|
|
|
// The markup we are going to inject into the content
|
|
// area of the page.
|
|
markup = "<p>" + category.description + "</p><ul data-role='listview' data-inset='true'>",
|
|
|
|
// The array of items for this category.
|
|
cItems = category.items,
|
|
|
|
// The number of items in the category.
|
|
numItems = cItems.length;
|
|
|
|
// Generate a list item for each item in the category
|
|
// and add it to our markup.
|
|
for ( var i = 0; i < numItems; i++ ) {
|
|
markup += "<li>" + cItems[i].name + "</li>";
|
|
}
|
|
markup += "</ul>";
|
|
|
|
// Find the h1 element in our header and inject the name of
|
|
// the category into it.
|
|
$header.find( "h1" ).html( category.name );
|
|
|
|
// Inject the category items markup into the content element.
|
|
$content.html( markup );
|
|
|
|
// Pages are lazily enhanced. We call page() on the page
|
|
// element to make sure it is always enhanced before we
|
|
// attempt to enhance the listview markup we just injected.
|
|
// Subsequent calls to page() are ignored since a page/widget
|
|
// can only be enhanced once.
|
|
$page.page();
|
|
|
|
// Enhance the listview we just injected.
|
|
$content.find( ":jqmData(role=listview)" ).listview();
|
|
|
|
// We don't want the data-url of the page we just modified
|
|
// to be the url that shows up in the browser's location field,
|
|
// so set the dataUrl option to the URL for the category
|
|
// we just loaded.
|
|
options.dataUrl = url;
|
|
|
|
// Now call changePage() and tell it to switch to
|
|
// the page we just modified.
|
|
$.mobile.changePage( $page, options );
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
// Listen for any attempts to call changePage().
|
|
$(document).bind( "pagebeforechange", function( e, data ) {
|
|
// We only want to handle changePage() calls where the caller is
|
|
// asking us to load a page by URL.
|
|
if ( typeof data.toPage === "string" ) {
|
|
// We are being asked to load a page by URL, but we only
|
|
// want to handle URLs that request the data for a specific
|
|
// category.
|
|
var u = $.mobile.path.parseUrl( data.toPage );
|
|
if ( u.pathname.search("category.php") !== -1 ) {
|
|
// We're being asked to display the items for a specific category.
|
|
// Call our internal method that builds the content for the category
|
|
// on the fly based on our in-memory category data structure.
|
|
showCategory( u.href, data.options );
|
|
|
|
// Make sure to tell changePage() we've handled this call so it doesn't
|
|
// have to do anything.
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
});
|
|
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div data-role="page">
|
|
<div data-role="header"><h1>Categories</h1></div>
|
|
<div data-role="content">
|
|
<h2>Select a Category Below:</h2>
|
|
<ul data-role="listview" data-inset="true">
|
|
<li><a href="category.php?id=animals">Animals</a></li>
|
|
<li><a href="category.php?id=colors">Colors</a></li>
|
|
<li><a href="category.php?id=vehicles">Vehicles</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div id="category-items" data-role="page" data-add-back-btn="true">
|
|
<div data-role="header"><h1></h1></div>
|
|
<div data-role="content"></div>
|
|
</div>
|
|
</body>
|
|
</html>
|