2011-09-03 24 views
25

Mam listview i co staram się zrobić, to dodać zdarzenie przeciągnięcie na linki. Na przykład, jeśli użytkownik przeciągnie pierwszy link, przechodzi do tej strony. Czy to możliwe z elementami listview. Próbowałem div, href, a, li, ul, ale nadal nie jestem czujny. Działa z ciałem. DziękiDodawanie zdarzenia jquery mobile machnięcia

<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> 
+2

+1 Mam zamiar spróbować utworzyć galerię zdjęć z gestami przesunąć – Tsar

Odpowiedz

27

żywo Przykład:

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> 

pokrewne:

+0

@bollo czy kiedykolwiek wymyśliłeś, jak wysłać to do nowego adresu URL zamiast do DIV? – SnowboardBruin

1

to działa, jeśli wiąże się to bezpośrednio na kontroli, tak jak poniżej:

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

Czy próbowali za pomocą wiązania przy użyciu live()?

UPDATE: .live() będą przestarzałe i poprawne użycie jest .on()

przywiązuje do obsługi zdarzenia dla wszystkich obecnych elementy pasujące jak również te, które mogą dopasować później.

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

Czy considred użyciu tej biblioteki dla gestures?

0

Jeśli chcesz strona przesuwać w naturalnym kierunkiem że kiepskie piwo użytkownika, a następnie zrobić to tak:

// 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

jeśli chcesz przejście trzeba określić, że chcesz również przejść, takich jak

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