添加JQM刷卡事件到列表视图链接

问题描述:

我想找到任何关于如何编写jquery移动刷卡事件的示例。虽然我理解使用滑动和水龙头等的主要原因,但我正努力让一个人工作。如果有人能够向我展示一个使用href或listview href的轻扫示例,我将不胜感激。由于添加JQM刷卡事件到列表视图链接

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

活生生的例子是很容易:

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> 

相关:

+0

是否有可能链接到一个URL一个新的DIV?如果是这样,怎么样?谢谢! – SnowboardBruin

+0

@SnowboardBruin你有没有尝试过使用物理页面名称,例如'somepage.html'? –

应根据documentation

<li id="listitem"></li> 

pageCreate() { 
    $("#listitem").swiperight() { 
    $.mobile.changePage("url"); 
    } 
} 
+0

沙皇在您发布的文档的链接,没有为例 – ploppy

+0

沙皇不工作。没有滑动效果或移动。请参阅添加到我的问题的代码。这是正确的标记。谢谢 – ploppy

+0

检查此:http://www.coldfusionjedi.com/index.cfm/2011/3/14/Using-swipe-gestures-for-navigation-in-jQuery-Mobile – Tsar