JQMobile Base 1.1

Override JQM hash handling

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css">
<script src="https://raw.github.com/mtrpcic/pathjs/master/path.js"></script>
<html>
<head><title>jQuery Mobile Test</title></head>
<body>
    <div id="home" data-role="page">
        <div data-role="header">
            <h1>jQuery Mobile</h1>
        </div>
        <div data-role="content">
            <ul data-role="listview">
                <li><a href="#/store/movies/star-wars">Star Wars</a></li>
                <li><a href="#/store/books/authors/tolkien">Tolkien</a></li>
            </ul>
        </div>
        <div data-role="footer">
            <h1>Footer</h1>
        </div>
    </div>
    <div id="movies-star-wars" data-role="page" data-add-back-btn="true">
        <div data-role="header">
            <h1>Star Wars</h1>
        </div>
        <div data-role="content">
            Content goes here
        </div>
        <div data-role="footer">
            <h1>Footer</h1>
        </div>
    </div>
    <div id="books-authors-tolkien" data-role="page" data-add-back-btn="true">
        <div data-role="header">
            <h1>Tolkien</h1>
        </div>
        <div data-role="content">
            Content goes here
        </div>
        <div data-role="footer">
            <h1>Footer</h1>
        </div>
    </div>
</body>
</html>

JavaScript

$(document).bind('mobileinit', function() {

    // disable autoInit so we can navigate to bookmarked hash url    
    $.mobile.autoInitializePage = false;

    // let PathJS handle navigation
    $.mobile.ajaxEnabled = false;
    $.mobile.hashListeningEnabled = false;
    $.mobile.pushStateEnabled = false;

    $(document).bind('pagebeforechange', function(e, data) {
        var to = data.toPage;
        if (typeof to === 'string') {
            var u = $.mobile.path.parseUrl(to);
            to = u.hash || '#' + u.pathname;
            // manually set hash so PathJS will be triggered
            location.hash = to;
            // prevent JQM from handling navigation
            e.preventDefault();
        }
    });

    Path.map('#/store/movies/star-wars').to(function() {
        // setup options: update dataUrl and prevent JQM from changing hash        
        var options = {
            dataUrl: location.toString(),
            changeHash: false
        };
        // navigate to page object
        $.mobile.changePage($('#movies-star-wars'), options);
    });

    Path.map('#/store/books/authors/tolkien').to(function() {
        var options = {
            dataUrl: location.toString(),
            changeHash: false
        };
        $.mobile.changePage($('#books-authors-tolkien'), options);
    });

    Path.map('').to(function() {
        var options = {
            dataUrl: '',
            changeHash: false
        };
        $.mobile.changePage($('#home'), options);
    });

    Path.root('');
});

$(function() {
    // initialize page
    $.mobile.initializePage();
    // startup PathJS
    Path.listen();
});

// have to manually write script tag since jsFiddle loads external 
// scripts before our code and we need to bind to mobilinit before
// jquery.mobile is loaded
document.write('<scr' + 'ipt type="text/javascript" src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></sc' + 'ript>');