2011-10-18 57 views
0

我正在为使用jquery mobile的android的phonegap项目工作。该应用程序工作找到,但我需要添加一个新的页面到应用程序的开始。一旦我完成了这个jQuery的手机不工作时,我导航到第二页。有没有人知道这个的任何原因?JQueryMobile不工作在第二页

所有我的JavaScript的/ jQuery是位于main.js

这里是我猜测,这是需要你的第二个页面的链接的第一和秒页

<!DOCTYPE HTML> 
<html> 
    <head> 
    <meta name="viewport" content="width=320; user-scalable=no" /> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
    <title>PhoneGap Demo With JQuery Mobile</title> 
     <link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.0b2.css" type="text/css" charset="utf-8" /> 
     <link rel="stylesheet" href="pgandjqm-style-override.css" type="text/css" charset="utf-8" /> 
     <script type="text/javascript" src="jquery.mobile/jquery-1.6.2.min"></script> 
     <script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script> 
     <script src="jquery.mobile/jquery.mobile-1.0b2.js"></script> 
      <script type="text/javascript" charset="utf-8" src="main.js"></script> 

    <!-- CDN Respositories: For production, replace lines above with these uncommented minified versions --> 
    <!-- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />--> 
    <!-- <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>--> 
    <!-- <script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>--> 
    </head> 
    <body data-theme="a"> 
    <div data-role="page" data-theme="a"> 
    <div data-role="header"> 
     <img src="images/joycard.png" alt="JoyCard" class="banner"> 
    </div> 
    <div data-role="content"> 

     <h3>Partner News</h3> 

      <div data-role="collapsible-set"> 
       <div data-role="collapsible" data-collapsed="false"> 
        <h3>13 Kanus</h3> 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dictum, est nec adipiscing interdum, felis diam pharetra leo, ut tempus magna arcu eu enim. Etiam facilisis condimentum neque tempus bibendum.</p> 
       </div> 
       <div data-role="collapsible"> 
        <h3>A Lounge</h3> 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dictum, est nec adipiscing interdum, felis diam pharetra leo, ut tempus magna arcu eu enim. Etiam facilisis condimentum neque tempus bibendum.</p> 
       </div> 
       <div data-role="collapsible"> 
        <h3>Kino</h3> 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dictum, est nec adipiscing interdum, felis diam pharetra leo, ut tempus magna arcu eu enim. Etiam facilisis condimentum neque tempus bibendum.</p> 
       </div> 
       <div data-role="collapsible"> 
        <h3>Action Sport Berlin</h3> 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dictum, est nec adipiscing interdum, felis diam pharetra leo, ut tempus magna arcu eu enim. Etiam facilisis condimentum neque tempus bibendum.</p> 
       </div> 
       <div data-role="collapsible"> 
        <h3>13 Kanus</h3> 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dictum, est nec adipiscing interdum, felis diam pharetra leo, ut tempus magna arcu eu enim. Etiam facilisis condimentum neque tempus bibendum.</p> 
       </div> 
       <div data-role="collapsible"> 
        <h3>A Lounge</h3> 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dictum, est nec adipiscing interdum, felis diam pharetra leo, ut tempus magna arcu eu enim. Etiam facilisis condimentum neque tempus bibendum.</p> 
       </div> 
       <div data-role="collapsible"> 
        <h3>Kino</h3> 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dictum, est nec adipiscing interdum, felis diam pharetra leo, ut tempus magna arcu eu enim. Etiam facilisis condimentum neque tempus bibendum.</p> 
       </div> 
       <div data-role="collapsible"> 
        <h3>Action Sport Berlin</h3> 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dictum, est nec adipiscing interdum, felis diam pharetra leo, ut tempus magna arcu eu enim. Etiam facilisis condimentum neque tempus bibendum.</p> 
       </div> 

      </div> 
      <div id="example"> 
       <h2 onclick="toIndex();">To the app</h2> 
      </div> 

     </div> 
    </div> 
    </body> 
</html> 




<!DOCTYPE HTML> 
<html> 
    <head> 
    <meta name="viewport" content="width=320; user-scalable=no" /> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
    <title>PhoneGap Demo With JQuery Mobile</title> 
     <link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.0b2.css" type="text/css" charset="utf-8" /> 
     <link rel="stylesheet" href="pgandjqm-style-override.css" type="text/css" charset="utf-8" /> 
     <script type="text/javascript" src="jquery.mobile/jquery-1.6.2.min"></script> 
     <script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script> 
     <script src="jquery.mobile/jquery.mobile-1.0b2.js"></script> 
     <script type="text/javascript" charset="utf-8" src="main.js"></script> 
      <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 


    <!-- CDN Respositories: For production, replace lines above with these uncommented minified versions --> 
    <!-- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />--> 
    <!-- <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>--> 
    <!-- <script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>--> 
    </head> 
    <body data-theme="a"> 
    <div data-role="page" data-theme="a"> 
     <div data-role="header"> 
      <img src="images/joycard.png" alt="JoyCard" class="banner"> 
     </div> 
     <div data-role="navbar"> 
      <ul> 
       <li><a onclick="categoriesList();" class="ui-btn-active">KATEGORIEN</a></li> 
       <li><a onclick="mapDetails();">IN DER N&Auml;HE</a></li> 
       <li><a onclick="allPartners();">ALLE PARTNER</a></li> 
      </ul> 
     </div><!-- /navbar --> 


     <div id="list" data-role="content" data-theme="a"> 
      <ul data-role="listview" data-inset="true" data-theme="a"> 
      </ul> 
     </div><!-- end jqm content --> 

     <div id="allPartners" data-role="content"> 
      <ul data-role="listview" data-inset="true" data-theme="a"> 
      </ul> 
     </div><!--/all partners list -->  

     <div id="loctext" ></div> 

     <div id="map_canvas" class="mapView"></div> 

     <div id="menu" data-role="content" class="menu" onClick="hideMenu();"> 
        <a href="news.html" class="menu-item"><img src="images/news.png" alt="News"></a> 
        <a href="contact.html" class="menu-item"><img src="images/contact.png" alt="Contact"></a> 
        <a href="info.html" class="menu-item"><img src="images/info.png" alt="Info"></a> 
     </div> 
    </div> 
    </body> 
</html> 
+0

这真的应该是缺少.js的结尾 - src =“jquery.mobile/jquery-1.6.2.min” –

+0

所有脚本标记(除了谷歌地图)从向导生成的所有我猜是这样,除非向导错了 – jiduvah

回答

0

<h2 onclick="toIndex();">To the app</h2> 

这个函数做什么?使用此功能是:

$.mobile.changePage("secondpage.html"); 
+0

我实际上已经重组了项目。并与data-role =“page”分隔,所以我只使用1个html文件。 – jiduvah

+0

但是,它正在使用该功能 – jiduvah

0

如果您现在正在使用onlye一个HTML,你MSUT引荐与ID的网页:

< DIV数据角色=“页面”数据主题=“一个“ID =¨first_page¨>

< DIV数据角色=” 页面”数据主题= “一个” ID =¨second_page¨> ............. 转到第一页 ..........

One import在你必须知道的是,一个HTML文件中的页面列表中的第一页将是第一页,所以在这种情况下,first_page将显示在启动画面之后。

在另一种情况下(使用不同的html文件)不需要在秒,第三和其他页面中包含de风格,因为所有的页面都默认加载了js。因此,首先请求index.html,然后jqm统计信息起作用,然后其他页面将加载ajax,至少您可以禁用或使用外部rol。