JQueryMobile 淡出导航栏

Posted 2023-03-15

【中文标题】JQueryMobile 淡出导航栏

【英文标题】：JQueryMobile Fading NavBar

【发布时间】：2012-03-22 19:50:06

【问题描述】：

有谁知道如何阻止固定导航栏在我每次滚动时淡入淡出。我正在使用带有以下代码的 jquerymobile 1.0.1，但我无法忍受导航栏如何淡入淡出：

<div data-role="footer" data-id="foo1" data-position="fixed">
    <div data-role="navbar">
        <ul>
            <li><a href="footer-persist-a.html" class="ui-btn-active ui-state-persist">Friends</a></li>
            <li><a href="footer-persist-b.html">Albums</a></li>
            <li><a href="footer-persist-c.html">Emails</a></li>
            <li><a href="footer-persist-d.html">Emails</a></li>
            <li><a href="footer-persist-e.html">Emails</a></li>

        </ul>
    </div><!-- /navbar -->
</div><!-- /footer -->

我不只是想要“切换”修复。我希望它在 100% 的时间内保持 100% 可见。想法？

【参考方案1】：

对于 JQM 1.1，您实际上在页脚设置了 data-tap-toggle="false"。

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

我喜欢这样做来禁用每个页面以及每个固定工具栏、页眉或页脚中的 tapToggle：

$(document).on('pageinit','[data-role=page]', function()
    $('[data-position=fixed]').fixedtoolbar( tapToggle:false );
);

这样我就不必一遍又一遍地输入 data-tap-toggle="false"。

那么如果你使用 JQM 1.0.1 的话：

$('[data-role=page]').live('pageinit', function()
    $.mobile.fixedToolbars.setTouchToggleEnabled(false);
);

【讨论】：

这在用户无法单击切换的意义上起作用，但当我滚动页面时它仍然消失。我只是希望它始终完全可见。有什么想法吗？

【参考方案2】：

这是 JQM 1.0.x 用户的普遍不满。他们的开发人员切换了您在其最新版本中引用的动态定位行为。从 JQM 1.1 开始，它们使用不会褪色的真正固定工具栏。 JQM 的稳定版本应该很快就会发布。在那之前你可以使用 1.1-rc1 版本

在旧版本的 JQM 中有一种解决方案，但这只适用于 ios 5：

$(document).bind("mobileinit", function()
  $.mobile.touchOverflowEnabled = true ;
);

【参考方案3】：

您可以将data-tap-toggle="true" 属性添加到data-role="footer" 元素以禁用点击淡入淡出功能：

tapToggle 布尔值

默认：true

启用或禁用用户切换工具栏可见性的能力 点击屏幕（或点击，鼠标用户）。这个选项也是 作为数据属性公开：data-tap-toggle=""true""

$("[data-role=header]").fixedtoolbar( tapToggle: true );注意：这个 行为以前可配置如下，但从 1.1 版开始 不再支持此语法：

$.mobile.fixedToolbars .setTouchToggleEnabled(false);

来源：http://jquerymobile.com/demos/1.1.0-rc.1/docs/toolbars/bars-fixed-options.html

这应该使您的工具栏始终保持不变。

【讨论】：

这在用户无法单击切换的意义上起作用，但当我滚动页面时它仍然消失。我只是希望它始终完全可见。有什么想法吗？

您使用的是什么版本的 jQuery Mobile？