JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css">
<div data-role="page" id="home">
<div data-role="header">
<h1>Home Page</h1>
</div>
<div data-role="content">
<h3>Handling document.ready in jQuery Mobile sites</h3>
<p>
This is an example site for showing how to use a navigation framework with jQuery Mobile.
</p>
<a href="#about" data-role="button">About</a>
</div>
</div>
<div data-role="page" id="about">
<div data-role="header">
<h1>About Page</h1>
</div>
<div data-role="content">
<h3>About Page</h3>
<p>
This is the about page.
</p>
<a href="#home" data-role="button">Home</a>
</div>
</div>
JavaScript
// Example code from: https://gist.github.com/1246402
// This would normally be in the core.js file.
// Create our namespace object, use one that already exists if it's available, fall back to new object "{}".
var MYAPP = MYAPP || {};
(function($, ns) {
// .. This is a closure, so we don't muddy up our global namespace.
// .. $ = jQuery, ns = MYAPP (For those playing along at home)
// Extend our namespace with some stuff we're going to add later.
ns = $.extend(ns, {
options: {}, // MYAPP.options
pages: {} // MYAPP.pages
});
}(jQuery, MYAPP));
// This would normally be in the core.navigation.js file.
// Set up the page handler that will fire events in our page classes.
(function($, ns) {
// Set up a map to our pages namespace; MYAPP.pages
var pageNS = ns.pages,
pageKeyAttr = "data-pages-key";
// Map page events to our pages
// See http://jquerymobile.com/test/docs/api/events.html for more info about page events
$("div[data-role*='page']").live('pagebeforecreate pagecreate pageinit pagebeforeshow pageshow pagebeforehide pagehide', function (event, ui) {
// pass the page (this) and the event name ("pageinit" = "init" with slice(4))
handlePageEvent(this, event.type.slice(4));
});
// page event handler
function handlePageEvent(page, evtName) {
// Get the id of our page from the page attribute, fall back to id if not found.
var $this = $(page),
thisId = $this.attr(pageKeyAttr) || $this.attr("id");
if (!thisId) {
// Back out if no id defined...
return;
}
// Remove any sketchy characters...
thisId = thisId.replace(/\.html$/gi, "");
// Check for page in the namespace and fire off the shown function.
if (pageNS[thisId] && (typeof pageNS[thisId][evtName] === 'function')) {
log('firing event on page', evtName);
pageNS[thisId][evtName]($this, page);
}
};
}(jQuery, MYAPP));
// This...