Phonegap - jquery/jquery mobile只适用于应用程序的第一页

我刚刚开始使用phonegap，我有两个页面index.html和pages.html， Index.html页面包含owlslider和pages.html有移动swipeLeft and swiprRight功能。Phonegap - jquery/jquery mobile只适用于应用程序的第一页

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

即如果我把滑块页作为索引比滑块工作，但当我导航到滑动功能页面比滑动功能不工作，如果我把滑动页面作为索引页面比滑动工作，但如果我导航到滑块页面比它不工作。

我包括js文件按照HTML标准

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

和包括这个js在两个页面（即index.html，然后page.html中）

有没有包括任何具体的方式js文件在phonegap项目？我错过了什么吗？

我也使用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"在单页中刷卡？因为我想更改页眉。

来源

2015-06-22 Nishant Solanki

此行为可能是由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");

希望这有助于！

来源

2015-06-22 08:57:19 Dibran

让我试试看..会回复你..谢谢你的答案.. :) –

我做了一些RND，并得知如果你使用多个html页面，你必须包含所有的js/css ，如果你使用的是单页而不是你必须包括它们一次..检查出来http://www.gajotres.net/multipage-template-vs-multi-html-template-in-jquery-mobile/和这个http://thehungrycoder.com/javascript-2/jquery/jquery-mobile/jquery-mobile-part-2-making-multiple-pages-and-linking-them.html –

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

今天早上在所有页面上，什么都不会将我移动的和JS/JQuery加载到Body/data-role =“page”div（在该页面上，而不是在index.html页面上）并且它工作正常。

所以试试看。

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

让我知道你上车，如果实在不行，我会继续找你。

来源

2015-06-22 11:39:41 justsimpleshh

感谢您的答案..但问题是我在子页面中使用了多个'date-role ='page''，所以这是不允许的。现在问题是我想要创建一个滑动页面滑块，它也改变页眉和页脚，但是通过使用一个单一的HTML网页.. –

Phonegap - jquery/jquery mobile只适用于应用程序的第一页

回答

相关问题