web-dev-qa-db-fra.com

Ajout d'un événement de balayage jquery mobile

J'ai une listview et ce que j'essaie de faire est d'ajouter un événement de balayage sur les liens. Par exemple, si un utilisateur balaie le premier lien, il se dirige vers cette page. Est-ce possible avec des éléments listview? J'ai essayé div, href, a, li, ul mais toujours pas en alerte. Cela fonctionne avec le corps. Merci

<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>
jqueryjquery-mobile
27
bollo

Exemple en direct:

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>

En relation:

29
Phill Pafford

Avez-vous essayé d'utiliser la liaison en utilisant live()?

UPDATE: .live() sera obsolète et l'utilisation correcte est .on() 

Il attache le gestionnaire à l'événement pour tous les éléments correspondants actuels ainsi que pour ceux susceptibles de correspondre ultérieurement.

pageCreate() {
  $(parent).on('swipe', 'li.rqstpage', function() {
     $.mobile.changePage("requests.php", "slide");
  }
}

Avez-vous envisagé d'utiliser cette bibliothèque pour gestes ?

5
Robin Maben

ça marche si vous le liez directement sur le contrôle, comme ceci:

pageCreate() {
  $("li.rqstpage").swipe() {
     $.mobile.changePage("requests.php", "slide");
  }
}
1
Tsar

si vous voulez la transition, vous devez spécifier que vous voulez la transition aussi, comme

$.mobile.changePage('#page1', { transition: 'flip' });
0
user3723522

Si vous souhaitez que la page glisse dans la direction naturelle de l'utilisateur, procédez comme suit:

// For a left swipe: page slides from right to left
$('#listitem').on('swipeleft', function() {
    $.mobile.changePage('#page-to-left', { transition: slide});
});

// For a right swipe: page slides from left to right (add "reverse: true")
$('#listitem').on('swiperight', function() {
    $.mobile.changePage('#page-to-right', { transition: slide, reverse: true});
});
0
Brian