jquery 모바일을 사용하여 페이지 전환 끝에서 이벤트를 수신하는 방법

Question

컨텍스트 : jquery 모바일 페이지에서 사용 가능한 사용되지 않는 수직 미사용 공간을 계산하고 그 결과를 사용하여 요소의 크기를 조정하여 사용 가능한 최대 공간을 사용하려고합니다. .

페이지가 보이지 않을 때 머리글, 바닥 글 및 내용 요소의 높이가 0으로 설정되어 있기 때문에 페이지가 전환 IN을 완료하기 전에 계산을 시작할 수 없습니다.

pageshow 이벤트를 사용하여 페이지 전환이 완료된 시점을 감지하고 계산을 수행하지만 사실상 51px 인 상태에서 전환이 완료되어야 할 때 바닥 글 높이가 여전히 0 인 것으로 나타났습니다. 또한 페이지 높이는 전환이 완전히 실행 된 경우가 아닌 창 또는 문서 높이보다 상당히 작은 높이를 반환합니다.

페이지 쇼 이벤트가 트리거 된 것은 사실이지만 페이지 이동은 실제로 완료되지 않은 것입니다. 문서에 따르면 완료된 경우에만 완료해야하며 일명 모든 요소의 최종 높이가 있어야합니다.

아무도 더 잘 알지 못하거나이 사건에 대한 나의 명백한 실수를 지적 할 수 있습니까?

나는 하드 코딩 된 값을 설정하여 내 문제를 해결했지만 작동 할 수있는 제네릭 함수를 작성하는 편이 훨씬 좋습니다. 자바 스크립트 코드의

... 
<div data-role="page" id="pWhereAmI"> 
    <div data-role="header" data-id="mainHeader" data-position="fixed"> 
     <h1>Where Am I ?</h1> 
    </div> 
    <div data-role="content" class="map-content"> 
     <ul data-role="listview" data-inset="true"> 
      <li>Position Unknown</li> 
      <li id="map_canvas"></li> 
      <li>Center the map</li> 
     </ul> 
    </div> 
    <div data-role="footer" class="nav-glyphish-example" data-id="mainFooter" data-position="fixed"> 
     <div data-role="navbar" class="nav-glyphish-example" data-grid="d"> 
      <ul> 
       <li><a href="#pLogin" id="home" data-transition="fade" data-icon="custom"><small>Login</small></a></li> 
      </ul> 
     </div> 
    </div> 
</div><!-- /page pWhereAmI --> 
... 

행사 :

$('#pWhereAmI').live('pageshow',function(event, ui) { 
    pageFreeHeight = pageFreeHeight_calc('#pWhereAmI'); 
    map_canvasHeight = $('#map_canvas').height() + pageFreeHeight; 
    $('#map_canvas').height(map_canvasHeight); 
}); 

의 pageshow 이벤트시에 호출되는 함수 :

function pageFreeHeight_calc(pageSelector) { 
    if($(pageSelector).height != null) { 
     pageHeight = $(pageSelector).height(); 
    } 
    else { 
     return null; 
    } 
    if($(pageSelector+' [data-role|="header"]').outerHeight(true) != null) { 
     headerHeight = $(pageSelector+' [data-role|="header"]').outerHeight(true); 
    } 
    else { 
     headerHeight = 0; 
    } 
    if($(pageSelector+' [data-role|="content"]').outerHeight(true) != null) { 
     contentHeight = $(pageSelector+' [data-role|="content"]').outerHeight(true); 
    } 
    else { 
     contentHeight = 0; 
    } 
    if($(pageSelector+' [data-role|="footer"]').outerHeight(true) != null) { 
     footerHeight = $(pageSelector+' [data-role|="footer"]').outerHeight(true); 
    } 
    else { 
     footerHeight = 0; 
    } 
    return pageHeight - headerHeight - contentHeight - footerHeight; 

} 

Answer 1

HTML 페이지의 발휘을 :

내 코드는 아래로 손질

흠, 조금 수정했지만 코드는 나에게 잘 어울립니다. 조정 후 표시 요소의 높이

JS -

• http://jsfiddle.net/phillpafford/gkPAG/22/
• http://jsfiddle.net/phillpafford/gkPAG/28/ < :

  $('#pWhereAmI').live('pageshow',function(event, ui) { 
      canvasHeight  = $('#map_canvas').height(); // initialize the canvas height 
      pageFreeHeight = pageFreeHeight_calc('#pWhereAmI'); 
      map_canvasHeight = canvasHeight + pageFreeHeight; 
      $('#map_canvas').height(map_canvasHeight).page(); 
  }); 
  
  function pageFreeHeight_calc(pageSelector) { 
      var pageHeight  = null; 
      var headerHeight = 0;; 
      var contentHeight = 0; 
      var footerHeight = 0; 
  
      if($(pageSelector).height != null) { 
       pageHeight = $(pageSelector).height(); 
      } 
  
      if($(pageSelector+' [data-role|="header"]').outerHeight(true) != null) { 
       headerHeight = $(pageSelector+' [data-role|="header"]').outerHeight(true); 
      } 
  
      if($(pageSelector+' [data-role|="content"]').outerHeight(true) != null) { 
       contentHeight = $(pageSelector+' [data-role|="content"]').outerHeight(true); 
      } 
  
      if($(pageSelector+' [data-role|="footer"]').outerHeight(true) != null) { 
       footerHeight = $(pageSelector+' [data-role|="footer"]').outerHeight(true); 
      } 
  
      alert(
       'pageHeight: ' + pageHeight + "\n" + 
       'headerHeight: ' + headerHeight + "\n" + 
       'contentHeight: ' + contentHeight + "\n" + 
       'footerHeight: ' + footerHeight + "\n" + 
       'returnValue: ' + (pageHeight - headerHeight - contentHeight - footerHeight) 
      ); 
      return pageHeight - headerHeight - contentHeight - footerHeight; 
  } 
  

  HTML :

  <div data-role="page" id="home"> 
      <div data-role="content"> 
       <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"> 
        <li data-role="list-divider">Navigation</li> 
        <li><a href="#pWhereAmI">Where am I</a></li>    
       </ul> 
      </div> 
  </div> 
  
  <div data-role="page" id="pWhereAmI"> 
      <div data-role="header" data-id="mainHeader" data-position="fixed"> 
       <h1>Where Am I ?</h1> 
      </div> 
      <div data-role="content" class="map-content"> 
       <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"> 
        <li data-role="list-divider">Navigation</li> 
        <li><a href="#home">Home</a></li>    
       </ul> 
       <br /> 
       <ul data-role="listview" data-inset="true"> 
        <li>Position Unknown</li> 
        <li id="map_canvas"></li> 
        <li>Center the map</li> 
       </ul> 
      </div> 
      <div data-role="footer" class="nav-glyphish-example" data-id="mainFooter" data-position="fixed"> 
       <div data-role="navbar" class="nav-glyphish-example" data-grid="d"> 
        <ul> 
         <li><a href="#pLogin" id="home" data-transition="fade" data-icon="custom"><small>Login</small></a></li> 
        </ul> 
       </div> 
      </div> 
  </div><!-- /page pWhereAmI --> 
  

  여기에 내가 무슨의 살아있는 예입니다