JQueryMobile이 두 번째 페이지에서 작동하지 않습니다.

jquery mobile을 사용하여 android 용 phonegap 프로젝트를 진행하고 있습니다. 응용 프로그램은 찾았지만 응용 프로그램의 시작 부분에 새 페이지를 추가해야했습니다. 일단이 작업을 완료하면 jquery 모바일은 두 번째 페이지로 이동할 때 작동하지 않습니다. 아무도 이것에 대한 어떤 이유를 알고 있습니까? JQueryMobile이 두 번째 페이지에서 작동하지 않습니다.

내 자바 스크립트의 모든

은/JQuery와 제 1 및 초 페이지

<!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

나는이 두 번째 페이지로 이동 링크가 있음을 추측하고있어 여기

main.js

에있는 위치 ?

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

이 기능의 기능은 무엇입니까? 그것은이 기능을 사용하고 있습니다 :

< DIV 데이터-역할 = "페이지"데이터 테마 = "A :

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

출처

2011-10-19 02:50:05 endyourif

나는 실제로 프로젝트를 지금 재구성했다는 것을 나는 짐작한다. 그리고 data-role = "page"로 div tages를 가지고 있으므로 html 파일을 1 개만 사용하고 있습니다. – jiduvah

하지만 그 기능을 사용하고있었습니다. – jiduvah

하나 HTML onlye 지금 사용하고있는 경우를, 당신은 ID로 페이지를 리퍼러 msut "ID = FIRST_PAGE>

< DIV 데이터-역할 ="페이지 "데이터 테마 ="A "ID = ¨second_page¨> ............. 로 이동 첫 번째 페이지 ..........

하나의 가져 오기 당신이 알아야 할 것은 하나의 html 파일 안에있는 페이지 목록의 첫 페이지가 첫 번째 일 것입니다. 그래서이 경우 first_page는 제가 스플래시 화면 다음에 보여줄 것입니다.

다른 경우 (다른 HTML 파일 사용)에는 기본적으로 js로 모두로드되기 때문에 초, 세 번째 및 기타 index.html 페이지의 스타일이 포함되어 있지 않아도됩니다. 그래서 먼저 index.html을 작성하고 jqm 통계가 작동하도록 설정 한 다음 적어도 다른 페이지를 비활성화하거나 외부 롤을 사용하는 다른 페이지에 아약스가로드됩니다.

출처

2011-10-19 13:34:39

JQueryMobile이 두 번째 페이지에서 작동하지 않습니다.

답변

관련 문제