将JQM滑动事件添加到列表视图链接 [英] Adding JQM swipe event to listview link

问题描述

我正在尝试查找有关如何对jquery移动滑动事件进行编码的任何示例.尽管我了解使用滑动和点击等操作的原理，但我仍在努力使之工作.如果有人可以给我看一个使用href或listview href滑动的小例子，我将不胜感激.谢谢

I am trying to find any examples on how to code jquery mobile swipe event. Although I understand the principal of using swipe and tap etc, I am struggling to get one to work. If someone could show me a small example of using swipe with a href or listview href I would be grateful. Thanks

<p>
 <ul data-role="listview" data-inset="true" data-theme="c">
  <li id="listitem"><a href="#" data-transition="flip">Requests</a><p>Box requests include, Retrieval, Return, New Intake</p></li>
  <li><a href="./speakers.php" data-transition="pop">Control Panel</a><p>Add Departments, Change Password etc</p></li>
  <li><a href="./information.html">Information</a><p>System messages, announcements are shown here</p></li>
 </ul>
</p>

<script>

pageCreate() {
  $("#listitem").swiperight() {
     $.mobile.changePage("requests.php");
  }
}

</script>

推荐答案

实时示例:

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

相关:

• 添加jquery移动滑动事件

这篇关于将JQM滑动事件添加到列表视图链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！