mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-16 22:10:25 +00:00
Merge remote branch 'upstream/master'
This commit is contained in:
gseguin
commit
7dc20cd000
2 changed files with 218 additions and 142 deletions
150
docs/pages/dynamic-samples/category.php
Normal file
150
docs/pages/dynamic-samples/category.php
Normal file
|
|
@ -0,0 +1,150 @@
|
|||
<?php
|
||||
// This is a demo script that takes a single 'id' query param argument and
|
||||
// returns its associated data as HTML, or, if called via XmlHttpRequest,
|
||||
// returns its data as JSON.
|
||||
|
||||
// In the real-world, this category data would be looked
|
||||
// up on the fly from some database. For this sample, we
|
||||
// are just using some static in-memory data.
|
||||
|
||||
$category_data = array(
|
||||
animals => array(
|
||||
name => "Animals",
|
||||
description => "All your favorites from aardvarks to zebras.",
|
||||
items => array(
|
||||
array(
|
||||
name => "Pets",
|
||||
),
|
||||
array(
|
||||
name => "Farm Animals",
|
||||
),
|
||||
array(
|
||||
name => "Wild Animals",
|
||||
)
|
||||
)
|
||||
),
|
||||
colors => array(
|
||||
name => "Colors",
|
||||
description => "Fresh colors from the magic rainbow.",
|
||||
items => array(
|
||||
array(
|
||||
name => "Blue",
|
||||
),
|
||||
array(
|
||||
name => "Green",
|
||||
),
|
||||
array(
|
||||
name => "Orange",
|
||||
),
|
||||
array(
|
||||
name => "Purple",
|
||||
),
|
||||
array(
|
||||
name => "Red",
|
||||
),
|
||||
array(
|
||||
name => "Yellow",
|
||||
),
|
||||
array(
|
||||
name => "Violet",
|
||||
)
|
||||
)
|
||||
),
|
||||
vehicles => array(
|
||||
name => "Vehicles",
|
||||
description => "Everything from cars to planes.",
|
||||
items => array(
|
||||
array(
|
||||
name => "Cars",
|
||||
),
|
||||
array(
|
||||
name => "Planes",
|
||||
),
|
||||
array(
|
||||
name => "Construction",
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
|
||||
// Get the name of the category to display from
|
||||
// the query params for the script.
|
||||
|
||||
$category_name = '';
|
||||
if ( $_GET[ 'id' ] ) {
|
||||
$category_name = $_GET[ 'id' ];
|
||||
}
|
||||
|
||||
// Now get the category data, by name, from our in-memory
|
||||
// dictionary. This is the part where a script normally fetches
|
||||
// the data from a database.
|
||||
|
||||
$category_obj = $category_data[ $category_name ];
|
||||
|
||||
// Now figure out how the script is being called. If it's being
|
||||
// called via XmlHttpRequest, then send the data back as JSON.
|
||||
// If not, then send it back as a list in an HTML document.
|
||||
|
||||
if( $_SERVER[ "HTTP_X_REQUESTED_WITH" ] && $_SERVER[ "HTTP_X_REQUESTED_WITH" ] ==="XMLHttpRequest" ) {
|
||||
// Data should be written out as JSON.
|
||||
header("Content-type: application/json");
|
||||
if ( !$category_obj ) {
|
||||
echo 'null';
|
||||
} else {
|
||||
echo '{"name":"' . $category_obj[ 'name' ]
|
||||
. '","description":"' . $category_obj[ 'description' ]
|
||||
. '","items":[';
|
||||
|
||||
$arr = $category_obj[ 'items' ];
|
||||
$count = count($arr);
|
||||
for ( $i = 0; $i < $count; $i++ ) {
|
||||
if ( $i ) {
|
||||
echo ",";
|
||||
}
|
||||
echo '{"name":"' . $arr[ $i ][ 'name' ] . '"}';
|
||||
}
|
||||
echo "]}";
|
||||
}
|
||||
} else {
|
||||
// Data should be written out as HTML.
|
||||
header("Content-type: text/html");
|
||||
?>
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<title>Vehicles</title>
|
||||
<link rel="stylesheet" href="../../../themes/default/">
|
||||
<script src="../../../js/jquery.js"></script>
|
||||
<script src="../../../js/"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div data-role="page" data-add-back-btn="true">
|
||||
<div data-role="header"><h1><?php if ( $category_obj ) { echo $category_obj['name']; } else { echo "No Match"; } ?></h1></div>
|
||||
<div data-role="content">
|
||||
<?php
|
||||
if ( !$category_obj ) {
|
||||
?>
|
||||
<p>No matches found.</p>
|
||||
<?php
|
||||
} else {
|
||||
?>
|
||||
<p><?php echo $catgory_object['description']; ?></p>
|
||||
<ul data-role="listview" data-inset="true">
|
||||
<?php
|
||||
$arr = $category_obj[ 'items' ];
|
||||
$count = count($arr);
|
||||
for ( $i = 0; $i < $count; $i++ ) {
|
||||
echo "\t\t\t<li>" . $arr[ $i ][ 'name' ] . "</li>\n";
|
||||
}
|
||||
?>
|
||||
</ul>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<?php }
|
||||
|
|
@ -7,144 +7,70 @@
|
|||
<link rel="stylesheet" href="../../../themes/default/">
|
||||
<script src="../../../js/jquery.js"></script>
|
||||
<script src="../../../js/"></script>
|
||||
<script>
|
||||
<script type="text/javascript">
|
||||
|
||||
// Some sample categorized data. This data is in-memory
|
||||
// for demonstration purposes, but could be loaded dynamically
|
||||
// via ajax.
|
||||
var categoryData = {
|
||||
animals: {
|
||||
name: "Animals",
|
||||
description: "All your favorites from aardvarks to zebras.",
|
||||
items: [
|
||||
{
|
||||
name: "Pets",
|
||||
},
|
||||
{
|
||||
name: "Farm Animals",
|
||||
},
|
||||
{
|
||||
name: "Wild Animals",
|
||||
}
|
||||
]
|
||||
},
|
||||
colors: {
|
||||
name: "Colors",
|
||||
description: "Fresh colors from the magic rainbow.",
|
||||
items: [
|
||||
{
|
||||
name: "Blue",
|
||||
},
|
||||
{
|
||||
name: "Green",
|
||||
},
|
||||
{
|
||||
name: "Orange",
|
||||
},
|
||||
{
|
||||
name: "Purple",
|
||||
},
|
||||
{
|
||||
name: "Red",
|
||||
},
|
||||
{
|
||||
name: "Yellow",
|
||||
},
|
||||
{
|
||||
name: "Violet",
|
||||
}
|
||||
]
|
||||
},
|
||||
vehicles: {
|
||||
name: "Vehicles",
|
||||
description: "Everything from cars to planes.",
|
||||
items: [
|
||||
{
|
||||
name: "Cars",
|
||||
},
|
||||
{
|
||||
name: "Planes",
|
||||
},
|
||||
{
|
||||
name: "Construction",
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
// Load the data for a specific category, based on
|
||||
// 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 )
|
||||
{
|
||||
var categoryName = url.replace(/^.*\/|\.html$/g, ""),
|
||||
|
||||
// Get the object that represents the category we
|
||||
// are interested in. Note, that at this point we could
|
||||
// instead fire off an ajax request to fetch the data, but
|
||||
// for the purposes of this sample, it's already in memory.
|
||||
category = categoryData[ categoryName ],
|
||||
|
||||
// The pages we use to display our content are already in
|
||||
// the DOM. The id of the page we are going to write our
|
||||
// content into is category-items
|
||||
pageSelector = "#category-items";
|
||||
|
||||
if ( category ) {
|
||||
// Get the page we are going to dump our content into.
|
||||
var $page = $( pageSelector ),
|
||||
|
||||
// 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>";
|
||||
$.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 );
|
||||
}
|
||||
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 );
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -152,19 +78,19 @@ function showCategory( url, options )
|
|||
$(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.
|
||||
var u = data.toPage;
|
||||
if ( typeof u === "string" ) {
|
||||
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.
|
||||
|
||||
if ( $.mobile.path.isExternal( u ) && u.match( /\/([^\/\.]+\.html)/ ) ) {
|
||||
|
||||
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, data.options );
|
||||
|
||||
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();
|
||||
}
|
||||
}
|
||||
|
|
@ -179,13 +105,13 @@ $(document).bind( "pagebeforechange", function( e, data ) {
|
|||
<div data-role="content">
|
||||
<h2>Select a Category Below:</h2>
|
||||
<ul data-role="listview" data-inset="true">
|
||||
<li><a href="animals.html">Animals</a></li>
|
||||
<li><a href="colors.html">Colors</a></li>
|
||||
<li><a href="vehicles.html">Vehicles</a></li>
|
||||
<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">
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue