Question

我一直试图让这个工作4天，但没有运气。

我有一个非常简单的jquery移动应用程序。该应用程序有一个标题，内容和页脚。页脚是在'pagecreate'事件上动态生成的，因为它始终是相同的，我不想在每个页面中都有它的HTML。

所以我这样做：

$(document).delegate('[data-role="page"]', 'pagecreate', function (e) {
DrawHeader($(this));
DrawFooter($(this));
SetFooterEvents($(this));
SetActiveFooter($(this));

}）;

DrawHeader（）和DrawFooter（）只是将页眉div预先添加到页面并附加页脚div。 SetFooterEvents（）设置页脚导航栏按钮的onclick事件，并且SetActiveFooter（）为SUPPOSED，以将ui-btn-active设置为当前活动的页脚链接。为此，我将data-active-footer属性添加到页面div，将data-name属性添加到navbar元素。我正在根据页面中的数据活动页脚搜索当前元素并应用ui-btn-active类。

function SetActiveFooter(page) {
page.children('div[data-role="footer"]')
    .find('a[data-name="' + page
        .attr("data-active-footer") + '"]').addClass("ui-btn-active");}

到目前为止一切顺利。

现在，假设我已经更改为页面并且导航栏已点亮（它已成功收到ui-btn-active类），并且我点击了上一页，导航栏中点亮的项目没有变化背部！
如果我再次点击页面（即：更改为第二页[更正亮]，更改回第一页[第二页仍然亮起]，然后再次点击第一页）它会点亮导航栏按钮

我发现当我在'pagecreate'事件中更改当前页面的导航栏时，jqm也更改了上一页的导航栏。我试图使用'pageshow'事件覆盖这种行为，也就是说，尝试将ui-btn-active类应用于导航栏中的当前元素，但问题是$（this）和e.currentTarget对象在'pageshow'事件不包含FOOTER ELEMENT !!!

$(".ui-page").live('pageshow', function (e) {
alert($(this).children('div').length); // returns 2!
alert($(this).children('div[data-role="footer"]').length); //returns 0

alert($(e.currentTarget).children('div').length); // returns 2!
alert($(e.currentTarget).children('div[data-role="footer"]').length); //returns 0});

有什么想法吗？！

感谢。

Answer 1

在深入研究更多细节之前，请尝试将 .ui-state-persist 与 .ui-btn-active

一起添加

这样可确保在更改页面时活动按钮保持活动状态且页脚相同。另外请确保所有页脚都具有相同的 data-id 属性。

在旁注：检查最新的blog post有关jqm 1.1的即将推出的功能 - 它将包括一个获取链接实用程序，它允许ajax更新页面的部分。因此，您可以使用此功能在每个页面上抓取并插入页脚。我现在正在尝试使用登录表单，我需要在每个页面上使用。

Answer 2

您是否尝试过“ui-state-persist”？

<div data-role="navbar" data-iconpos="top">
    <ul>
        <li><a href="#page1" data-icon="home" class="ui-btn-active ui-state-persist">Home</a></li>
        <li><a href="#page2" data-icon="star">Favorite</a></li>
    </ul>
</div>

Answer 3

我仍然不知道为什么但是jqm会将页脚从页面移动到页面，尽管我为每个页面分配了一个新的页脚。也许是因为我为所有人设置了相同的ID。

无论如何，我使用此解决方法来解决问题：在'pagebeforeshow'事件中，我将要激活的按钮设置为文档中的所有页脚。我为每个导航栏按钮设置了一个特殊的数据名称属性，在将其从其他项目中删除后，我给它“ui-btn-active”类。

var $footers = $(document).find('div[data-role="footer"]');
$footers.find('a').removeClass("ui-btn-active");
$footers.find('a[data-name="' + page
        .attr("data-active-footer") + '"]').addClass("ui-btn-active");

Jquery mobile ui-btn-active in navbar

3 个答案: