useFastClick in JQuery Mobile
- by Yousef_Jadallah
Normal
0
false
false
false
EN-US
X-NONE
AR-SA
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:"Table Normal";
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-qformat:yes;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin-top:0cm;
mso-para-margin-right:0cm;
mso-para-margin-bottom:10.0pt;
mso-para-margin-left:0cm;
line-height:115%;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-bidi-font-family:Arial;
mso-bidi-theme-font:minor-bidi;}
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.
