网页过渡期间jQuery Mobile的页面大小调整 [英] Jquery Mobile page resizing during page transition
问题描述
我正在开发使用jQuery Mobile和PhoneGap的一个应用程序。我有这个问题是，当我做一个页面转换，进入的页面首先出现错误（没有在正确的位置，也没有大小合适的DOM元素），那么一旦过渡完成后，内容调整大小并移动到正确的位置。 （此外，该网页转换了也显示不正确它移出前）。我曾经同时使用渐变和幻灯片切换测试这（我想有幻灯片切换最终）。
下面是一个的jsfiddle说明问题：
http://jsfiddle.net/fz7qs/2/
我还使用一个div作为页面的容器，使整个页面未转换一次，但只是在页面div容器。
我是使用CSS百分比pretty的每样东西（高度，宽度，利润等），使应用程序将扩展到不同的设备大小。此外，我使用JavaScript来集中一些元素（射击pageshow事件）。我认为，这些百分比是问题的一部分。我构建了一个桌面浏览器一个简单的测试（取出PhoneGap的），并设置一个固定高度的页面容器。这似乎解决问题，但是当我试图在我的手机，这个问题仍然存在。
在应用程序中的每个页面使用$ .mobile.loadPage ploaded到DOM $ P $（）。我想如果我preLOAD他们，这个比例高是相对于父（页面div容器）和转换应该是正确的。
展望jQuery Mobile的更多，我发现，在过渡期间，在页面的高度设置为空字符串。我试图注释掉此行只是为了测试，看它是否将与百分比高度。再次，它的工作在我的桌面上的测试，而不是在手机上。
我使用的PhoneGap的Android（API等级为8 - 的Android 2.2）上三星Galaxy Nexus的测试
。有没有什么办法让CSS和同时保持百分比计算值的页面转换之前应用JavaScript的定位是什么？
的index.html
＆LT;身体GT;
＆LT;！ - 在每个页面上标题 - ＆GT;
＆LT; DIV ID =mainHeader＆gt;这是一个标题和LT; / DIV＆GT;
＆LT;！ - 网页内容 - ＆GT;
＆LT; DIV ID =pageContainer＆GT;
＆LT; DIV数据角色=页面＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
page1.html
＆LT;身体GT;
＆LT; DIV数据角色=页面ID =第1页＆GT;
＆LT; DIV CLASS =子报＆GT;
＆LT; DIV CLASS =后退按钮＆GT;＆LT; / DIV＆GT;
＆LT; DIV CLASS =subheaderText＆gt;设置＆LT; / DIV＆GT;
＆LT; DIV CLASS =帮助按钮＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
相关CSS
#pageContainer {
溢出：隐藏;
宽度：100％;
身高：86.772486772486772486772486772487％;
}
.UI移动[数据角色=页面] {
最小高度：0px重要;！
颜色：白色;
位置：亲属;
宽度：100％;
高度：100％;
背景：＃868a73;
}
.subheader {
宽度：100％;
身高：10.16260162601626016260162601626％;
背景颜色：＃000;
显示：inline-block的;
文本对齐：中心;
位置：亲属;
}
.backButton {
背景：网址（图像/ back_button.png）;
背景尺寸：包含;
背景重复：不重复;
显示：inline-block的;
浮动：左;
宽度：8.888888888888888888888888888889％;
高度：52％;
保证金左：5.555555555555555555555555555556％;
}
.subheaderText {
颜色：#FFF;
字体大小：2.45em;
字体重量：大胆的;
显示：inline-block的;
}
.helpButton {
浮动：权利;
背景：网址（图像/ help_button.png）;
背景尺寸：包含;
背景重复：不重复;
显示：inline-block的;
宽度：8.888888888888888888888888888889％;
高度：64％;
右：5.555555555555555555555555555556％;
}
首先，你可以让你的HTML看起来像jQuery Mobile的教程页面。 你需要有HTML结构如下：
＆LT; DIV数据角色=页面＆GT;
＆LT; DIV数据角色=头＆GT;
＆LT; H1＆gt;页面标题＆LT; / H1＆GT;
＆LT; / DIV＆GT;＆LT;！ - /头 - ＆GT;
＆LT; DIV数据角色=内容＆GT;
＆LT; P＆GT;页的内容去此处＆lt; / P＆GT;
＆LT; / DIV＆GT;＆LT;！ - /内容 - ＆GT;
＆LT; DIV数据角色=页脚＆GT;
＆LT; H4＆gt;页面页脚＆LT; / H4＆GT;
＆LT; / DIV＆GT;＆LT;！ - /页脚 - ＆GT;
取上 jQuery Mobile的页面解剖看看。
I'm developing an app using Jquery Mobile and Phonegap. The issue that I have is that when I do a page transition, the incoming page first appears incorrectly (DOM elements not in the right position nor the right size), then once the transition is complete, the elements resize and move to the correct position. (Also, the page transitioning out also appears incorrectly before it moves out). I have tested this using both fade and slide transitions (I would like to have slide transitions ultimately).
Here is a jsFiddle illustrating the problem:
http://jsfiddle.net/fz7qs/2/
I am also using a div as a page container so that the entire page is not transitioning at once, but just the page container div.
I am using css percentages for pretty much everything (heights, widths, margins, etc) so that the app will scale to different device sizes. Additionally, I am using javascript to center some elements (fired on pageshow event). I think these percentages are part of the problem. I constructed a simple test on a desktop browser (taking out phonegap) and set a fixed height to the page container. This seemed to fix the problem, but when I tried it on my phone, the issue was still there.
Each page in the app is preloaded into the DOM using $.mobile.loadPage(). I figured if I preload them, the percentage height would be relative to the parent (the page container div) and the transitions should look correct.
Looking into Jquery Mobile further, I found that during a transition, the height of the page was set to an empty string. I tried to comment out this line just to test to see if it would work with percentage heights. Again, it worked on my desktop test, but not on the phone.
I am using Android phonegap (API level 8 - Android 2.2) on a Samsung Galaxy Nexus to test.
Is there any way to have the css and javascript positioning applied before the page transitions while keeping percentage based values?
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>
relevant 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%;
}
First of all you can make your html to look like jquery mobile tutorials pages. you need to have html structure like:
<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 -->
Take a look on jquery mobile page anatomy.
这篇关于网页过渡期间jQuery Mobile的页面大小调整的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
