Question

我有一个非常简单的jQuery移动页面，标题中有一个持久的导航栏，其中的按钮链接到“pages”（ 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或其他东西。

值得注意的是，我认为导航栏本身也不能保持正常;虽然在替换内容后它没有进出过渡，但被替换页面上的页面内容会出现在导航栏后面（因此我的示例中的所有内容都在下面）。

伙计，我希望这是有道理的：）

这是我的整个样本......在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>

Answer 1

不要做一堆标题:)

jqm 已知很难动态更新数据属性，但它并没有那么糟糕。

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

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

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

anywayyys

示例导航栏链接的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 =“按钮“也链接到每个链接：）

现在对于文档末尾的部分：

$( 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" }); });

jQuery Mobile：动态生成的导航栏按钮不会保持其活动状态

1 个答案: