1

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

这是一个重现该问题的演示小提琴： //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>

我按照文档中演示的说明进行操作的说明（似乎并不完整）并将页脚放在页面容器之外。我尝试添加.ui-state-persist到第一个链接和两个链接，但它没有产生任何效果，因为即使演示也无法正常工作，我不知道如何继续。

我将不胜感激有关如何ui-btn-active为单击的链接保留课程的任何见解。

4

2 回答 2

3

好吧，我在 jQM 更新的演示页面上找到了这个。添加.ui-btn-active外部固定工具栏取决于data-role=page'sdata-title属性。

<div data-role="page" id="page-1" data-title="Page 1">

导航栏按钮文本，应匹配data-title以确定应使用 更新哪个按钮.ui-btn-active，以及更新data-role=header标题。

演示

$(document).on("pageinit", function () {
    $("[data-role='navbar']").navbar();
    $("[data-role='header'], [data-role='footer']").toolbar();
});

// Update the contents of the toolbars
$(document).on("pageshow", "[data-role='page']", function () {
    // Each of the four pages in this demo has a data-title attribute
    // which value is equal to the text of the nav button
    // For example, on first page: <div data-role="page" data-title="Info">
    var current = $(this).jqmData("title");
    // Change the heading
    $("[data-role='header'] h1").text(current);
    // Remove active class from nav buttons
    $("[data-role='navbar'] a.ui-btn-active").removeClass("ui-btn-active");
    // Add active class to current nav button
    $("[data-role='navbar'] a").each(function () {
        if ($(this).text() === current) {
            $(this).addClass("ui-btn-active");
        }
    });
});

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

于 2013-10-25T08:34:42.340 回答
1

对于导航栏中的链接，我遇到了同样的问题。这非常令人沮丧。我启动了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/

于 2014-12-25T04:11:31.840 回答