jQuery Mobile Transition Test Case
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>jQuery Mobile Transition Test Case</title> | |
| </head> | |
| <body> | |
| <link rel="stylesheet" href="jquery.mobile-1.0b2.min.css" /> | |
| <script src="jquery-1.6.2.min.js"></script> | |
| <script src="jquery.mobile-1.0b2.min.js"></script> | |
| <script type="text/javascript"> | |
| function testCase(shouldChangePage) { | |
| $.ajax({ | |
| dataType:'jsonp', | |
| url: 'http://www.atelierdumobile.com/json/jsonp.php?url=http://iphone.eamobi.com/data/feed/1.0/websites', | |
| success: function (response) { | |
| // Do nothing… | |
| if (shouldChangePage) { | |
| $.mobile.changePage("#articles", { transition: "slide"}); | |
| } | |
| } | |
| }); | |
| } | |
| </script> | |
| </body> | |
| <div data-role="page" id="sites"> | |
| <div data-role="header" data-theme="e"> | |
| <h1><div class="list-nav-title">Home</div></h1> | |
| </div> | |
| <div data-role="content"> | |
| <ul id="sitesDisplay" data-role="listview"> | |
| <li><a href=#articles onClick="">Test case 0</a></li> | |
| <li><a href=#articles onClick="testCase(false);">Test case 1</a></li> | |
| <li><a onClick="testCase(true);">Test case 2</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div data-role="page" id="articles"> | |
| <div data-role="header" data-theme="e"> | |
| <h1><div class="list-nav-title">Other Mobile Page</div></h1> | |
| </div> | |
| <div data-role="content"> | |
| Hello world! | |
| </div> | |
| </div> | |
| </html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment