JQuery Mobile 도구 모음이 나타나지 않는 이유

JQuery Mobile을 사용하여 내 사이트의 모바일 버전을 만들려고합니다. 고정 된 머리글 도구 모음과 고정 된 바닥 글 도구 모음을 모든 페이지에 표시하고 싶습니다. 그러나 페이지의 해당 부분은 대신 단순 HTML 목록으로 작성됩니다. 다음은 관련 헤더 코드입니다.JQuery Mobile 도구 모음이 나타나지 않는 이유

<!DOCTYPE html> 
    <html> 
     <head> 
      <meta charset="utf-8"> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <meta name="apple-mobile-web-app-capable" content="yes"> 
      <meta name="apple-mobile-web-app-status-bar-style" content="black"> 

      <title>Nightscape Creations Wallpapers</title> 
      <link rel="stylesheet" href="themes/NCMobile.min.css" /> 
      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" /> 
      <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
      <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> 
     </head> 

     <div data-role="header" data-position="fixed"> 
      <a href="#" data-role="button" data-rel="back">Back</a> 
      <h1>Nightscape Creations</h1> 
      <a href="#home" data-icon="home" data-theme="a">Home</a> 

      <div data-role="navbar"> 
       <ul> 
        <li><a href="#liveWallpapers">Live Wallpapers</a></li> 
        <li><a href="#staticWallpapers">Static Wallpapers</a></li> 
        <li><a href="#products">Products</a></li> 
        <li><a href="#about">About</a></li> 
       </ul> 
      </div> 
     </div>

이 코드는 모바일 사이트의 www.NightscapeCreations.com에서 볼 수 있습니다.

JQuery 코드가 올바르게 포함되지 않았거나 초기화되지 않은 것처럼 보입니다. 설치에서 눈에 두 번째 세트가 필요한 뭔가를 놓친 것이 아닌지 잘 모르겠습니다. 내가 이동 한 mwfire에 의해 제안 당

<body> 
     <div data-role="page" id="home"> 
      Some text 
     </div> 

     <div data-role="page" id="liveWallpapers"> 
      Some text 
     </div> 

     <div data-role="page" id="products"> 
      Some text 
     </div> 

     <div data-role="page" id="about"> 
      Some text 
     </div> 

     <div data-role="page" id="staticWallpapers"> 
      Some text 
     </div> 
    </body> 

    <div data-role="footer" data-position="fixed"> 
     <h1>All images, animations, and content © Nightscape Creations</h1> 
     <a href="setSessionVar.cfm?varName=browserType&varValue=desktop&goto=home.cfm">Visit Desktop Site</a> 
    </div> 
</html>

EDIT 1

: 그것은 관련이있는 경우

, 페이지의 나머지 부분은 유사 할 수있다 body 태그 안의 모든 보이는 코드. 페이지의 단순화 된 버전을 이제이 코드와 함께 사용할 수 있습니다.

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Nightscape Creations Wallpapers</title> 

     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <meta name="apple-mobile-web-app-capable" content="yes"> 
     <meta name="apple-mobile-web-app-status-bar-style" content="black"> 

     <link rel="stylesheet" href="themes/NCMobile.min.css" /> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" /> 
     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> 
    </head> 




    <body> 

     <div data-role="header" data-position="fixed"> 
      <a href="#" data-role="button" data-rel="back">Back</a> 
      <h1>Nightscape Creations</h1> 
      <a href="#home" data-icon="home" data-theme="a">Home</a> 

      <div data-role="navbar"> 
       <ul> 
        <li><a href="#liveWallpapers">Live Wallpapers</a></li> 
        <li><a href="#staticWallpapers">Static Wallpapers</a></li> 
        <li><a href="#products">Products</a></li> 
        <li><a href="#about">About</a></li> 
       </ul> 
      </div> 
     </div> 



<div data-role="page" id="home1"> 


<div style="font-weight:bold; text-decoration:underline;">Welcome</div> 
Welcome to Nightscape Creations Mobile. Here you will find animated live wallpapers, static wallpapers, and links to physical products 
with the wallpaper images included. Use the header button above to browse the mobile site, or 
<a href="setSessionVar.cfm?varName=browserType&varValue=desktop&goto=home.cfm">click here</a> to visit the main site instead. 



</div> 



     <div data-role="footer" data-position="fixed"> 
      <h1>All images, animations, and content © Nightscape Creations</h1> 
      <a href="setSessionVar.cfm?varName=browserType&varValue=desktop&goto=home.cfm">Visit Desktop Site</a> 
     </div> 
    </body> 
</html>

그러나 도구 모음이 나타나지 않습니다.

출처

2013-09-27 Nicholas

실제로 모든 HTML 코드는 본문 태그 안에 있습니다. 난 당신이뿐만 아니라 모든 바닥 글이 표시되지 않는 내기)

편집 그냥 명확히하기 위해, 구조가 그렇게 있어야하는데
:

<!DOCTYPE ...> 
<html> 
    <head> 
    <title>Page title</title> 
    </head> 
    <body> 
     <!-- All visible HTML content goes here! --> 
    </body> 
</html>

없음 HTML 태그가 몸 밖에 없을 것 태그 (머리, 몸 & Doctype 제외).

자세한 내용은 here 페이지 구조에서 찾을 수 있습니다.

Edit2가이 외에도
는 머리글과 바닥 글은 데이터 역할 = "페이지"DIV 안에 있어야한다. jQuery는 한 번에 한 페이지를 표시하고 단일 HTML 페이지로 생각합니다. 단일 페이지의 전체 구조를 포함해야합니다 (예 : 머리글과 바닥 글을 원하는 경우).

<div data-role="page"> 
    <div data-role="header"> 
     <h1>Test</h1> 
    </div> 
    <div data-role="content"> 
     Content 
    </div> 
    <div data-role="footer"> 
     <h3>Footer</h3> 
    </div> 
</div>

출처

2013-09-27 15:09:48 mwfire

아, 좋은 소식! 그게 날 완전히 미끄러졌습니다. 불행히도이 문제는 해결되지 않습니다. 라이브 코드를 업데이트했으며 잠시 위에 질문을 업데이트합니다. 다른 생각을하고 싶습니까? – Nicholas

안녕 니콜라스, 대답을 업데이트했습니다. 지금 작동해야합니다;) – mwfire

아, JQuery 모바일 구조가 어떻게 작동하는지 완전히 오해했습니다. 업데이트 주셔서 감사합니다. 나는 오늘 밤이 시험을보고 다시보고 할 것이다. :) – Nicholas

JQuery Mobile 도구 모음이 나타나지 않는 이유

답변

관련 문제