JQueryMobileは2番目のページで動作しません

jquery mobileを使用してAndroid用のphonegapプロジェクトに取り組んでいます。アプリは検索されましたが、アプリの最初に新しいページを追加する必要がありました。このjqueryをやったら、2番目のページに移動するとモバイルが動作しません。誰かがこれの理由を知っていますか？JQueryMobileは2番目のページで動作しません

私の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>

出典

2011-10-18 jiduvah

これは本当に最後に.jsがないと思われますか？src = "jquery.mobile/jquery-1.6.2.min" –

すべてのスクリプトタグ（Googleマップは別）は、私はウィザードが間違っていない限りそうだと思う。 – jiduvah

は、私は、これが2番目のページに移動しますリンクであることを推測しているです？

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

この機能の機能は何ですか？それは、この機能を使用している：

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

出典

2011-10-19 02:50:05 endyourif

私は実際にプロジェクトを現在再構築している。 data-role = "page"でdivタグを付けて、1つのhtmlファイルを使用しています。 – jiduvah

しかし、それはその機能を使用していた – jiduvah

あなたが1つのHTML onlye今使用している場合は、IDを持つページをリファラmsut：

< divのデータ-役割= "ページ" データ・テーマ=「A "ID = FIRST_PAGE>

< divのデータ-役割=" ページ」データ・テーマ= "" ID =¨second_page¨> ............. ゴーへ最初のページ ..........

1つのインポートあなたが知っておかなければならないことは、1つのhtmlファイル内のページのリストの最初のページが最初になるということです。この場合、スプラッシュ画面の後にfirst_pageが表示されます。

他の場合（別のhtmlファイルを使用）では、デフォルトでjsですべて読み込まれるため、index.htmlではない秒、3番目および他のページにスタイルを含める必要はありません。最初にindex.htmlを作ってjqmの統計情報を取得したら、他のページに少なくともajaxをロードして無効にするか、external rolを使用します。

出典

2011-10-19 13:34:39

JQueryMobileは2番目のページで動作しません

答えて

関連する問題