2011-11-29 3 views
26

jQuery mobile이 시작 페이지에 로딩 메시지를 추가하고있는 것처럼 보입니다. 나는 실제로 무슨 일이 일어나는지 모르지만 다음 간단한 코드 조각을 고려하십시오.jQuery mobile이 페이지에 "loading heading"을 추가합니다.

<!DOCTYPE html> 
<html> 
    <head> 
    <title>sadFace</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> 
    <meta charset="utf-8" /> 
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
    </head> 
    <body> 
    <h1>;__;</h1> 
    </body> 
</html> 

로딩 메시지를 보려면 아래로 스크롤해야합니다. 그래서 나는 전형적인 jQuery 모바일 페이지 해부 체를 따르지 않아서 발생할 수 있다고 생각했지만 다음과 같이 설명했다 :

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script> 
</head> 
<body> 
<div data-role="page"> 
    <div data-role="header"> 
     <h1>;_;</h1> 
    </div><!-- /header --> 

    <div data-role="content"> 
     <p>Same shit, different page.</p>  
    </div><!-- /content --> 

    <div data-role="footer"> 
     <h4><a href="http://www.google.com/pacman/">need cookies :C</a></h4> 
    </div><!-- /footer --> 
</div><!-- /page --> 
</body> 
</html> 

동일. 나는이 행동에 완전히 놀랐다. 지난 주 프로젝트를 시작 했는데도 똑같은 결과로 jQuery1.0rc2를 테스트했습니다. 도대체 무슨 일이 벌어지고 있는지 <. <

jQuery Mobile' js에서 보겠습니다.이 메시지는 initializePage: function()의 책임입니다. 나는

//cue page loading message 
$.mobile.showPageLoadingMsg(); 

을 주석 또는 autoInitializePage: false을 설정하지만 (이 버그 않는 한) 차라리 수정의 jQuery 파일을 포함하지 않는 솔루션을 선호 할 수있다.

답변

37

당신은 너무 CSS를 추가해야합니다, 그것은 잘 될 것입니다 :

자세히
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 

는 :

:

항상 몸의 맨 아래에 다음과 같은 HTML을두고

<div class='ui-loader ui-body-a ui-corner-all'><span class='ui-icon ui-icon-loading spin'></span><h1></h1></div> 

이것은 관련 CSS입니다 (원하는 경우 직접 재생할 수 있습니다)

.ui-loading .ui-loader { display: block; } 
.ui-loader { display: none; position: absolute; opacity: .85; z-index: 100; left: 50%; width: 200px; margin-left: -130px; margin-top: -35px; padding: 10px 30px; } 

기능 showPageLoadingMsg는 HTML 태그에 CSS 클래스 '.ui로드'를 추가하고 당신이 JQuery와 모바일 라이브러리를로드하기 전에

+0

CSS는이 모든 프레임 워크가하는 것과 같은 성가신 일을 제외하고 ... –

+0

어떻게 h1을 넣는 것을 중단합니까? – Jayen

16

당신은 아래 사용하여 autoInitializePage을 중지 할 수 있습니다 표시되기

jQuery(document).on("mobileinit", function() { 
    jQuery.mobile.autoInitializePage = false; 
}); 
여기

더 많은 정보 : http://api.jquerymobile.com/global-config/

2

이 JS 파일의 맨이 추가

$.mobile.autoInitializePage = false; 
관련 문제