jqueryモバイルでページ遷移の終了時にイベントを受け取る方法

Question

コンテキスト： jqueryモバイルページで利用可能な垂直未使用スペースを計算し、その結果を使用して要素を使用可能な最大スペース。

ヘッダー、フッター、およびコンテンツ要素の高さがページが表示されていないときに0に設定されているため、ページの移行が完了する前に計算を開始できません。

私はページ遷移がいつ終了したかを検出するためにpageshowイベントを使用しますが、実際には51pxの間に遷移が完了する必要がある場合、フッターの高さはまだ0です。また、ページの高さは、遷移が完全に実行された場合には当てはまらないウィンドウまたはドキュメントの高さよりもかなり低い高さを返す。

私は、ページショーイベントがトリガされたという印象を持っていますが、ドキュメントによれば、完了したばかりの唯一のすべての要素が最終高さを持つ必要があります。

誰もがよく知っている、またはこのイベントの私の理解をいくつかの明白な間違いを指摘することができますか？

ハードコードされた値を設定することで私の問題を解決しましたが、動作する汎用関数を書くことを好むでしょう。 JavaScriptコードの

... 
<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ページの 発揮を：

私のコードは、トリムダウン

うーん、私はそれを少し修正しましたが、あなたのコードは良く見えます。ここで私が持っているものの実際の例です：

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

JS後の要素の高さを表示します。

$('#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 -->