在頁面轉換期間調整Jquery Mobile頁面大小

我正在使用Jquery Mobile和Phonegap開發應用程序。我遇到的問題是，當我進行頁面轉換時，傳入頁面首先顯示不正確（DOM元素不在正確的位置和正確的大小），然後一旦轉換完成，元素調整大小並移動到正確的位置。（另外，轉出的頁面在移出之前也不正確）。我已經使用淡入淡出和幻燈片過渡來測試過這個（我最終希望有幻燈片切換）。在頁面轉換期間調整Jquery Mobile頁面大小

這裏是一個的jsfiddle能說明問題：
http://jsfiddle.net/fz7qs/2/

我也使用一個div作爲頁面容器中，使得整個頁面沒有立刻轉變，但只是網頁div容器。

我使用幾乎所有的一切（高度，寬度，邊距等）的CSS百分比，以便應用程序可以縮放到不同的設備大小。另外，我正在使用JavaScript來集中一些元素（在pageshow事件中觸發）。我認爲這些百分比是問題的一部分。我在桌面瀏覽器上構建了一個簡單的測試（取出phonegap）併爲頁面容器設置了一個固定的高度。這似乎解決了這個問題，但是當我在手機上試用時，問題仍然存在。

在應用程序中的每個頁面預加載到使用$ .mobile.loadPage的DOM（）。我想如果我預加載他們，百分比高度將相對於父（頁面容器div），並且轉換應該看起來正確。

進一步調查Jquery Mobile，我發現在轉換過程中，頁面的高度被設置爲空字符串。我試圖評論這一行，只是爲了測試它是否可以與百分比高度一起工作。再次，它在我的桌面測試上工作，但不在電話上。

我在Samsung Galaxy Nexus上使用Android phonegap（API level 8 - Android 2.2）進行測試。

有什麼辦法有CSS和同時保持基於百分比值的頁面轉換之前應用的JavaScript定位是什麼？

的index.html

<body> 
    <!-- header on every page --> 
    <div id="mainHeader">This is a header</div> 

    <!-- page content --> 
    <div id="pageContainer"> 
     <div data-role="page"></div> 
    </div> 
</body>

page1.html

<body> 
    <div data-role="page" id="page1"> 
     <div class="subheader"> 
      <div class="backButton"></div> 
      <div class="subheaderText">Settings</div> 
      <div class="helpButton"></div> 
     </div> 
    </div> 
</body>

相關CSS

#pageContainer { 
    overflow: hidden; 
    width: 100%; 
    height: 86.772486772486772486772486772487%; 
} 

.ui-mobile [data-role="page"] { 
    min-height: 0px !important; 
    color: white; 
    position: relative; 
    width: 100%; 
    height: 100%; 
    background: #868a73; 
} 

.subheader { 
    width: 100%; 
    height: 10.16260162601626016260162601626%; 
    background-color: #000; 
    display: inline-block; 
    text-align: center; 
    position: relative; 
} 

.backButton { 
    background: url("images/back_button.png"); 
    background-size: contain; 
    background-repeat: no-repeat; 
    display: inline-block; 
    float: left; 
    width: 8.888888888888888888888888888889%; 
    height: 52%; 
    margin-left: 5.555555555555555555555555555556%; 
} 

.subheaderText { 
    color: #FFF; 
    font-size: 2.45em; 
    font-weight: bold; 
    display: inline-block; 
} 

.helpButton { 
    float: right; 
    background: url("images/help_button.png"); 
    background-size: contain; 
    background-repeat: no-repeat; 
    display: inline-block; 
    width: 8.888888888888888888888888888889%; 
    height: 64%; 
    right: 5.555555555555555555555555555556%; 
}

來源

2012-12-10 danman

首先，你可以讓你的HTML廁所K喜歡jQuery的移動教程頁面。你需要有HTML結構，如：

<div data-role="page"> 

    <div data-role="header"> 
     <h1>Page Title</h1> 
    </div><!-- /header --> 

    <div data-role="content"> 
     <p>Page content goes here.</p> 
    </div><!-- /content --> 

    <div data-role="footer"> 
     <h4>Page Footer</h4> 
    </div><!-- /footer -->

就以jquery mobile page anatomy看看。

來源

2013-01-17 19:53:29

在頁面轉換期間調整Jquery Mobile頁面大小

回答

相關問題