Question

我的jquery移动应用程序中有一个固定页眉和页脚的问题。如果我点击屏幕固定的页眉和页脚不再固定他们会变得流离失所但我不知道如何解决它。有什么意见可以解决这个bug吗？我＆＃39;我创建了一个fiddle。

    <div style="height:100%; width:100%" class="ui-page" data-role="page" data-position="fixed" id="main">
        <div style="height:10%"" data-role="header" data-position="fixed"> 
            <a class="ui-btn-left" name="backo" data-icon="back" data-rel="button" ></a>

        <h1>title</h1>
        </div>
        <div style="height:100%; width:100%" data-role="content" id="container">
<ul data-role="listview" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
    <div style="width:95%;padding-right:5%;" id="chatOutput">

    </div>
    </ul>
        <div style="height:15%; width:100%;background-color:#e9eaed;border: 0px;border-color: transparent;" data-role="footer" data-position="fixed">

    <div style="width:96%;padding-right:2%;padding-left:2%" class="ui-grid-a">
        <div style="height:100%;width:80%" class="ui-block-a"><input type="text" id="chatText" paceholder="type your text here"></div>
        <div style="height:100%;width:20%" class="ui-block-b"><button style="font-size:90%" class="ui-btn ui-shadow ui-icon-carat-r" id="chatSend">send</button></div></div>

      </div>
        </div>
        </div>

编辑：我发现了这个：$("[data-role=header]").toolbar({ tapToggle: false });，它运行正常。

Answer 1

在页眉和页脚div中添加data-tap-toggle="false"。

这将阻止在点击/单击

时切换页眉/页脚

Answer 2

改变这个：

<div style="height:10%"" data-role="header" data-position="fixed">

对此：

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

而且，改变这个：

<div style="height:15%; width:100%;background-color:#e9eaed;border: 0px;border-color: transparent;" data-role="footer" data-position="fixed">

对此：

<div style="background-color:#e9eaed;border: 0px;border-color: transparent;" data-role="footer" data-position="fixed">

Updated jsfiddle

Updated jsfiddle with persistent message box

一些旁注：

内联样式通常不是一个好主意;改为使用样式表。
阻止元素如＆＃39; div＆＃39;不需要宽度：100％;它们将默认扩展为全宽。
使用内置的浏览器开发工具或在线工具（如validator.w3.org）验证您的html是否存在错误

固定的页眉和页脚在点击时变为移位

2 个答案: