Jquery Mobile : 전환 전 DIV 페이지로드

Question

안녕하세요 !!

그래서

... 내가 질문을하고 난 아무데도 그것을 위해 어떤 해결책을 발견하지, 난 아주 긴 목록 내부 DIV 페이지 (# 개 페이지 2)에 링크 버튼을 나는 여기

은 아주 간단한 예제 코드입니다 ... 전환이 시작하기 전에 내부 DIV 페이지 "로드"할 것을 필요

<!-- Page #1 --> 
<!-- ... --> 
     <div data-role="content">  
     <p>View internal page: <a href="#page2">goto Page 2</a></p> 
     </div> 
<!-- ... --> 
    <!-- Start of Page #2 --> 
    <div data-role="page" id="page2"> 
     <div data-role="header"> 
      <h1>Bar</h1> 
     </div><!-- /header --> 
     <div data-role="content"> 
    <ul><li>...</li> 
    <li>...</li> 
    <!-- About 300+ of: <li>...</li> --> 
    </ul> 
    </div> 

S o, # page2로 연결되는 링크는 jquery mobile "Loading ..."을 제공해야합니다. 그리고 콘텐츠를로드 한 후 전환이 시작되어야합니다 .. 이유는 내가 그것을 삽입하는 동일한 페이지에서 그것을하는 이유입니다. 여기

내가 필요한의 좋은 예입니다 ... 페이지 # 2는 동적으로 모든 페이스 북 친구 (롱리스트), 그리고 그것은 클릭에서 시간이 오래 걸릴 DIV 및 전환 때까지 시작 : http://www.mpdtunes.com 그냥 라이브 데모 -> 로그인 -> 클릭 예술가 ...

어떤 제안이라도 환영합니다!

대단히 감사합니다 !!!!

Answer 1

은 기본적으로 당신은이 작업을 수행 할 수 :

1. 사용 버튼과 같은 :

   <a href="#" id="to-page2">goto Page 2</a> 
   

2. 가에 클릭 이벤트를 추가

   $(document).on('pagebeforeshow', '#index', function(){ 
       $(document).on('click', '#to-page2', function(){ 
        // Load internal page content 
       });  
   }); 
   

   경우 #index 이드는 너다. r 버튼이 포함 된 페이지입니다.

3. 표시 로딩 애니메이션 웹 키트 브라우저가 동적으로 트리거 아약스 로더에 문제가 있기 때문에

   setTimeout(function(){ 
       $.mobile.loading('show'); 
   },1); 
   

   SetTimeout이 필요 일명 아약스 로더.

4. 내부 페이지 콘텐츠를로드하십시오. 이제 여러 페이지가있는 1 개의 HTML 페이지를 사용하는 경우 새로운 내용을 listview에 즉시 추가 할 수 있습니다. 이는 listview가 이미 DOM에로드 되었기 때문입니다. 여러 HTML 페이지를 사용하는 경우 localstorage 변수에 페이지 컨텐츠를 저장하십시오.

5. setTimeout을 사용하여 다시 ajax loader를 숨 깁니다.

6. 시작 페이지 전환과 : 당신이 한 HTML 페이지가있는 경우

   $.mobile.changePage("#page2"); 
   

7. 다음이 그 것이다.당신이 localstorage 내부 페이지 콘텐츠를 저장 한 경우에 당신은 다음과 같이 두 번째 페이지의 pagebeforeshow 이벤트 기간 동안로드해야합니다

   $(document).on('pagebeforeshow', '#page2', function(){ 
       // Load internal page content from local-storage and append it 
   }); 
   

8. 마지막 단계는 목록보기 페이지 내용 초기화입니다. 내 다른 answer에서 보면, listview와 관련된 주제를 찾아보십시오.