添加jQuery Mobile滑动事件

Question

我有一个列表视图，我想要做的是在链接上添加滑动事件。例如，如果用户滑动第一个链接，它将转到该页面。这是否适用于列表视图元素？我已经尝试使用div、href、a、li和ul，但仍然没有警报。它可以在body中工作。谢谢。

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

- bollo

---

+1 我打算尝试使用滑动手势创建一个照片库。 - Ruslan

Answer 1

实时演示：

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

相关：

• 在列表视图链接中添加 JQM 滑动事件

- Phill Pafford

---

Phil，是否不可能有一个<a href="#">标签，以便它保留其格式和布局。如果删除锚标记，则格式和文本会变得混乱。谢谢。 - bollo

@bollo 你最终解决了如何将它发送到新的URL而不是DIV吗？ - SnowboardBruin

Answer 2

您尝试过使用live()进行绑定吗？

更新：.live()将被弃用，正确的用法是.on()

它将处理程序附加到所有当前匹配的元素以及可能稍后匹配的元素的事件上。

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

您考虑过使用这个库来处理手势吗？

- Robin Maben

Answer 3

如果您直接在控件上绑定它，会起作用吗？像这样：

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

- Ruslan

Answer 4

如果你想要过渡，你需要明确指定你也想要过渡，比如：

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

- user3723522

Answer 5

如果您想让页面按照用户滑动的自然方向滑动，请按照以下方式操作：

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

- Brian