2011-05-09 3 views
0

나는 android에서 phonegap의 새로운 사용자입니다. 하나의 HTML 파일 내에 여러 페이지가있는 프로젝트를 만들려고하는데 작동하지 않습니다. 내가 사용한 코드는 친절이 조사안드로이드 여러 페이지의 phonegap

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8" /> 
    <title>Page Title</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.5.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script> 
<body> 

<!-- Start of first page --> 
<div data-role="page" id="foo"> 

    <div data-role="header"> 
     <h1>Foo</h1> 
    </div><!-- /header --> 

    <div data-role="content"> 
     <h2>Foo</h2> 
     <p>I'm first in the source order so I'm shown as the page.</p>  
     <p>View internal page called <a href="#bar">bar</a></p> 
     <p>View internal page called <a href="#baz" data-rel="dialog" data-transition="pop">baz</a> as a dialog.</p> 
    </div><!-- /content --> 

    <div data-role="footer"> 
     <h4>Page Footer</h4> 
    </div><!-- /footer --> 
</div><!-- /page --> 


<!-- Start of second page --> 
<div data-role="page" id="bar"> 

    <div data-role="header"> 
     <h1>Bar</h1> 
    </div><!-- /header --> 

    <div data-role="content"> 
     <h2>Bar</h2> 
     <p>I'm the bar page.</p>   
     <p><a href="#foo" data-direction="reverse">Back to foo</a></p> 
    </div><!-- /content --> 

    <div data-role="footer"> 
     <h4>Page Footer</h4> 
    </div><!-- /footer --> 
</div><!-- /page --> 


<!-- Start of second page --> 
<div data-role="page" id="baz"> 

    <div data-role="header"> 
     <h1>Baz</h1> 
    </div><!-- /header --> 

    <div data-role="content"> 
     <h2>Baz</h2> 
     <p>I'm the baz page, viewed as a dialog.</p>   
     <p><a href="#foo" data-rel="back">Back to foo</a></p> 
    </div><!-- /content --> 

    <div data-role="footer"> 
     <h4>Page Footer</h4> 
    </div><!-- /footer --> 
</div><!-- /page --> 

</body> 
</html> 

아래에 표시되고, 내가이 점에서 사용할 수하는 어떤 도움을 주셔서 감사합니다.

+0

"작동하지 않습니다"는 다소 모호하며 문제는 무엇입니까? 당신이 그렇게 말하지는 않았지만 jQuery Mobile을 가정합니다. 모든 문제를 발견 할 수 있도록 전체 문서를 보는 것도 좋을 것입니다. – DarthJDG

+0

안녕하세요, 한 HTML 파일을 사용하여 여러 페이지를 만드는이 코드를 사용하고 있습니다. 내 출력은 하나의 창에서 두 페이지 만 표시하고 있습니다. – Ullas

답변

0

각 페이지는 div에 data-role = 'page'로 묶어야합니다. 여러 페이지의 경우 각 페이지의 ID도 포함해야합니다.

예 :

<div data-role='page' id='page-foo'> 
    <div data-role="content"> 
    <h2>Foo</h2> 
    <p>I'm first in the source order so I'm shown as the page.</p>  
    <p>View internal page called <a href="#bar">bar</a></p> 
    <p>View internal page called <a href="#baz" data-rel="dialog" data-transition="pop">baz</a> as a dialog.</p> 
    </div><!-- /content --> 

    <div data-role="footer"> 
    <h4>Page Footer</h4> 
    </div><!-- /footer --> 
</div> 
1

당신은

또한 각 페이지에 이름을 고유 ID와 데이터-역할 유형이 DIV = 페이지를 만드는 데 필요한 모든 페이지는 같은 html 파일 호출

<a href="#page_id">bar</a> 



    <div data-role="page" id="foo" data-theme="b"> 
<div data-role="content"> 
    <h2>Foo</h2> 
    <p>I'm first in the source order so I'm shown as the page.</p>  
    <p>View internal page called <a href="#foo2">bar</a></p> 
    <p>View internal page called <a href="#foo2" data-rel="dialog" data-transition="pop">baz</a> as a dialog.</p> 
</div><!-- /content --> 

<div data-role="footer"> 
    <h4>Page Footer</h4> 
</div> 



<div data-role="page" id="foo2" data-theme="b"> 
<div data-role="content"> 
    <h2>Foo2</h2> 

</div><!-- /content --> 

<div data-role="footer"> 
    <h4>Page Footer</h4> 
</div> 
로 저장해야합니다
0

당신이 </head>를 놓친 것 같다.

코드를 추가 한 후 코드가 올바르게 작동합니다.

1

맥도웰은 바로, 당신은 또한 </head> 태그

누락, 당신은 .js와 .CSS 소스가 로컬로 저장되어 있는지 확인하고 경로는 절대, 상대하지 않습니다.

재 작성 등 :

<link rel="stylesheet" href="jquery.mobile-1.0a3.min.css" /> 
<script src="jquery-1.5.min.js"></script> 
<script src="jquery.mobile-1.0a3.min.js"></script> 

그리고 폰갭/코르도바가 된 .js 잊지 마세요!

관련 문제