Skip to content

Instantly share code, notes, and snippets.

@mrtony

mrtony/jsbin.hadoqe.html

Created July 3, 2014 00:50
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mrtony/af457fbbf29a5bc18b76 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mrtony/af457fbbf29a5bc18b76 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. mrtony created this gist Jul 3, 2014.
    120 changes: 120 additions & 0 deletions jsbin.hadoqe.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,120 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta name="description" content="Another change page example" />
    <meta charset="utf-8">
    <title>JS Bin</title>
    </head>
    <body>
    <!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>
    <div data-role="content">
    <ul data-role="listview" data-inset="true">
    <li><a href="#">Acura</a>

    </li>
    <li><a href="#">Audi</a>

    </li>
    <li><a href="#">BMW</a>

    </li>
    <li><a href="#">Cadillac</a>

    </li>
    <li><a href="#">Ferrari</a>

    </li>
    </ul> <a href="#pagey" data-role="button">Go to Page Y</a>

    </div>
    </div>
    <div data-role="page" id="pagey">
    <div data-role="header">
    <h1>Page Y</h1>

    </div>
    </div>
    <div data-role="page" id="pagez">
    <div data-role="header">
    <h1>Page Z</h1>

    </div>
    <div data-role="content">
    <p>Sorry, Page Y cant be viewed!</p>
    <ul data-role="listview" data-inset="true" id="foo">
    <li><a href="#">Acura</a>

    </li>
    <li><a href="#">Audi</a>

    </li>
    <li><a href="#">BMW</a>

    </li>
    <li><a href="#">Cadillac</a>

    </li>
    <li><a href="#">Ferrari</a>

    </li>
    </ul>
    </div>
    </div>
    </body>

    </html>
    </body>
    </html>