I have a listview and what I am trying to do is add a swipe event on the links. For example, if a user swipes the first link it goes to that page. Is this possible with listview elements. I have tried div,href,a,li,ul but still no alert. It works with body. Thanks
<div>
<ul data-role="listview" data-inset="true">
<li class="rqstpage"><a href="./requests.php">Requests</a></li>
<li><a href="./speakers.php" data-transition="pop">Control Panel</a></li>
<li><a href="./schedule.html">Schedule</a></li>
<li><a href="./information.html">Information</a></li>
</ul>
</div>
<script>
$("div ul li.rqstpage").bind('swipe',function(event, ui){
$.mobile.changePage("requests.php", "slide");
});
</script>
The swipe event is triggered when the user press down and swipes over an element horizontally by more than 30px (and less than 75px vertically). Tip: You can swipe in both right and left direction. Related events: swipeleft - triggered when the user swipes over an element in the left direction.
JQuery Mobile is a user interface framework, built on jQuery Core and used for developing responsive websites or applications that are accessible on mobile, tablet, and desktop devices. It uses features of both jQuery and jQueryUI to provide API features for mobile web applications.
A swipe is is when you touch and slide your finger across the screen. You can swipe quickly or slowly, depending on what you're doing on your phone or tablet. The screen of a smartphone or tablet is multi-touch, which means it can detect more than one touch at a time.
Live Example:
JS:
$("#listitem").swiperight(function() {
$.mobile.changePage("#page1");
});
HTML:
<div data-role="page" id="home">
<div data-role="content">
<p>
<ul data-role="listview" data-inset="true" data-theme="c">
<li id="listitem">Swipe Right to view Page 1</li>
</ul>
</p>
</div>
</div>
<div data-role="page" id="page1">
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c">
<li data-role="list-divider">Navigation</li>
<li><a href="#home">Back to the Home Page</a></li>
</ul>
<p>
Yeah!<br />You Swiped Right to view Page 1
</p>
</div>
</div>
Related:
Have you tried using binding using live()
?
UPDATE: .live()
will be deprecated and the correct usage is .on()
It attaches the handler to the event for all current matching elements as well as those that might match later on.
pageCreate() {
$(parent).on('swipe', 'li.rqstpage', function() {
$.mobile.changePage("requests.php", "slide");
}
}
Have you considred using this library for gestures?
does it work if you bind it directly on the control, like so:
pageCreate() {
$("li.rqstpage").swipe() {
$.mobile.changePage("requests.php", "slide");
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With