2013-01-19 3 views
1

navbar "persistent toolbars"를 구현하여 탐색 표시 줄을 한 번 정의해야합니다.jQuery Navbar "persistent toolbars"가 간단한 예제조차도 작동하지 않습니다 - 내가 뭘 잘못 했습니까?

REF : http://jquerymobile.com/demos/1.2.0/docs/toolbars/footer-persist-a.html

내가, 내 개발에 바로 넣어 아무 일을하지 않았다 내가 볼로 어느 간단한 경우에 작동하지 않는 것

먼저 (각 페이지에 data-id="the same"을 정의해야합니다) , 나는 모든 종류의 조합을 시도했다.

다음 코드의 너비가 잘못되었을 수 있습니까? Navivagtion은 두 번째 페이지로 연결되지만 도구 모음에는 연결되지 않습니다.

CODE :

<body> 
<div data-role="page" id="page" data-id="stHedaer> 
    <div data-role="header"> 
     <h1>Page One</h1> 
     <div data-role="navbar" data-position="fixed"> 
      <ul> 
       <li><a href="#p2">page2</a></li> 
       <li><a href="#p3">page3</a></li> 
      </ul> 
     </div> 
    </div> 
    <div data-role="content"> Page one </div> 
    <div data-role="footer"> 
     <h4>Page Footer</h4> 
    </div> 
</div> 
<div data-role="page" id="p2" data-id="stHedaer"> 
    <div data-role="header" > 
     <h1>Page Two</h1> 
    </div> 
    <div data-role="content"> Content </div> 
    <div data-role="footer"> 
     <h4>Page Footer</h4> 
    </div> 
</div> 
<div data-role="page" id="p3" data-id="stHedaer" > 
    <div data-role="header"> 
     <h1>Page Three</h1> 
    </div> 
    <div data-role="content"> Content </div> 
    <div data-role="footer"> 
     <h4>Page Footer</h4> 
    </div> 
</div> 
</body> 

답변

0

JQM 설명서를주의 깊게 읽어야합니다. 모든 페이지에 navbar가 필요한 경우 모든 페이지에 표시해야합니다. 포함 :

...data-position="fixed" data-id="footer"... 

(머리글 및 바닥 글에 포함)

여기에 동작하는 예제입니다 : http://jsfiddle.net/Gajotres/Beq4H/

<!DOCTYPE html> 
<html> 
<head> 
    <title>Share QR</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"/>  
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 
</head> 

<body> 

    <div data-role="page" id="home"> 
    <div data-role="header" data-theme="b" data-position="fixed" data-id="footer"> 
     <a href="#home" data-icon="home" data-iconpos="notext">Home</a> 
     <h1>Share QR</h1> 
    </div> 
    <div data-role="content"> 
     <p>Hello world!</p> 
    </div> 
    <div data-role="footer" data-theme="b" data-position="fixed" data-id="footer"> 
     <div data-role="navbar"> 
      <ul> 
       <li><a href="#about" data-transition="slide">page2</a></li> 
       <li><a href="#about" data-transition="slide">page3</a></li> 
      </ul> 
     </div> 
    </div> 
    </div> 

    <div data-role="page" id="about"> 
    <div data-role="header" data-theme="b" data-position="fixed" data-id="footer"> 
     <a href="#home" data-icon="home" data-iconpos="notext">Home</a> 
     <h1>About</h1> 
     <a href="#home" data-icon="arrow-l" data-rel="back">Back</a> 
    </div> 
    <div data-role="content"> 
     <p>Share your favorite URLs with other mobile phone users through QR codes.</p> 
    </div> 
    <div data-role="footer" data-theme="b" data-position="fixed" data-id="footer"> 
     <div data-role="navbar"> 
      <ul> 
       <li><a href="#home" data-transition="slide">page2</a></li> 
       <li><a href="#home" data-transition="slide">page3</a></li> 
      </ul> 
     </div> 
    </div> 
    </div> 

</body> 
</html> 
+1

행크스, 내가 다시 문서를 읽을 것입니다. 참으로, "영속적 인"은 전이 (transitions)를 말하며 (이는 정말로 흥미 롭지 않습니다). 그래서 JavaScript 코드 gen을 사용하여 목표를 달성 할 수 있습니다. (내 전나무 언어로 영어가 아닌 (헝가리어) 나는 빠른 읽기에주의해야합니다 .. –

관련 문제