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

我一直试图让这个工作4天，没有运气。Jquery mobile ui-btn-active在导航栏中

我有一个非常简单的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属性添加到导航栏元素。我正在根据页面中的数据活动页脚搜索当前元素并应用ui-btn活动类。

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类），并且我正在点击上一页，导航栏中亮起的项目不会换回来！
如果我再次点击页面（即：更改为第二页[corrent lit]，更改回第一页[第二页仍然点亮]，然后再次点击第一页），它会点亮导航栏按钮。

我发现当我更改'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});

任何想法？

谢谢。

来源

2012-01-14 Dror ' Yitzhakov

我仍然不知道为什么，但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");

来源

2012-01-17 15:43:14

之前钻研更详细，请尝试添加一起的.ui状态，坚持的.ui-BTN-活跃

这可以确保主动按钮保持活跃，当你changePage和页脚是相同。另外请确保，所有页脚都具有相同的data-id属性。

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

来源

2012-01-15 19:21:24 frequent

您是否尝试过“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>

来源

2012-07-12 16:31:45

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

回答

相关问题