Question

**我以为我会发布更新。

显然JQM无法以我尝试的方式处理页面。所以我想要的页面结构是：

“的index.html” | | - 子页面1 | - 子页面2 | - 子页面3等

“page2.html” | | - 子页面1 | - 子页面2 | - 子页面3等

并使用swipeleft或right在页面之间导航！单个页面很好，但是一旦我从“index.html”转到“page2.html”，mobile.changepage就无法处理，因此“bug”就会陷入其中。

**

我正在尝试开发一个利用滑动功能的jquery移动（phonegap）应用程序，我在这里遗漏了一些东西，我确信这将是一个facepalm时刻，但我无法理解这一点。

据我所知，jqm的工作方式（最好用ajax调用页面时）我需要将我网站的所有代码加载到index.html文件中！我做了。然后我需要调用$（document）.on（'pageinit'，'＃swipehome'，function（）例如在文件加载，init等执行代码。但我似乎无法理解为什么我不能拾取第二页上的事件。我有两个页面（测试此过程会有2个页面）index.html＆amp; swipe.html

index.html拥有* .js＆amp;的所有链接。 *的CSS。它从功能幻灯片中调用swipe.html

现在问题的症结所在，为什么swipe.html上的滑动事件没有被接收？

正如我所理解的那样，如果你把js放在index.html页面链接的ajax页面加载，你可以在第二页中使用它吗？

我创建了一个简单的jsf来显示我需要的东西！

http://jsfiddle.net/bFM7B/

基本上我希望swipe.html页面中的功能已经从index.html

链接

任何帮助表示赞赏！

乔治

这是所有代码！

**更新到main.JS **我现在正在第二页中捕获滑动事件，下面是更新的代码，但是页面没有变化！ “main.js”

/* === UPDATED CODE === */
$(document).on('swipe', '#swipehome', function() {
    console.log('Changing to #swipepage1');
    $.mobile.changePage('#swipepage1','slide',false,true);
    console.log('End');
});


    //Initialise the slider on the swipe page
$(document).on('pageinit', '#swipehome', function() {   
    $("#home").swiperight(function() {
        $.mobile.changePage("#page1",{ transition: "slide" , reverse: true});
    });

    $("#home").swipeleft(function() {
        $.mobile.changePage("#page2",{ transition: "slide"});
    });

    $("#page1,#page2").swipe(function() {
        $.mobile.changePage("#swipehome", { transition: "fade"});
    });
});

//Initialise the slider on the test page
$(document).on('pageinit', '#testg', function() {   
    $('#foobar').bxSlider({
        touchEnabled: true,
        pager: false,
        pagerSelector: false
    });
});

$(document).bind( "mobileinit", function() {
    $.support.cors = true;
    $.mobile.allowCrossDomainPages = true;
});

function slidePage(page) {
    $.mobile.changePage(page,{'transition': "slide"});
    console.log(page);
}

“的index.html”

<!DOCTYPE html>
<html>
<head>
    <title>swipe test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

    <!-- STYLESHEETS //-->
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.2.0.min.css" />
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.3.0-rc.1.min.css" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />

    <!-- JavaScripts //-->
    <script src="js/cordova-2.5.0.js"></script>
    <script src="js/jquery-1.9.1.js"></script>
    <script src="js/jquery.bxslider.js"></script>
    <script src="js/jquery-ui-1.9.2.custom.min.js"></script>
    <script src="js/jquery.mobile-1.3.0.js"></script>
    <script src="js/database.js"></script>
    <script src="js/audio.js"></script>
    <script src="js/main.js"></script>
</head>

<body>
    <div data-role="page" id="start">   
        <div data-role="content">
            <div style="margin: 0 auto;">
                <a href="#" onClick="slidePage('swipe.html');" class="next" data-role="button" data-theme="a" style="width: 150px; margin: 0 auto;">Swipe</a>
            </div>
        </div>
    </div>
</body>
</html>

“swipe.html”

<!DOCTYPE html> 
<html> 
<body>
   <div data-role="page" id="swipehome">
   <div data-role="content">
    <p>Swipe left or right to change pages</p>
  </div>
</div>

<div data-role="page" id="page1">
<div data-role="content">
    <p>You Swiped right<br/>Swipe any direction to go back</p>
</div>
</div>

<div data-role="page" id="page2">
<div data-role="content">
    <p>You Swiped left<br/>Swipe any direction to go back</p>
</div>
</div>
</body>
</html>

希望这有帮助！

Answer 1

您不需要在一个单独的js文件中提取所有javascript。

您的问题很可能来自这样一个事实，即您注册滑动回调时，只会注册index.html中的元素而不是swipe.html中的元素。在加载swipe.html中的元素后，您需要重新注册滑动回调。

jQuery mobile / phonegap无法在第二个html页面上捕获滑动

1 个答案: