jQuery Mobile swipe not working -
i working on create own image gallery project. need swipe event. found below code on jsfiddle. inserted necessary files. shows list , all.. still swipe not working.? writing jquery code in right place? or wrong? here`s code:
<html> <head> <meta charset="utf-8" /> <title>home</title> <!-- meta viewport tag adjust mobile screen resolutions--> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> <link rel="stylesheet" type="text/css" href="css/jstyle.css" /> <link rel="stylesheet" type="text/css" href="css/jquery.mobile.theme-1.2.0.css" /> <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" /> <script type="text/javascript" src="javascript/jquery1.js"></script> <script type="text/javascript" src="javascript/jquery2.js"></script> <script type="text/javascript" src="css/jq1.6.2.js"></script> <script type="text/javascript"> $("#listitem").swiperight(function() { $.mobile.changepage("#page1"); }); </script> </head> <body> <div data-role="page" id="home"> <div data-role="content"> <ul data-role="listview" data-inset="true"> <li id="listitem"> swipe right view page 1</a></li> </ul> </div> </div> <div data-role="page" id="page1"> <div data-role="content"> <ul data-role="listview" data-inset="true" data-theme="c"> <li id="listitem">navigation</li> </ul> <p> page 1 </p> </div> </div> </body>
try pageinit handler jquery mobile:
$(document).on('pageinit', function(event){ $("#listitem").swiperight(function() { $.mobile.changepage("#page1"); }); }); docs paginit @ jquery mobile.
from docs:
take @ configuring defaults
because jquery-mobile event triggered immediately, you'll need bind event handler before jquery mobile loaded. link javascript files in next order:
<script src="jquery.js"></script> <script src="custom-scripting.js"></script> <script src="jquery-mobile.js"></script>` jquery jquery-mobile
No comments:
Post a Comment