useFastClick in JQuery Mobile
Posted
by Yousef_Jadallah
on ASP.net Weblogs
See other posts from ASP.net Weblogs
or by Yousef_Jadallah
Published on Thu, 23 Jun 2011 11:30:00 GMT
Indexed on
2011/06/23
16:23 UTC
Read the original article
Hit count: 308
For who want to convert the application from JQM Alpha to JQM Beta 1, needs to bind click events to the new vclick one. Click event is working in general browsers butt that is needed for iOS and Android, useFastClick is (touch + mouse click). Moreover if you have this event alot in your project you can turn useFastClick off in mobileinit event:
$(document).bind("mobileinit", function () { $.mobile.useFastClick = false; });
vclick event is needed to support touch events to make the page changes to happen faster, and to perform the URL hiding.
So you need to change something like this $('btnShow').live("click", function (evt) {
To :
$('btnShow').live("vclick", function (evt) {
For more information : http://jquerymobile.com/test/docs/api/globalconfig.html
Here you can find full example in this case :
<!DOCTYPE >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
<script type="text/javascript">
//Here you need to use vclick instead of click event
$('ul[id="MylistView"] a').live("vclick", function (evt) {
alert('list click');
}); </script>
<title></title>
</head>
<body>
<div id="FirstPage" data-role="page" data-theme="b">
<div data-role="header">
<h1>
Page Title</h1>
</div>
<div data-role="content">
<ul id="MylistView" data-role="listview" data-theme="g">
<li><a href="#SecondPage">Acura</a></li>
<li><a href="#SecondPage">Audi</a></li>
<li><a href="#SecondPage">BMW</a></li>
</ul>
</div>
<div data-role="footer">
<h4>
Page Footer</h4>
</div>
</div>
<div id="SecondPage" data-role="page" data-theme="b" >
<div data-role="header" >
<h1>
Page Title</h1>
</div>
Second Page<div data-role="footer">
<h4>
Page Footer</h4>
</div>
</div>
</body>
</html>
Hope that helps.
© ASP.net Weblogs or respective owner
