1

对我来说，固定标题不会留在页面顶部。它位于一个页面顶部，该页面具有多个通过 javascript 添加的数字输入。当用户填写这些输入时，标题会按预期消失。但是，如果用户点击文本框，标题将重新出现在页面中间。用户必须点击两次才能将其移回页面顶部。

/编辑 这是另一条重要信息。当我在填写信息时使用下一个按钮移动到下一个文本框时，就会发生这种情况。

我在http://jsfiddle.net/7PZPy/1/创建了我的页面的 jsfiddle 示例。它不会向您显示错误，但它应该让您对页面的内容有一个很好的了解。*/

这是在 iPhone 和 iPad 上运行的 phonegap 应用程序。我正在使用 JQM 1.3.1。

我的研究使我尝试使用 jquery 整页模式和通过 CSS 固定位置。我还尝试删除不在 h1 标签内的所有内容。唉，只要数据位置设置为固定，标题就会在页面上下移动。我的html如下。请帮忙。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <link rel="stylesheet" href="css/jquery.css" />
        <link rel="stylesheet" type="text/css" href="css/ims-theme.css" />


        <script type="text/javascript"  src="js/jquery.js"></script>
        <script type="text/javascript"  src="js/jquery-migrate.js"></script>
        <script type="text/javascript"  src="js/jquerymobile.js"></script>
        <script type="text/javascript" src="cordova-2.6.0.js"></script>
        <script type="text/javascript" src="js/WaitingDialog.js"></script>
        <script type="text/javascript" src="js/UniqueIdentifier.js"></script>
        <script type="text/javascript" src="js/iti.js"></script>
        <title>IMS Field Support</title>
    </head>
    <body>
        <div data-role="page" id="invPage">
            <script type="text/javascript" src="js/inventory.js"></script>
            <div data-role="header" data-position="fixed">
                <h1>Inventory</h1>
                <div id="divAlert" style="display:none">
                    <a href="resolve.html" data-role="button" data-icon="alert" data-iconpos="notext" data-theme="c" data-inline="true" class="ui-btn-right" >Alert</a>
                </div>
            </div>
            <div id="inventoryContent" data-role="content">
            </div>
            <div data-role="footer" data-position="fixed">
                <div data-role="navbar">
                    <ul>
                        <li><a href="inventory.html" data-icon="grid" class="ui-btn-active ui-state-persist"> Inventory</a></li>
                        <li><a href="technician.html"  data-icon="edit" onclick="cacheInventoryPage();">Technician</a></li>
                        <li><a href="logout.html"  data-icon="delete" onclick="cacheInventoryPage();">Logout</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
</html>
4

3 回答 3

0

data-position="fixed"用于制作那些类似智能手机的标题，这些标题会随着身体点击或其他一些我不关心的事件而消失，

对于您想要的，您可以使用以下内容来设置标题的样式css：

#myheader{
 position: fixed !important;
 width:100%;
 top: 0px;
}

奇迹般有效

PS：!important覆盖任何 jquerymobile 尝试更改位置属性，可能不需要

于 2013-06-17T15:32:48.920 回答
0

您是否尝试过将所有三个属性都包含到您的标题中？它适用于我所有这些指定：

  • 数据位置=“固定”
  • 数据点击切换 =“假”
  • 数据更新页面填充 =“假”

这是代码：

<div data-role="header" data-position="fixed" data-tap-toggle="false" data-update-page-padding ="false"> </div>

希望这有帮助！

于 2013-06-18T03:27:06.603 回答
0

就我而言，我通过删除“位置：固定”的“顶部：0”来修复此错误

它的修复！奇怪我知道...

于 2021-09-13T12:06:50.833 回答