1

我有一个非常简单的 jQuery 移动页面，标题中有一个持久的导航栏，带有链接到“页面”（data-role="page"项目）的按钮。

一切正常，导航栏上的按钮会在您从一页导航到另一页时突出显示。

我的问题是我想在服务器端（在 PHP 中）动态生成这些导航栏。但是，当您使用 ajax 添加导航栏时， ui-btn-active和ui-state-persist类似乎无法正常工作，并且按钮不再按预期突出显示/保留。

假设我有一个页面，其中定义了导航栏：

<div data-role="page" id="settings" data-theme="a">

我可以演示的最简单的示例是替换如下内容：

var htmlContent = $("#settings").html();
$("#settings").html(htmlContent);

这样做会导致按钮不再保持其活动状态。就好像导航栏已经与 jQuery 的意识“脱节”了，我需要重新同步 DOM 或其他东西。

有趣的是，我认为导航栏本身也没有正确地持续存在。尽管在替换内容后它不会进出转换，但被替换页面上的页面内容出现在导航栏的后面（因此下面我的示例中的所有 br ）。

伙计，我希望这是有道理的:)

这是我的整个示例……在 head 标签中：

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

<script type="text/javascript" charset="utf-8">

function loadSomeHTML() {
    var htmlContent = $("#settings").html();
    $("#settings").html(htmlContent); 
}

</script>

以下是 body 标签的内容：

    <div data-role="page" id="welcome" data-theme="a">
    <div data-role="header" data-position="fixed" data-id="TestPersist">
        <div data-theme="" data-role="navbar" data-iconpos="top">
            <ul>
                <li>
                    <a href="#schedule" id="navbar_schedule" data-theme="" data-icon="grid" class="navlink">
                        Schedules
                    </a>
                </li>
                <li>
                    <a href="#settings" id="navbar_settings" data-theme="" data-icon="gear" class="navlink">
                        Settings
                    </a>
                </li>
            </ul>
        </div>
    </div><!-- /header -->
    <div data-role="content" data-theme="">
        This is the welcome page
    </div><!-- /content -->
</div>

<div data-role="page" id="schedule" data-theme="a">
    <div data-role="header" data-position="fixed" data-id="TestPersist">
        <div data-theme="" data-role="navbar" data-iconpos="top">
            <ul>
                <li>
                    <a href="#schedule" id="navbar_schedule" data-theme="" data-icon="grid" class="navlink ui-btn-active ui-state-persist">
                        Schedules
                    </a>
                </li>
                <li>
                    <a href="#settings" id="navbar_settings" data-theme="" data-icon="gear" class="navlink">
                        Settings
                    </a>
                </li>
            </ul>
        </div>
    </div><!-- /header -->
    <div data-role="content" data-theme="">
        This is the sched page
        <input type="button" value="Replace content in settings page" onclick="loadSomeHTML();">
    </div><!-- /content -->
</div>

<div data-role="page" id="settings" data-theme="a">
    <div data-role="header" data-position="fixed" data-id="TestPersist">
        <div data-theme="" data-role="navbar" data-iconpos="top">
            <ul>
                <li>
                    <a href="#schedule" id="navbar_schedule" data-theme="" data-icon="grid" class="navlink">
                        Schedules
                    </a>
                </li>
                <li>
                    <a href="#settings" id="navbar_settings" data-theme="" data-icon="gear" class="navlink ui-btn-active ui-state-persist">
                        Settings
                    </a>
                </li>
            </ul>
        </div>
    </div><!-- /header -->
    <div data-role="content" data-theme="">
        <br><br><br><br><br><br><br>This is the settings page
    </div><!-- /content -->
</div>
4

1 回答 1

1

不，不要做一堆标题:)

众所周知， jqm使动态更新数据属性变得困难，但它并没有那么糟糕。

如果有人感兴趣，这里有一个技巧——只要你愿意放弃 ui-btn-active 类并使用主题（你当然可以自定义），那么你可以在大约 2 分钟内启动并运行它.

必读：http: //jquerymobile.com/test/docs/buttons/buttons-options.html

显然，您需要将 yr 标题模板/标记作为静态页面包含在 yr 动态内容之上才能正常工作-我从您的问题中假设这是您想要做的，而不是包含用于非动态内容的 php，在在这种情况下，解决方案将是一个更明显的服务器端解决方案。

不管怎样

示例导航栏链接的 html 标记

<li><a href="javascript:;" id="nav_billing" class="panes" rel="#billing" data-role="button" data-theme="b" data-icon="minus" data-iconpos="right">Billing Info</a></li>
<li><a href="javascript:;" id="nav_shipping" class="panes" rel="#shipping" data-icon="minus" data-role="button" data-iconpos="right">Shipping Info</a></li>
<li><a href="javascript:;" id="nav_payment" class="panes" rel="#checkout" data-icon="minus" data-role="button" data-iconpos="right">Payment Info</a></li>

这里要看到的重要一点是，您将为活动类分配一个数据主题，而不是分配一个活动类，即 ui-btn-active，并确保我将 data-role="button" 添加到每个链接也是如此:)

现在是文档末尾的部分：

$( document ).bind( "mobileinit", function(){
$.mobile.button.prototype.options.initSelector = ".panes";
});

是的，我们在这里所做的只是自动初始化这些按钮，所以我们可以使用这样的东西：

$('a').buttonMarkup({ theme: "a" });

剩下的只是把点击器放在一起（注意 on.click 功能）：

// 100% untested and sure to not work as is 
$(".panes").on('click', function () {

// turn our clicked link into theme b aka active
$(this).buttonMarkup({ theme: "b" });

// works nice with icons too
$(this).buttonMarkup({ icon: "check" });

// grab all sibling links and turn them to theme a
// this probably won't work without accounting for the actual markup :)
$(this).siblings().buttonMarkup({ theme: "a" }); 

});
于 2012-11-08T10:24:40.330 回答