添加jQuery的移動滑動事件

我有一個列表視圖，我想要做的是在鏈接上添加一個滑動事件。例如，如果用戶滑動第一個鏈接，它會轉到該頁面。這可能與列表視圖元素。我已經嘗試過div，href，a，li，ul但仍然沒有提示。它適用於身體。添加jQuery的移動滑動事件

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

來源

2011-09-03 bollo

+1我要去嘗試創建一個照片庫與滑動手勢 – Tsar

直播示例：

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>

相關：

Adding JQM swipe event to listview link

來源

2011-09-05 13:49:43

菲爾是不可能有一個，以便它保留它的格式和佈局。通過去除錨標籤，格式化文本變得不合時宜。謝謝 – bollo

@bollo你有沒有想過如何將這個發送到一個新的URL而不是DIV？ – SnowboardBruin

不，如果你直接綁定它的控制，像這樣工作？

UPDATE：.live()將被棄用，並在正確的用法是.on()

它連接的處理程序事件目前所有匹配元素以及那些可能匹配以後。

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

你considred使用這個庫gestures？

來源

2011-09-05 08:55:44 Tsar

您是否嘗試過使用結合使用live()：謝謝

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

來源

2011-09-05 09:05:14

如果您希望頁面的自然方向滑動，用戶刷卡，然後再去做這樣的：

// 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}); 
});

來源

2014-02-21 06:05:56 Brian

，如果你想轉換你需要指定你想過渡也如

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

來源

2014-06-09 18:57:55 user3723522

添加jQuery的移動滑動事件

回答

相關問題