Phonegap - Jquery / jquery mobile 仅适用于应用程序的第一页答案

【问题标题】：Phonegap - Jquery / jquery mobile only working on the first page of appPhonegap - Jquery / jquery mobile 仅适用于应用程序的第一页
【发布时间】：2015-09-07 14:26:45
【问题描述】：

我刚开始使用phonegap，我有两个页面index.html和pages.html， Index.html 页面包含owlslider，pages.html 具有移动swipeLeft and swiprRight 功能。

它在桌面浏览器中可以正常工作，但是当我在 Android 模拟器或移动设备上测试它时，只有第一页 jquery 可以工作。

即，如果我将滑块页面作为索引而不是滑块工作，但是当我导航到滑动功能页面而不是滑动功能时，如果我将滑动页面作为索引页面而不是滑动工作，但是如果我导航到滑块页面而不是它不起作用。

我根据 html 标准包含 js 文件

<script src="js/jquery.mobile.min.js"></script>

并在两个页面中都包含这个 js（即 index.html 和 page.html）

有没有什么特定的方法可以在 phonegap 项目中包含 js 文件？我错过了什么吗？

我也在用桌面版phonegap测试，结果还是一样。

编辑

我从this 的答案中找到了一些内容，上面写着Can't use more then one data-role="page" inside any subsequent HTML page, only initial one can have more then one page.，这就是为什么我的滑动功能在第二页中不起作用的原因。但是如何解决这个问题？如何使用data-role="page"在单个页面中滑动？因为我也想改页眉。

【问题讨论】：

标签： jquery cordova jquery-mobile

【解决方案1】：

这种行为可能是由于您在 index.html 和 pages.html 之间的导航代码造成的。请注意，jQuery mobile 使用页面容器在多个 HTML 页面之间导航。

JavaScript 应该只添加到 index.html 并且 pages.html 应该只包含不同的 HTML 布局。您的 index.html 应如下所示：

<html>
    <head>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jquery.mobile.min.js"></script>
    </head>
    <body>
         <div data-role="page" id="index">
             <div data-role="header">
                 <h1>Login</h1>
             </div>
             <div data-role="main">
                 <!-- Some html content here -->
                 <a href="pages.html">To the pages!</a> 
             </div>
         </div>
    </body>
</html>

您的 pages.html 应该具有相同的结构，只是不应将 JavaScript 添加到该 HTML 文件中。页面 HTML 文件应如下所示：

<html>
    <head>
        <title></title>
    </head>
    <body>
        <div data-role="page" id="pages">
             <!-- Some html content here -->
        </div>
    </body>
</html>

如果您没有在页面之间导航的锚点，您也可以使用 jQuery 移动 JavaScript。那个 JavaScript 非常简单，看起来像这样：

jQuery.mobile.pageContainer.pagecontainer("change", "menu.html");

希望这会有所帮助！

【讨论】：

让我试一试..会回复你..谢谢你的回答.. :)
我做了一些 RND，并了解到如果您使用多个 html 页面，则必须包含所有 js/css，如果您使用的是单个页面，则必须包含它们一次。检查这个出gajotres.net/… 和这个thehungrycoder.com/javascript-2/jquery/jquery-mobile/…

【解决方案2】：

这个问题我已经有一段时间了，但没有时间看。

今天早上在所有页面上，我移动了所有无法加载的内容，并将 JS/JQuery 放入 Body/data-role="page" div（在该页面上，而不是所有在 index.html 页面上）并且它起作用了。

那就试试看吧。

更多解决方案和更好的解释可以在这里找到 - Why I have to put all the script to index.html in jquery mobile

让我知道你过得怎么样，如果没有任何效果，我会继续寻找你。

【讨论】：

感谢您的回答.. 但问题是我在子 html 页面中使用了多个 date-role='page'。所以这是不允许的.. 现在问题是我想创建一个滑动页面滑块也可以更改页眉和页脚，但使用单个 html 页面..