将 JQM 滑动事件添加到列表视图链接 [英] Adding JQM swipe event to listview link
问题描述
我正在尝试查找有关如何编写 jquery 移动滑动事件的示例.虽然我了解使用滑动和点击等的原理,但我正在努力让它工作.如果有人可以向我展示一个使用带有 href 或 listview href 的刷卡的小例子,我将不胜感激.谢谢
<ul data-role="listview" data-inset="true" data-theme="c"><li id="listitem"><a href="#" data-transition="flip">Requests</a><p>Box 请求包括,Retrieval、Return、New Intake</p><li><a href="./speakers.php" data-transition="pop">控制面板</a><p>添加部门、更改密码等</p></li><li><a href="./information.html">信息</a><p>系统消息、公告显示在这里</p></li></p><脚本>页面创建(){$("#listitem").swiperight() {$.mobile.changePage("requests.php");}}
Live Example:
JS:
$("#listitem").swiperight(function() {$.mobile.changePage("#page1");});
HTML:
<div data-role="内容"><p><ul data-role="listview" data-inset="true" data-theme="c"><li id="listitem">向右滑动查看第 1 页</li></p>
<div data-role="page" id="page1"><div data-role="内容"><ul data-role="listview" data-inset="true" data-theme="c"><li data-role="list-divider">导航</li><li><a href="#home">返回首页</a></li><p>是的!<br/>您向右滑动查看第 1 页</p>
相关:
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>
Live Example:
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>
Related:
这篇关于将 JQM 滑动事件添加到列表视图链接的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!