用JQUERY轻扫切换页面 [英] Swipe to switch page with JQUERY
本文介绍了用JQUERY轻扫切换页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在stackoverflow上搜索，找到在我的应用程序之间滑动的代码，我找到了下面的jquery代码。从答案中我看到，它工作正常，但是当我把它放在我的网页上时，它无法工作。
I was searching on stackoverflow to find code to swipe between my app and I found the below jquery code. From the answers I read that it works fine, but when I put it on my page, it fails to work.
Javascript：
Javascript:
$('div.ui-page').live("swipeleft", function () {
var nextpage = $(this).next('div[data-role="page"]');
if (nextpage.length > 0) {
$.mobile.changePage(nextpage, "slide", false, true);
}
});
$('div.ui-page').live("swiperight", function () {
var prevpage = $(this).prev('div[data-role="page"]');
if (prevpage.length > 0) {
$.mobile.changePage(prevpage, {
transition: "slide",
reverse: true
}, true, true);
}
});
HTML：
HTML:
<div data-role="page" id="news">
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme="b">
<h1>Current Affairs</h1>
<a href='source.html' class='ui-btn-left' data-icon="home">Home</a>
<a href='#' class='ui-btn-right' data-icon='arrow-l' onclick="history.back(); return false">Back</a>
</div>
<div id="news_feed" data-role="content" data-theme="e">Loading Headlines, Please Wait</div>
<div id="tv_links" data-position="fixed" data-tap-toggle="false" data-role="footer" data-theme="b">
<div data-role="navbar">
<ul>
<li><a href="#business" data-role="button" data-inline="true" data-icon="info">Business News </a>
<li><a href="#sportsnews" data-role="button" data-inline="true" data-icon="info">Sports News </a>
<li>
<a href="#weather_update" data-role="button" data-inline="true" data-icon="info">Weather </a>
<li>
<a href="#interactive" data-role="button" data-inline="true" data-icon="info">Get Live </a>
</ul>
</div>
</div>
</div>
<p>
<div data-role="page" id="business">
<div data-role="header" data-theme="b">
<h1>Business News</h1>
<a href='source.html' class='ui-btn-left' data-icon="home">Home</a>
<a href='#' class='ui-btn-right' data-icon='arrow-l' onclick="history.back(); return false">Back</a>
</div>
<div id="biz" data-role="content" data-theme="e">Loading Headlines, Please Wait</div>
<div id="tv_links" data-position="fixed" data-role="footer" data-theme="b">
<div data-role="navbar">
<ul>
<li><a href="#business" data-role="button" data-inline="true" data-icon="info">Business News </a>
<li><a href="#sportsnews" data-role="button" data-inline="true" data-icon="info">Sports News </a>
<li>
<a href="#weather_update" data-role="button" data-inline="true" data-icon="info">Weather </a>
<li>
<a href="#interactive" data-role="button" data-inline="true" data-icon="info">Get Live </a>
</ul>
</div>
</div>
</div>
</p>
<p>
<div data-role="page" id="politics">
<div data-role="header" data-theme="b">
<h1>Politics</h1>
<a href='source.html' class='ui-btn-left' data-icon="home">Home</a>
<a href='#' class='ui-btn-right' data-icon='arrow-l' onclick="history.back(); return false">Back</a>
</div>
<div id="polit" data-role="content" data-theme="e">Loading Headlines, Please Wait</div>
<div id="tv_links" data-position="fixed" data-role="footer" data-theme="b">
<div data-role="navbar">
<ul>
<li><a href="#business" data-role="button" data-inline="true" data-icon="info">Business News </a>
<li><a href="#sportsnews" data-role="button" data-inline="true" data-icon="info">Sports News </a>
<li>
<a href="#weather_update" data-role="button" data-inline="true" data-icon="info">Weather </a>
<li>
<a href="#interactive" data-role="button" data-inline="true" data-icon="info">Get Live </a>
</ul>
</div>
</div>
</div>
</p>
<p>
<div data-role="page" id="sportsnews">
<div data-role="header" data-theme="b">
<h1>Sports News</h1>
<a href='source.html' class='ui-btn-left' data-icon="home">Home</a>
<a href='#' class='ui-btn-right' data-icon='arrow-l' onclick="history.back(); return false">Back</a>
</div>
<div id="sports" data-role="content" data-theme="e">Loading Headlines, Please Wait</div>
<div id="tv_links" data-position="fixed" data-role="footer" data-theme="b">
<div data-role="navbar">
<ul>
<li><a href="#business" data-role="button" data-inline="true" data-icon="info">Business News </a>
<li><a href="#sportsnews" data-role="button" data-inline="true" data-icon="info">Sports News </a>
<li>
<a href="#weather_update" data-role="button" data-inline="true" data-icon="info">Weather </a>
<li>
<a href="#interactive" data-role="button" data-inline="true" data-icon="info">Get Live </a>
</ul>
</div>
</div>
</div>
</p>
<p>
<div data-role="page" id="business_news">
<div data-role="header" data-theme="b">
<h1>Business News</h1>
<a href='source.html' class='ui-btn-left' data-icon="home">Home</a>
<a href='#' class='ui-btn-right' data-icon='arrow-l' onclick="history.back(); return false">Back</a>
</div>
<div data-role="content" data-theme="e">Loading Headlines, Please Wait</div>
<div id="tv_links" data-position="fixed" data-role="footer" data-theme="b">
<div data-role="navbar">
<ul>
<li><a href="#" data-role="button" data-inline="true" data-icon="info">Business News </a>
<li><a href="#sportsnews" data-role="button" data-inline="true" data-icon="info">Sports News </a>
<li>
<a href="#weather_update" data-role="button" data-inline="true" data-icon="info">Weather </a>
<li>
<a href="#interactive" data-role="button" data-inline="true" data-icon="info">Get Live </a>
</ul>
</div>
</div>
</div>
</p>
<p>
<div id="interactive" data-role="page" data-theme="d" data-position="fixed">
<div data-role="header" data-theme="b">
<h1>Get Interactive</h1>
<a href='source.html' class='ui-btn-left' data-icon="home">Home</a>
<a href='#' class='ui-btn-right' data-icon='arrow-l' onclick="history.back(); return false">Back</a>
</div>
<div data-role="content" data-theme="e">
<div data-role="collapsible-set">
<div id="morning_show" data-role="collapsible" data-theme="d">
<h3>Morning Show</h3>
<script language="javascript">
$.post('quest_rev.asp', $('#form1').serialize(), function () {
// Do something
});
</script>
<h3> </h3>
</div>
<div data-collapsed="true" data-role="collapsible" data-theme="d">
<h3>E- News</h3>
<p> </p>
</div>
<div data-collapsed="true" data-role="collapsible" data-theme="d">
<h3>Political Programme</h3>
<p> </p>
</div>
</div>
</div>
<div id="tv_links" data-position="fixed" data-role="footer" data-theme="b">
<div data-role="navbar">
<ul>
<li><a href="#business" data-role="button" data-inline="true" data-icon="info">Business News </a>
<li><a href="#sportsnews" data-role="button" data-inline="true" data-icon="info">Sports News </a>
<li>
<a href="#weather_update" data-role="button" data-inline="true" data-icon="info">Weather </a>
<li>
<a href="#interactive" data-role="button" data-inline="true" data-icon="info">Get Live </a>
</ul>
</div>
</div>
</div>
</p>
<div data-role="page" id="weather_update">
<div data-role="header" data-theme="b">
<h1>Weather Update</h1>
<a href='source.html' class='ui-btn-left' data-icon="home">Home</a>
<a href='#' class='ui-btn-right' data-icon='arrow-l' onclick="history.back(); return false">Back</a>
</div>
<div id="weather" data-role="content" data-theme="e">Getting Updates, Please Wait</div>
<div id="tv_links" data-position="fixed" data-role="footer" data-theme="b">
<div data-role="navbar">
<ul>
<li><a href="#" data-role="button" data-inline="true" data-icon="info">Business News </a>
<li><a href="#sportsnews" data-role="button" data-inline="true" data-icon="info">Sports News </a>
<li>
<a href="#weather_update" data-role="button" data-inline="true" data-icon="info">Weather </a>
<li>
<a href="#interactive" data-role="button" data-inline="true" data-icon="info">Get Live </a>
</ul>
</div>
</div>
</div>
推荐答案
上面的代码存在一些错误，这就是为什么它不起作用。
You have some mistakes in your code above, that's why its not working.
- 您忘记关闭导航栏链接中的
li标签。 - 您已在页面之间添加了
< p>标签。
- You forgot to close
litags in your navbar links. - You have added
<p>tags between pages.
使用下面的代码来使用滑动事件进行导航。
Use the below code to navigate using swipe events.
$(document).on('swipeleft swiperight', function (event) {
// next page
if (event.type == 'swipeleft') {
var nextPage = $.mobile.activePage.next('[data-role=page]');
if (nextPage) {
$.mobile.changePage(nextPage, {
transition: "flip" // or any transition
});
}
}
// previous page
if (event.type == 'swiperight') {
var prevPage = $.mobile.activePage.prev('[data-role=page]');
if (prevPage) {
$.mobile.changePage(prevPage, {
transition: "flip",
reverse: true // reverse effect
});
}
}
});
Demo
这篇关于用JQUERY轻扫切换页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
