libs/js/jquery-mobile-1.0.1pre/docs/pages/dynamic-samples/sample-reuse-page.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4 <meta charset="utf-8">
   5 <meta name="viewport" content="width=device-width">
   6 <title>changePage JSON Sample</title>
   7 <link rel="stylesheet"  href="../../../css/themes/default/">
   8 <script src="../../../js/jquery.js"></script>
   9 <script src="../../../js/"></script>
  10 <script>
  11
  12 // Some sample categorized data. This data is in-memory
  13 // for demonstration purposes, but could be loaded dynamically
  14 // via ajax.
  15 var categoryData = {
  16         animals: {
  17                 name: "Animals",
  18                 description: "All your favorites from aardvarks to zebras.",
  19                 items: [
  20                         {
  21                                 name: "Pets",
  22                         },
  23                         {
  24                                 name: "Farm Animals",
  25                         },
  26                         {
  27                                 name: "Wild Animals",
  28                         }
  29                 ]
  30         },
  31         colors: {
  32                 name: "Colors",
  33                 description: "Fresh colors from the magic rainbow.",
  34                 items: [
  35                         {
  36                                 name: "Blue",
  37                         },
  38                         {
  39                                 name: "Green",
  40                         },
  41                         {
  42                                 name: "Orange",
  43                         },
  44                         {
  45                                 name: "Purple",
  46                         },
  47                         {
  48                                 name: "Red",
  49                         },
  50                         {
  51                                 name: "Yellow",
  52                         },
  53                         {
  54                                 name: "Violet",
  55                         }
  56                 ]
  57         },
  58         vehicles: {
  59                 name: "Vehicles",
  60                 description: "Everything from cars to planes.",
  61                 items: [
  62                         {
  63                                 name: "Cars",
  64                         },
  65                         {
  66                                 name: "Planes",
  67                         },
  68                         {
  69                                 name: "Construction",
  70                         }
  71                 ]
  72         }
  73 };
  74
  75 // Load the data for a specific category, based on
  76 // the URL passed in. Generate markup for the items in the
  77 // category, inject it into an embedded page, and then make
  78 // that page the current active page.
  79 function showCategory( urlObj, options )
  80 {
  81         var categoryName = urlObj.hash.replace( /.*category=/, "" ),
  82
  83                 // Get the object that represents the category we
  84                 // are interested in. Note, that at this point we could
  85                 // instead fire off an ajax request to fetch the data, but
  86                 // for the purposes of this sample, it's already in memory.
  87                 category = categoryData[ categoryName ],
  88
  89                 // The pages we use to display our content are already in
  90                 // the DOM. The id of the page we are going to write our
  91                 // content into is specified in the hash before the '?'.
  92                 pageSelector = urlObj.hash.replace( /\?.*$/, "" );
  93
  94         if ( category ) {
  95                 // Get the page we are going to dump our content into.
  96                 var $page = $( pageSelector ),
  97
  98                         // Get the header for the page.
  99                         $header = $page.children( ":jqmData(role=header)" ),
 100
 101                         // Get the content area element for the page.
 102                         $content = $page.children( ":jqmData(role=content)" ),
 103
 104                         // The markup we are going to inject into the content
 105                         // area of the page.
 106                         markup = "<p>" + category.description + "</p><ul data-role='listview' data-inset='true'>",
 107
 108                         // The array of items for this category.
 109                         cItems = category.items,
 110
 111                         // The number of items in the category.
 112                         numItems = cItems.length;
 113
 114                 // Generate a list item for each item in the category
 115                 // and add it to our markup.
 116                 for ( var i = 0; i < numItems; i++ ) {
 117                         markup += "<li>" + cItems[i].name + "</li>";
 118                 }
 119                 markup += "</ul>";
 120
 121                 // Find the h1 element in our header and inject the name of
 122                 // the category into it.
 123                 $header.find( "h1" ).html( category.name );
 124
 125                 // Inject the category items markup into the content element.
 126                 $content.html( markup );
 127
 128                 // Pages are lazily enhanced. We call page() on the page
 129                 // element to make sure it is always enhanced before we
 130                 // attempt to enhance the listview markup we just injected.
 131                 // Subsequent calls to page() are ignored since a page/widget
 132                 // can only be enhanced once.
 133                 $page.page();
 134
 135                 // Enhance the listview we just injected.
 136                 $content.find( ":jqmData(role=listview)" ).listview();
 137
 138                 // We don't want the data-url of the page we just modified
 139                 // to be the url that shows up in the browser's location field,
 140                 // so set the dataUrl option to the URL for the category
 141                 // we just loaded.
 142                 options.dataUrl = urlObj.href;
 143
 144                 // Now call changePage() and tell it to switch to
 145                 // the page we just modified.
 146                 $.mobile.changePage( $page, options );
 147         }
 148 }
 149
 150
 151 // Listen for any attempts to call changePage().
 152 $(document).bind( "pagebeforechange", function( e, data ) {
 153         // We only want to handle changePage() calls where the caller is
 154         // asking us to load a page by URL.
 155         if ( typeof data.toPage === "string" ) {
 156                 // We are being asked to load a page by URL, but we only
 157                 // want to handle URLs that request the data for a specific
 158                 // category.
 159                 var u = $.mobile.path.parseUrl( data.toPage ),
 160                         re = /^#category-item/;
 161                 if ( u.hash.search(re) !== -1 ) {
 162                         // We're being asked to display the items for a specific category.
 163                         // Call our internal method that builds the content for the category
 164                         // on the fly based on our in-memory category data structure.
 165                         showCategory( u, data.options );
 166
 167                         // Make sure to tell changePage() we've handled this call so it doesn't
 168                         // have to do anything.
 169                         e.preventDefault();
 170                 }
 171         }
 172 });
 173
 174
 175 </script>
 176 </head>
 177
 178 <body>
 179 <div id="home" data-role="page">
 180   <div data-role="header"><h1>Categories</h1></div>
 181   <div data-role="content">
 182         <h2>Select a Category Below:</h2>
 183         <ul data-role="listview" data-inset="true">
 184         <li><a href="#category-items?category=animals">Animals</a></li>
 185         <li><a href="#category-items?category=colors">Colors</a></li>
 186         <li><a href="#category-items?category=vehicles">Vehicles</a></li>
 187     </ul>
 188   </div>
 189
 190 </div>
 191 <div id="category-items" data-role="page">
 192   <div data-role="header"><h1></h1></div>
 193   <div data-role="content"></div>
 194 </div>
 195 </body>
 196 </html>