libs/js/jquery-mobile-1.2.0/docs/pages/dynamic-samples/sample-reuse-page-external.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
  12 <script>
  13
  14 // Load the JSON data for a specific category, based on
  15 // the URL passed in. Generate markup for the items in the
  16 // category, inject it into an embedded page, and then make
  17 // that page the current active page.
  18 function showCategory( url, options )
  19 {
  20         $.getJSON( url, function( category ) {
  21                 if ( category ) {
  22                         // Get the page we are going to dump our content into.
  23                         var $page = $( "#category-items" ),
  24
  25                                 // Get the header for the page.
  26                                 $header = $page.children( ":jqmData(role=header)" ),
  27
  28                                 // Get the content area element for the page.
  29                                 $content = $page.children( ":jqmData(role=content)" ),
  30
  31                                 // The markup we are going to inject into the content
  32                                 // area of the page.
  33                                 markup = "<p>" + category.description + "</p><ul data-role='listview' data-inset='true'>",
  34
  35                                 // The array of items for this category.
  36                                 cItems = category.items,
  37
  38                                 // The number of items in the category.
  39                                 numItems = cItems.length;
  40
  41                         // Generate a list item for each item in the category
  42                         // and add it to our markup.
  43                         for ( var i = 0; i < numItems; i++ ) {
  44                                 markup += "<li>" + cItems[i].name + "</li>";
  45                         }
  46                         markup += "</ul>";
  47
  48                         // Find the h1 element in our header and inject the name of
  49                         // the category into it.
  50                         $header.find( "h1" ).html( category.name );
  51
  52                         // Inject the category items markup into the content element.
  53                         $content.html( markup );
  54
  55                         // Pages are lazily enhanced. We call page() on the page
  56                         // element to make sure it is always enhanced before we
  57                         // attempt to enhance the listview markup we just injected.
  58                         // Subsequent calls to page() are ignored since a page/widget
  59                         // can only be enhanced once.
  60                         $page.page();
  61
  62                         // Enhance the listview we just injected.
  63                         $content.find( ":jqmData(role=listview)" ).listview();
  64
  65                         // We don't want the data-url of the page we just modified
  66                         // to be the url that shows up in the browser's location field,
  67                         // so set the dataUrl option to the URL for the category
  68                         // we just loaded.
  69                         options.dataUrl = url;
  70
  71                         // Now call changePage() and tell it to switch to
  72                         // the page we just modified.
  73                         $.mobile.changePage( $page, options );
  74                 }
  75         });
  76 }
  77
  78
  79 // Listen for any attempts to call changePage().
  80 $(document).bind( "pagebeforechange", function( e, data ) {
  81         // We only want to handle changePage() calls where the caller is
  82         // asking us to load a page by URL.
  83         if ( typeof data.toPage === "string" ) {
  84                 // We are being asked to load a page by URL, but we only
  85                 // want to handle URLs that request the data for a specific
  86                 // category.
  87                 var u = $.mobile.path.parseUrl( data.toPage );
  88                 if ( u.pathname.search("category.php") !== -1 ) {
  89                         // We're being asked to display the items for a specific category.
  90                         // Call our internal method that builds the content for the category
  91                         // on the fly based on our in-memory category data structure.
  92                         showCategory( u.href, data.options );
  93
  94                         // Make sure to tell changePage() we've handled this call so it doesn't
  95                         // have to do anything.
  96                         e.preventDefault();
  97                 }
  98         }
  99 });
 100
 101 </script>
 102 </head>
 103
 104 <body>
 105 <div data-role="page">
 106   <div data-role="header"><h1>Categories</h1></div>
 107   <div data-role="content">
 108         <h2>Select a Category Below:</h2>
 109         <ul data-role="listview" data-inset="true">
 110         <li><a href="category.php?id=animals">Animals</a></li>
 111         <li><a href="category.php?id=colors">Colors</a></li>
 112         <li><a href="category.php?id=vehicles">Vehicles</a></li>
 113     </ul>
 114   </div>
 115 </div>
 116 <div id="category-items" data-role="page" data-add-back-btn="true">
 117   <div data-role="header"><h1></h1></div>
 118   <div data-role="content"></div>
 119 </div>
 120 </body>
 121 </html>