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>
13 // Some sample categorized data. This data is in-memory
14 // for demonstration purposes, but could be loaded dynamically
19 description: "All your favorites from aardvarks to zebras.",
34 description: "Fresh colors from the magic rainbow.",
61 description: "Everything from cars to planes.",
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 )
82 var categoryName = urlObj.hash.replace( /.*category=/, "" ),
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 ],
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( /\?.*$/, "" );
96 // Get the page we are going to dump our content into.
97 var $page = $( pageSelector ),
99 // Get the header for the page.
100 $header = $page.children( ":jqmData(role=header)" ),
102 // Get the content area element for the page.
103 $content = $page.children( ":jqmData(role=content)" ),
105 // The markup we are going to inject into the content
107 markup = "<p>" + category.description + "</p><ul data-role='listview' data-inset='true'>",
109 // The array of items for this category.
110 cItems = category.items,
112 // The number of items in the category.
113 numItems = cItems.length;
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>";
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 );
126 // Inject the category items markup into the content element.
127 $content.html( markup );
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.
136 // Enhance the listview we just injected.
137 $content.find( ":jqmData(role=listview)" ).listview();
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
143 options.dataUrl = urlObj.href;
145 // Now call changePage() and tell it to switch to
146 // the page we just modified.
147 $.mobile.changePage( $page, options );
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
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 );
168 // Make sure to tell changePage() we've handled this call so it doesn't
169 // have to do anything.
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>
192 <div id="category-items" data-role="page">
193 <div data-role="header"><h1></h1></div>
194 <div data-role="content"></div>