在页面转换期间调整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页面大小

回答

相关问题