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