Question

我正面临着jQuery Mobile最新测试版的问题。我正在尝试实现一个固定的持久页脚导航栏，持久性部分正在工作，但每当我单击一个链接并导航到另一个页面时，ui-btn-active类就会丢失，并且没有选择任何链接。

这是一个再现问题的演示小提琴：http://jsfiddle.net/koala_dev/DgdMg/2/

这是完整的标记：

<!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>

我按照the demos in the docs的指示（似乎不完整）并将页脚放在页面容器之外。我尝试将.ui-state-persist添加到第一个链接和两个链接但它没有产生任何效果，因为即使演示无法正常工作，我也不确定如何继续。

如果您对点击的链接保留ui-btn-active课程，我将不胜感激。

Answer 1

好吧，我在jQM上更新了演示页面。为外部固定工具栏添加.ui-btn-active取决于data-role=page的{{1}}属性。

data-title

导航栏按钮文字应与<div data-role="page" id="page-1" data-title="Page 1">匹配，以确定应使用data-title更新哪个按钮，以及更新.ui-btn-active标题。

<强> Demo

data-role=header

来源： http://view.jquerymobile.com/1.4.0-rc.1/dist/demos/toolbar-fixed-persistent/

Answer 2

我对导航栏中的链接也有同样的问题。这非常令人沮丧。我解雇了firebug并调试了jqm。我最终修补了jquery移动代码，如下所示：

在jquery.mobile-1.4.0.js

中

自：

$navbtns.removeClass( $.mobile.activeBtnClass );
activeBtn.addClass( $.mobile.activeBtnClass );

要：

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

我在这里缩小了jqm：http://jscompress.com/

JQM 1.4 beta持久性导航栏不保持链接的活动状态类

2 个答案: