Page events - jQuery Mobile

by Omar X

HTML

<!DOCTYPE html>
<html>
    
    <head>
        <title>JQM Events</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script>
            $(document).on("mobileinit", function() {
                /* all pages default theme "e" */
                $.mobile.page.prototype.options.theme = "e";
                /* all listviews default icon to "star" */
                $.mobile.listview.prototype.options.icon = "star";
                $.mobile.page.prototype.options.addBackBtn = true;
                $.mobile.page.prototype.options.backBtnText = "Lost?";
                $.mobile.page.prototype.options.backBtnTheme = "d";
            });
        </script>
        <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
        <script>
            /* change theme of page Z */
            $(document).on("pagebeforecreate", "#pagez", function() {
                $(this).page({
                    theme: "b"
                });
            });

            /* change listview icon of listview #foo */
            $(document).on("pagecreate", "#pagez", function() {
                $("#foo").listview({
                    icon: "bars"
                });
            });

            /* skip showing page Y */
            $(document).on("pagebeforechange", function(e, data) {
                var to_page = data.toPage[0].id;
                if (to_page == "pagey") {
                    $.mobile.changePage("#pagez", {
                        transition: "flip"
                    });
                    e.preventDefault();
                }
            });
        </script>
    </head>
    
    <body>
        <div data-role="page" id="pagex">
            <div data-role="header">
                 <h1>Page X</h1>

            </div>
 ...