动态更改导航栏

时间:2013-04-02 14:20:31

标签: jquery jquery-mobile markup jquery-mobile-navbar

当用户更改设置时,我想更改主页面上的导航栏。我有:

<section id="main" data-role="page">
<nav data-role="navbar">
   <ul></ul>
</nav>
</section>

我使用JavaScript填充无序列表,但它失去了它的CSS样式。

问:当用户从“设置”页面返回并再次看到主页时,我用什么事件来确保导航栏的样式正确?

问:在用户按下“返回主页”按钮后,我应该触发什么事件来刷新主页?

编辑:

实际上,该列表也在pageinit上填充。

1 个答案:

答案 0 :(得分:2)

Q1。

如果您在pagebeforecreate,pagecreate或pageinit期间填充导航栏,则无需为其设置样式。如果您在以后的活动中这样做,那么就这样做:

$('#pageID').trigger('pagecreate');

这将触发整页重新打印,包括页脚和标题。如果您只需要重新设置页面内容,请使用:

$('#pageID').trigger('create');

在我的另一篇文章中详细了解它: https://stackoverflow.com/a/14550417/1848600

Q2。

在这种情况下,您可以阻止主页兑现,那就是那样。

官方文档: http://jquerymobile.com/demos/1.2.0/docs/pages/page-cache.html

要防止网页兑现使用属性 data-dom-cache =“false”

<div data-role="page" id="dontCacheMe" data-dom-cache="false">

但遗憾的是,如果主页面是要显示的第一页,或者至少是第一页HTML的一部分,则无法阻止兑现。

在这种情况下,清除每个具有生成内容的元素并再次触发页面创建。

编辑:

我忘了提。动态添加导航栏元素是错误的,并且无法按预期工作。前段时间我创建了一个如何动态添加导航栏元素的示例, 你可以在这里找到它: http://jsfiddle.net/Gajotres/V6nHp/

可以在我的其他 ARTICLE 中找到此更多内容,或者可以找到 HERE