在 Jquery mobile 中，页眉和页脚总是隐藏，在页面内单击时？

Posted 2023-05-09

【中文标题】在 Jquery mobile 中，页眉和页脚总是隐藏，在页面内单击时？

【英文标题】：In Jquery mobile, Header and footers are always hiding, when clicking inside the page?

【发布时间】：2011-10-19 00:12:42

【问题描述】：

我需要，页眉和页脚总是固定位置。

我不想像下面的 url 页面。我该怎么办？。帮我........ http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/toolbars/bars-fullscreen.html

（在上面的网址中，如果您在页面内单击。页眉和页脚将隐藏）。我不想这样

【参考方案1】：

如果有人仍然发现这个问题并意识到上述方法不再有效，就像我所做的那样，那么正确的方法（今天是正确的，2012 年 5 月 23 日）现在是：

<div data-role="footer" data-position="fixed" data-tap-toggle="false">

【讨论】：

像魅力一样工作，应用程序看起来更“少错误”，没有闪烁，谢谢！

也许应该是默认的

效果很好。切换复选框隐藏页眉/页脚，这就像一个魅力。似乎也取消了点击延迟。

有趣的是，这包含在 1.2 文档中，但在 1.4.5 演示文档中完全省略了。 jQuery Mobile 文档确实需要重写，至少对于最新版本。非常感谢，你拯救了我的一天

【参考方案2】：

使用data-tap-toggle="false" 和data-hide-during-focus=""。

第二个会阻止固定工具栏隐藏when you click an input。

【讨论】：

非常适合我。其他解决方案都失败了。谢谢

【参考方案3】：

我设法使用固定的页脚来做到这一点：

<div data-role="footer" data-position="fixed"> 
    <div data-role="navbar"> 
        <ul> 
            <li></li> 
            <li></li> 
            <li></li> 
        </ul> 
    </div> 
</div>

还有一些javascript：

<script type="text/javascript">
    $('#containerPage').live('pagecreate', function (event) 

        $.fixedToolbars.setTouchToggleEnabled(false);

    );
</script>

#containerPage 是我的主页：

<div data-role="page" id="containerPage" data-fullscreen="true">
..
</div>

我已经使用 jQuery Mobile v1.0rc1 尝试并测试了这个解决方案。 2011 年 10 月 13 日下载

【讨论】：

感谢 LeftyX... 我评论了“$.fixedToolbars.toggle(stateBefore);” jquery.mobile-1.0a4.1.min.js 中的语句。它也有效......但你的答案对我来说是安全的。谢谢

【参考方案4】：

data-tap-toggle="false" 救了我同样的头痛！

这是一个很好的功能。我很惊讶我在文档中错过了它。

【讨论】：

答案和this one一样。。。？？？

【参考方案5】：

data-tap-toggle="false" 适用于 jQueryMobile 1.1.0 和 PhoneGap 2.2.0

【参考方案6】：

我意识到这个问题已经过时了，但它并没有 100% 帮助我。以下是我经过一些完善的谷歌搜索后得出的解决方案，决定将其发布在这里，因为这是我的第一个结果。

我的问题是，无论是否使用默认行为，点击输入时页眉和页脚都会隐藏。我正在使用惊人的 DateBox。

使用 data-tap-toggle='false' 手动更新 DOM 页眉/页脚没有任何作用，但这会节省我一些时间：

$("[data-role=header]").fixedtoolbar( tapToggleBlacklist: "input[data-role=datebox]" );
$("[data-role=footer]").fixedtoolbar( tapToggleBlacklist: "input[data-role=datebox]" );

无论出于何种原因，以这种方式禁用点击切换既解决了我的问题，也向我展示了在大量页面上禁用它的简写。

【讨论】：

你可以试试data-hide-during-focus=""。见：api.jquerymobile.com/toolbar/#option-hideDuringFocus

【参考方案7】：

data-hide-during-focus="" 仅用于需要焦点的输入类型，如果单击页面中的任意位置并出现问题，则需要使用data-tap-toggle="false"。把这个只放在固定位置的div里

<div data-role="footer" data-position="fixed" 
   data-tap-toggle="false" data-hide-during-focus="" data-theme="b"></div>

【参考方案8】：

我正在使用data-hide-during-focus=""，它正在工作！