JQuery와 모바일 pageContainer는

를 발행 는 유지되지만 내용 만 변경됩니다.JQuery와 모바일 pageContainer는

나는 어떻게 작동하는지 이해하기 위해 간단한 예제를 시도하고 있지만 시간이 많이 걸립니다.

여기 내 아주 간단한 예입니다.

<!DOCTYPE html> 
<html> 
    <head> 
    <title></title> 

    <link rel="stylesheet" href="static/css/jquery.mobile-1.1.0.min.css" type="text/css" /> 
    <script type="text/javascript" charset="utf-8" src="static/js/jquery-1.7.1.min.js"></script>   
    <script type="text/javascript" charset="utf-8" src="static/js/jquery.mobile-1.1.0.min.js"></script> 
    <script type="text/javascript"> 

    $(document).ready(function(){ 
     $.mobile.changePage('page2.html',{ 
      'pageContainer': $('#content_container'), 
      'role':'content' 
     }); 
    }); 

    </script> 
    </head> 
    <body > 
     <div data-role="page"> 
      <div data-theme="a" data-role="header"> 
       <div data-role="navbar" data-iconpos="top"> 
        My Header 
       </div> 
      </div> 
      <div id='content_container' data-role="content"> 
       <p>Page 1 </p> 
      </div> 
      <div data-theme="a" data-role="footer"> 
       My Footer 
      </div> 
     </div>     
    </body> 
</html>

는 그리고 이것은 "페이지 2"에 대한, 대신에 "페이지 1"대체이로드 나는 새로운 빈 페이지로 리디렉션 페이지 2

<html> 
    <body> 
     <div data-role="page"> 
      <p>Page 2</p> 
     </div> 
    </body> 
</html>

입니다. 내가 잘못하고있는 것에 대한 어떤 조언도 감사 할 것이다.

출처

2012-05-08 Juan Carlos Moreno

여기 불행하게도 형식이 방법은 그러나 않는 요소를 유지하지 않습니다 직접 jQuery의 부하를 활용, API를 통해이 작업을 수행 할 수있는 방법입니다.

$(document).bind('pageload',function(evt,data){ 
    $(document).unbind('pageload'); 
    $(data.page).fadeIn(); 
}); 
$.mobile.loadPage('page2.html',{'pageContainer':$('#content_container')});

출처

2012-05-09 04:35:49

왜 이것이 'changePage'와 함께 작동하지 않습니까? 첫 번째 인수로 jQuery 컬렉션을 사용해야한다. – Robin

pagechange는 loadPage에 대한 changePage 및 pageLoad에 사용되는 이벤트이기 때문에 저는 믿습니다. changePage를 사용하여 페이지를 제대로 삽입 할 수없는 이유는 확실하지 않지만이 점이 저에게는 효과적이었습니다. –

두 번째 페이지에 data-role="content" 요소를 추가해야합니다. changePage() 메서드의 pageContainer 옵션은 특정 페이지의 컨테이너가 아닌 모든 페이지의 컨테이너를 변경하기위한 것입니다.이 옵션을 사용한 적이 없지만 이것이 생각입니다.

console.log($.mobile.pageContainer)을 입력하면 body 요소 인 http://jsfiddle.net/8T35d/이 표시됩니다.

이 옵션의 목적은 changePage() 메서드를 호출 할 때 변경되지 않는 영구 UI를 만들 수있게하기위한 것입니다.

그런 다음 문서에서이 페이지를 살펴 가지고 지속적 머리글/바닥 글을 찾는 경우 :

<div id='#content_container' data-role="content">

변경을하기 : 당신은 여기에 귀하의 ID에 구문 오류가 http://jquerymobile.com/demos/1.1.0/docs/toolbars/footer-persist-d.html

출처

2012-05-08 16:18:12 Jasper

을 (해시 제거) :

<div id='content_container' data-role="content">

와 관련된 질문 Open links in div container in JQuery Mobile에 따라, changePage()가로드 서버 conten 작동하지 않는 것 페이지 내의 특정 컨테이너에 넣지 마십시오. 전체 페이지를 변경하려고합니다.

이 작동 :

$(document).ready(function(){ 
    $("#content_container").load("page2.html"); 
});

출처

2012-05-08 17:08:23 jdi

jquery mobile은 jquery가 제공하는 것만 큼 많은 의미가없는 것 같습니다. 아마도 일반 jquery를 사용하는 것이 좋습니다. –

JQuery와 모바일 pageContainer는

답변

관련 문제