18

我正在构建一个需要扩展到所有分辨率的 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>

4

2 回答 2

13

整个 jsFiddle 页面在 Chrome 桌面浏览器的第一次访问时跳转，因此在使用前按下 jsFiddle RUN 按钮以正确加载。

编辑：根据评论部分的发展修改了答案和 jsFiddle。

编辑 2：jsFiddles 现在使用 jQuery 1.7.2 和 jQuery Mobile 1.2.0 来修复 Chrome 浏览器错误。

jsFiddle 演示

解决方案是在 CSS 文件而不是 HTML 部分中设置样式，因为jQuery Mobile UI也通过样式表拥有自己的样式主题。

此外，您extra closing div在该 HTML 的底部有一个 for 页面，并且没有关闭网页。jsFiddles 不需要 HTML 中的 head 部分，因为页面已设置好HTML5，您只需使用“管理资源”按钮将文件（移动 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">

除了将 固定到页面底部之外，您还可以通过为每个具有相同 valuefooter的页面添加额外设置来使其不动画化。data-id

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

jsFiddle 页脚。

编辑 2：根据最近在 Chrome 中jQuery 1.8.2和发现的错误（隐藏的滚动条仍然会导致正文元素跳转），这是一个修改后的 jsFiddle 示例：jQuery Mobile 1.2.0

基于 jQuery 1.7.2 和 jQuery Mobile 1.2.0 的 jsFiddle 百分比

关于这个错误：

我刚刚发现在使用 jsFiddle中的函数期间将 jsFiddle 与 jQuery 1.8.2 和 jQuery Mobile 1.2.0overflow一起使用时无法按预期工作。hiddenscrollBars

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

浏览器的滚动条实际上​​是隐藏的，但正文部分的元素继续“跳跃”，就好像滚动条仍然存在一样。

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

如果您想知道如何在一个页面上拥有多个伪页面，请在此处查看此jsFiddle以获取不相关的SO 答案。

于 2012-12-14T03:01:07.517 回答
3

尝试改变这一点：

<div data-role="content" style="height: 50%;">

对此：

<div data-role="content" style="height: auto;">

示例：http: //jsfiddle.net/fz7qs/13/

于 2012-12-19T19:44:43.880 回答