在使用Jquery Mobile进行转换期间停止页面调整大小 [英] Stop page resize during transition with Jquery Mobile

问题描述

我正在建立一个需要缩放到所有分辨率的phonegap应用程序，因此我们按百分比定义所有内容。我也使用一个固定的标题与在Jquery中定义的div作为内容。

我遇到的问题是，在页面之间的过渡期间，有一个stutter，因为页面高度在过渡期间改变。我试图阻止这种情况发生。有什么想法吗？

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

 < div id =pageContainerstyle =position：relative！important; height：100％;> 
< div data-role =pageid =test1> 
 
< div data-role =header> 
< h1>页标题< / h1> 
< / div><！ -  / header  - > 
 
< a id =page2link>至第2页< / a> 
 
< div data-role =content> 
< p>页面内容在这里。< / p> 
< / div><！ -  / content  - > 
 
< div data-role =footer> 
< h4>页脚< / h4> 
< / div><！ -  / footer  - > 
< / div><！ -  / page  - > 
 
< div data-role =pageid =test2style =height：568px> 
 
< div data-role =header> 
< h1> Page 2< / h1> 
< / div> 
 
< a id =page1link>至第1页< / a> 
 
< div data-role =contentstyle =height：50％;> 
< p style =height：80％; border：1px solid black;>这是第2页< / p> 
< / div><！ -  / content  - > 
 
< div data-role =footer> 
< h4>页脚< / h4> 
< / div> 
  

解决方案>

整个jsFiddle页面在Chrome浏览器首次访问时跳转，因此在使用前请按jsFiddle运行按钮正确加载。

EDIT：Answer and jsFiddle revised per comment section developments。

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

jsFiddle DEMO

解决方案是设置

b b b b b b b b b p>此外，对于该HTML底部的页面，您还有一个额外关闭div 以及不关闭网页。您的HTML中的头部不是jsFiddles所必需的，因为页面设置为 HTML5 ，您只需要使用导入文件（移动jQuery）管理资源按钮。

虽然在问题中列出了完整的百分比单位，

b
$ b

  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部分，我还固定了

：

 < div data-role =footerdata-position =fixed> 
  

除了将 footer 您也可以通过为每个具有相同值的网页添加 data-id 的额外设置，从而使其不具有动画效果。 p>

 < div data-role =footerdata-id =foodata-position = fixed> 
  

jsFiddle FOOTER 。

---

> 每次最近发现 jQuery 1.8.2 和 jQuery Mobile 1.2.0 隐藏的滚动条仍然会导致body元素跳转 ），这里是修改的jsFiddle示例：

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

关于此错误：

我刚刚发现使用jsFiddle与jQuery 1.8.2和jQuery Mobile 1.2.0不工作在使用期间 溢出 设置为 隐藏

浏览器滚动条在jQuery动画期间，阻止元素在页面更改的动画期间短暂跳过。

浏览器滚动条实际上​​是隐藏的，但元素

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

---

如果你好奇的如何在一个页面上有多个假页，请查看此 jsFiddle 无关的 SO回答这里 。

I am building a phonegap app that needs to scale to all resolutions, and am thus defining everything in terms of percentages. I'm also using a fixed header with a div I defined in Jquery as the contents.

The problem I have is that during the transition between pages, there is a 'stutter' because the page height changes during the transition. I'm trying to stop this from happening. Any thoughts?

I've created a sample below to really illustrate the point. 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>

解决方案

The entire jsFiddle page jumps on the very first visit in Chrome desktop browser, so press the jsFiddle RUN Button to load correctly before use.

EDIT: Answer and jsFiddle revised per comment section developments.

EDIT 2: jsFiddles now use jQuery 1.7.2 with jQuery Mobile 1.2.0 to fix Chrome Browser Bug.

jsFiddle DEMO

The solution is to set your styles in a CSS file and not the HTML section since the jQuery Mobile UI has it's own style themes via a style sheet too.

Also, you have an extra closing div for page at the bottom in that HTML as well as not closing the webpage. The head section in your HTML is not necessary for jsFiddles, as the page is setup for HTML5 and you just need to import files (mobile jQuery) into jsFiddle using the Manage Resources button.

Although you listed in your Question as complete percentage units, I've keep the pixels units as shown in your example, but those can be percentages as well.

CSS Settings:

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;
}

In your HTML section, I've also pinned the footer to the bottom of the page using data-position:

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

Besides pinning the footer to the bottom of the page, you can also have it not animate by adding an extra setting of data-id for each page that has the same value.

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

jsFiddle FOOTER.

---

EDIT 2: Per recent discovery of jQuery 1.8.2 and jQuery Mobile 1.2.0 bug seen in Chrome (hidden scrollbar still causes body elements to jump), here is a revised jsFiddle example:

jsFiddle Percentage Based with jQuery 1.7.2 and jQuery Mobile 1.2.0

About this bug:

I just discovered that using jsFiddle with jQuery 1.8.2 and jQuery Mobile 1.2.0 does not work as intended when overflow is set to hidden during use of a scrollBars function within that jsFiddle.

That function is to hide the browsers scrollbars during jQuery animations, preventing elements to briefly jump around during the animation period of page changes.

The browsers scrollbars are in fact hidden, but elements in the body section continue to "jump" as if the scrollbars are still present.

This does not happen when jsFiddle jQuery is set to 1.7.2.

---

If your curious how to have multiple psuedo pages on a single page, check out this jsFiddle for an unrelated SO Answer here.

这篇关于在使用Jquery Mobile进行转换期间停止页面调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！