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