jquery mobile - simple page transition snaps -
while learning jquery mobile set basic page transition slide me page1 page2. regardless of library versions use, same error (via console - page hangs) within swipeleft/swiperight/click event try implement -
uncaught referenceerror: menubuttonrounded not defined
uncaught referenceerror: scaleimage not defined
any suggestions why happen ? sample code below -
<html> <head> <title>my page</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="page1"> <div data-role="header"> <h1>my title</h1> </div><!-- /header --> <div data-role="content"> <ul data-role="listview" data-inset="true" data-filter="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> </div><!-- /content --> </div><!-- /page --> <div data-role="page" id="page2"> <div data-role="header"> <h1>my title</h1> </div><!-- /header --> <div data-role="content"> <ul data-role="listview" data-inset="true" data-filter="true"> <li><a href="#">acura</a></li> </ul> </div><!-- /content --> </div><!-- /page --> <script> $("#page1").on("swiperight",function(event){ $.mobile.changepage( "page2"); // error occurs! }); </script> </body> </html>
it appears working on end, it's saying page2 (404 error) doesn't exist.
check out jquery docs on swipe navigate
Comments
Post a Comment