如何使用jquery mobile从一个html页面滑回另一个页面答案

【问题标题】：How to swipe back from one html page to another with jquery mobile如何使用jquery mobile从一个html页面滑回另一个页面
【发布时间】：2011-12-22 09:32:19
【问题描述】：

我正在开发一个 jquery 移动项目。我有两个 html 页面。从 index.html 我有一个向 page.html 的 swipeleft 事件，它工作正常。从 page.html 我想向右滑动，所以我回到 index.html 但这不起作用。

如果我在单个文档内的内部页面之间滑动，而不是在 html 页面之间滑动，则代码可以正常工作。而且我需要使用几个 html 页面。

有没有人解决这个问题？将不胜感激。

这是我在 index.html 页面中的滑动代码：

<script>
$(document).ready(function() {

$("#main").bind('swipeleft',function(event, ui){
        $.mobile.changePage("page.html", "slide");
})

})
</script>

这是我的 page.html 代码：

<script>
$(document).ready(function() {

$("#main").bind('swiperight',function(event, ui){
        $.mobile.changePage("index.html", "slide");
})

})
</script>

【问题讨论】：

标签： jquery jquery-mobile swipe

【解决方案1】：

您不应使用 $.ready()，而应使用 pageInit()。
此外，请确保您页面上的所有 id 在所有页面中都是唯一的，而不仅仅是页面唯一。

【讨论】：

【解决方案2】：

我在这里问过同样的问题.. jQuery Mobile - Swipe - Origin null not allowed by Access-Control-Allow-Origin

您必须在每个页面中添加 after 标记。
我使用了 location="index.html" 和 location="page.html"，而不是 $.mobile.changePage()。没有滑动动画，但会发生滑动。

【讨论】：

【解决方案3】：

我在所有页面上使用以下代码在所有页面上进行滑动导航，但它们不是滑动动画。

$("#main").bind('swipeleft',function(event, ui){
      goPage1();
})
$("#main").bind('swiperight',function(event, ui){
      goPage2();
})  

function goPage1(){
   var dirPath = dirname(location.href);
   var fullPath = dirPath + "/page1.html";
   window.location=fullPath;
}

function goPage2(){
    var dirPath = dirname(location.href);
    var fullPath = dirPath + "/page2.html";
    window.location=fullPath;
}
function dirname(path){
    return path.replace(/\\/g,'/').replace(/\/[^\/]*$/, '');
}

【讨论】：