mobile - Jquery mobile ui-btn-active 在导航栏中

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() 被假设将 ui-btn-active 设置为当前事件的页脚链接。 为此，我将 data-active-footer 属性添加到页面 div 并将 data-name 属性添加到导航栏元素。我正在根据页面中的 data-active-footer 搜索当前元素并应用 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”事件不包含页脚元素!!!

$(".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 更新页面的部分内容。因此，您可以使用此功能在每个页面上抓取并插入页脚。我现在正在尝试使用登录表单进行相同的操作，我在每个页面上都需要该表单。