7

我正在使用 Jquery Mobile 和 Phonegap 开发一个应用程序。我遇到的问题是，当我进行页面转换时，传入的页面首先出现不正确（DOM 元素的位置不正确，大小也不正确），然后一旦转换完成，元素会调整大小并移动到正确的位置. （此外，移出的页面在移出之前也会出现错误）。我已经使用淡入淡出和幻灯片过渡对此进行了测试（我希望最终有幻灯片过渡）。

这是一个说明问题的 jsFiddle：http:
//jsfiddle.net/fz7qs/2/

我还使用 div 作为页面容器，以便整个页面不会立即转换，而只是页面容器 div。

我对几乎所有东西（高度、宽度、边距等）都使用 css 百分比，以便应用程序可以扩展到不同的设备尺寸。此外，我正在使用 javascript 来居中某些元素（在 pageshow 事件中触发）。我认为这些百分比是问题的一部分。我在桌面浏览器上构建了一个简单的测试（去掉了phonegap），并为页面容器设置了一个固定的高度。这似乎解决了问题，但是当我在手机上尝试时，问题仍然存在。

应用程序中的每个页面都使用 $.mobile.loadPage() 预加载到 DOM 中。我想如果我预加载它们，百分比高度将相对于父级（页面容器 div），并且过渡应该看起来正确。

进一步查看 Jquery Mobile，我发现在过渡期间，页面的高度被设置为空字符串。我试图注释掉这一行只是为了测试它是否适用于百分比高度。同样，它适用于我的桌面测试，但不适用于手机。

我在三星 Galaxy Nexus 上使用 Android phonegap（API 级别 8 - Android 2.2）进行测试。

有没有办法在页面转换之前应用 css 和 javascript 定位，同时保持基于百分比的值？

索引.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%;
}
4

1 回答 1

1

首先，您可以使您的 html 看起来像 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-17T19:53:29.940 回答