Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Adding jquery mobile swipe event

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>
like image 321
bollo Avatar asked Sep 03 '11 12:09

bollo


People also ask

How do you trigger a swipe event?

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.

How can I use jQuery mobile?

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.

What is swipe function?

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.


3 Answers

Live Example:

  • http://jsfiddle.net/yxzZf/4/

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:

  • Adding JQM swipe event to listview link
like image 135
Phill Pafford Avatar answered Nov 10 '22 23:11

Phill Pafford


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?

like image 21
Robin Maben Avatar answered Nov 10 '22 23:11

Robin Maben


does it work if you bind it directly on the control, like so:

pageCreate() {
  $("li.rqstpage").swipe() {
     $.mobile.changePage("requests.php", "slide");
  }
}
like image 1
Ruslan Avatar answered Nov 10 '22 23:11

Ruslan