使用Jquery Mobile过渡期间停止页面调整大小

Question

我正在构建一个需要扩展到所有分辨率的phonegap应用程序,因此我根据百分比来定义所有内容.我也使用一个带有我在Jquery中定义的div的固定头作为内容.

我遇到的问题是,在页面之间的过渡期间,存在"断断续续",因为页面高度在过渡期间会发生变化.我试图阻止这种情况发生.有什么想法吗？

我在下面创建了一个示例来说明这一点. http://jsfiddle.net/fz7qs/2/

<div id="pageContainer" style="position: relative !important; height: 100%;">
<div data-role="page" id="test1">

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

    <a id="page2link">To Page 2</a>

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

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

<div data-role="page" id="test2" style="height: 568px">

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

<a id="page1link">To Page 1</a>

<div data-role="content" style="height: 50%;">
    <p style="height: 80%; border: 1px solid black;">This is page 2</p>        
</div><!-- /content -->

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

Answer 1

整个jsFiddle页面在Chrome桌面浏览器中第一次访问时跳转,因此在使用前按jsFiddle RUN按钮正确加载.

编辑:答案和jsFiddle修改每个评论部分的发展.

编辑2:jsFiddles现在使用jQuery 1.7.2和jQuery Mobile 1.2.0来修复Chrome Browser Bug.

jsFiddle DEMO

解决方案是将样式设置为CSS文件而不是HTML部分,因为jQuery Mobile UI也通过样式表具有自己的样式主题.

此外,您extra closing div在该HTML的底部有一个for页面,也没有关闭该网页.jsFiddles不需要HTML中的head部分,因为页面已设置好HTML5,您只需使用Manage Resources按钮将文件(mobile jQuery)导入jsFiddle .

虽然您在问题中列出了完整的百分比单位,但我保留了像示例中所示的像素单位,但这些也可以是百分比.

CSS设置:

a {
 cursor: hand;
 cursor: pointer;    
}

.content1 {
  height: 268px;
}

.text1 {
  height: 50%;
  border: 1px solid black;
}

.content2 {
  height: 568px;
}

.text2 {
  height: 80%;
  border: 1px solid black;
}

在HTML部分中,我还使用以下命令将其固定footer在页面底部data-position:

<div data-role="footer" data-position="fixed">

除了固定footer到页面底部之外,您还可以通过data-id为每个具有相同值的页面添加额外设置来使其不具有动画效果.

<div data-role="footer" data-id="foo" data-position="fixed">

jsFiddle FOOTER.

编辑2:每次最近发现jQuery 1.8.2和jQuery Mobile 1.2.0在Chrome中看到的bug(隐藏的滚动条仍然导致身体元素跳跃),这里是一个修改过的jsFiddle示例:

jsFiddle Percentage基于jQuery 1.7.2和jQuery Mobile 1.2.0

关于这个bug:

我刚刚发现使用jsFiddle和jQuery 1.8.2以及jQuery Mobile 1.2.0 在jsFiddle 中使用函数时overflow设置不正常.hiddenscrollBars

该功能是在jQuery动画期间隐藏浏览器滚动条,防止元素在页面更改的动画期间短暂跳转.

浏览器滚动条实际上​​是隐藏的,但是主体部分中的元素继续"跳转",就像滚动条仍然存在一样.

当jsFiddle jQuery设置为1.7.2时,不会发生这种情况.

如果你好奇如何在一个页面上有多个伪页面,请查看这个jsFiddle以获取不相关的SO答案.