Jquery mobile JQM 1.4 beta永久导航栏未保持链接的活动状态类_Jquery Mobile

Jquery mobile JQM 1.4 beta永久导航栏未保持链接的活动状态类

jquery-mobile

Jquery mobile JQM 1.4 beta永久导航栏未保持链接的活动状态类,jquery-mobile,Jquery Mobile,我面临jQuery Mobile最新测试版的问题。我正在尝试实现一个固定的永久性页脚导航栏，永久性部分正在工作，但每当我单击一个链接并导航到另一个页面时，ui btn active类将丢失，并且没有选择任何链接这是一个复制问题的演示小提琴：下面是完整的标记： <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.

我面临jQuery Mobile最新测试版的问题。我正在尝试实现一个固定的永久性页脚导航栏，永久性部分正在工作，但每当我单击一个链接并导航到另一个页面时，

ui btn active

类将丢失，并且没有选择任何链接

这是一个复制问题的演示小提琴：

下面是完整的标记：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0-beta.1/jquery.mobile.structure-1.4.0-beta.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.0-beta.1/jquery.mobile-1.4.0-beta.1.min.js"></script>
    <script>
        $(function() {
            $("[data-role='header'],[data-role='footer']").toolbar();
            $.mobile.window.triggerHandler("throttledresize");
        });
    </script>
</head>
<body>
    <div data-role="header" data-position="fixed" data-id="header">
            <h1>My fixed header</h1>
    </div>
    <div data-role="page" id="page-1">
        <div data-role="content">
            <p>Page 1 content goes here.</p>
        </div>
    </div>
    <!-- /page -->
    <div data-role="page" id="page-2">
        <div data-role="content">
            <p>Page 2 content goes here.</p>
        </div>
    </div>
    <!-- /page -->
    <div data-role="footer" data-position="fixed" data-id="footer">
        <div data-role="navbar">
            <ul>
                <li><a href="#page-1" class="ui-btn-active ui-state-persist">Page 1</a>
                </li>
                <li><a href="#page-2">Page 2</a>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>


$（函数（）{
$（“[data role='header']，[data role='footer']”）工具栏（）；
$.mobile.window.triggerHandler（“throttleResize”）；
});
我的固定头球
第1页内容在这里
第2页内容在这里

我按照中的说明（似乎不完整）将页脚放在页面容器外。我尝试将

.ui state persist

添加到第一个链接和两个链接中，但没有产生任何效果，因为即使演示也无法正常工作，我不确定如何继续

如果您能了解如何保持点击链接的

ui btn处于活动状态，我将不胜感激。
我在jQM更新的演示页面上找到了这一点。为外部固定工具栏添加.ui btn active
取决于数据角色=页面
的数据标题
属性
<div data-role="page" id="page-1" data-title="Page 1">

来源：
我在jQM更新的演示页面上找到了这个。为外部固定工具栏添加.ui btn active
取决于数据角色=页面
的数据标题
属性
<div data-role="page" id="page-1" data-title="Page 1">

来源：
对于导航栏中的链接，我也有同样的问题。这非常令人沮丧。我启动了firebug并调试了jqm。我最后对jquery移动代码进行了如下修补：
在jquery.mobile-1.4.0.js中
发件人：
致：
我在这里缩小了jqm：
我在导航栏中的链接也遇到了同样的问题。这非常令人沮丧。我启动了firebug并调试了jqm。我最后对jquery移动代码进行了如下修补：
在jquery.mobile-1.4.0.js中
发件人：
致：
我在这里缩小了jqm:
看起来navbar小部件不是100%完整的。看起来navbar小部件不是100%完成的。谢谢你。我想这意味着活动状态将无法满足持久工具栏的要求，需要进行“手动”更新。JQM团队将重构navbar小部件，更不用说外部固定工具栏仍处于测试阶段@koala_devt这个问题（这似乎是一个jQuery移动问题）是jQM在某些事件（可能是pageshow
）上删除了UIBTN active
类，因此您看到的是按钮在单击时变为活动，在页面显示时变为短暂不活动，然后再次变为活动。它肯定会破坏无缝视觉连续性的效果。@user1167442 navbar小部件还不成熟，JQM团队正在对其进行重构。此外，这可能是一个与外部固定工具栏相关的问题，1.4I中新增的一个功能可以解决这个问题。我重新设置了ui-btn-active
的样式，使其看起来与ui-navbar ui-btn-a
相同，然后创建了一个名为btn-active1
的类，并将其添加到pagebeforeshow
和pageshow
上。它工作完美无瑕。碰巧在这个项目上，我不需要在任何其他地方使用ui-btn-active
，所以这里的解决方法很简单。谢谢。我想这意味着活动状态将无法满足持久工具栏的要求，需要进行“手动”更新。JQM团队将重构navbar小部件，更不用说外部固定工具栏仍处于测试阶段@koala_devt这个问题（这似乎是一个jQuery移动问题）是jQM在某些事件（可能是pageshow
）上删除了UIBTN active
类，因此您看到的是按钮在单击时变为活动，在页面显示时变为短暂不活动，然后再次变为活动。它肯定会破坏无缝视觉连续性的效果。@user1167442 navbar小部件还不成熟，JQM团队正在对其进行重构。此外，这可能是一个与外部固定工具栏相关的问题，1.4I中新增的一个功能可以解决这个问题。我重新设置了ui-btn-active
的样式，使其看起来与ui-navbar ui-btn-a
相同，然后创建了一个名为btn-active1
的类，并将其添加到pagebeforeshow
和pageshow
上。它工作完美无瑕。碰巧在这个项目上，我不需要ui-btn-active任何其他地方，所以这里的解决方法很简单。
$navbtns.removeClass( $.mobile.activeBtnClass );
activeBtn.addClass( $.mobile.activeBtnClass );

if ( !($navbtns.filter( ".ui-state-persist" ) ) ) {
    $navbtns.removeClass( $.mobile.activeBtnClass );
    activeBtn.addClass( $.mobile.activeBtnClass );
}