2

我在我的多页文档中动态创建导航栏。我的问题是导航栏在文档的第一页上没有得到增强，但是 - 奇怪的是 - 在所有其他页面上。更重要的是，如果我在实际第一页之前的代码中添加一个页面并设置一个事件以转发到“实际”第一页，一切正常。导航栏的代码现在到处都是一样的：

<div data-role="page" id="stdPage" data-theme="b">

    <div data-role="content">
        ...
    </div><!-- /content -->

    <div data-role="footer" data-position="fixed" data-id="persFooter">
        <div data-role="navbar">
            <ul>
                <li></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /footer -->

</div>

我正在使用以下命令填充所有页面上的导航栏：

$(function () {
    $("div[data-role='navbar'] ul").empty();
    $("div[data-role='navbar'] ul").append("<li><a href=\"#stdPage\" data-icon=\"home\">Test</a></li>");
    $("div[data-role='navbar']").navbar();
});

正如我所说，这样做时，第一页上的导航栏 - 已经显示的导航栏 - 没有得到增强。所有其他页面都有增强的导航栏。

我试过弄乱 .page() 和 trigger("pagecreate") 等无济于事。

任何帮助将不胜感激。

4

1 回答 1

0

问题是当您的浏览器第一次加载该页面时触发“pageinit”事件时，您的导航栏需要在页面中。这是 jQ Mobile 增强页面内容的时候。

听起来您在第一页上触发“pageinit”事件后将导航栏添加到整个文档中。这就是为什么当您导航到任何其他页面时，它会触发“pageinit”并正确增强您的内容。

您应该尝试在“mobileinit”事件中复制您的通用标题，在 jQuery 移动加载之前复制它（将您正在使用的脚本放在 jQ Mobile 脚本标记之前），或者将标题的标记放在您的第一页上并复制克隆(.clone()) 标记增强后的每一页。

至于触发器，正确的语法是这样的： $(yourelement).trigger('create').

$(function () {
    $("div[data-role='navbar'] ul").empty();
    $("div[data-role='navbar'] ul").append("<li><a href=\"#stdPage\" data-icon=\"home\">Test</a></li>");
    $("div[data-role='navbar']").trigger('create');

});

祝你好运！

跟进： 这就是我的做法。

我有一个标题，我想让某些页面通用，其中是我的第一页。所以我像往常一样在首页上制作了标题。在我的其他页面上，我放置了一个带有class="commonHeader".

然后在'mobileinit'上我添加了以下指令：

$(document).on('mobileinit', function(event){
        $('.commonHeader').each(function(index, element) { //attach common header to all pages
             $(element).replaceWith($('#frontPage [data-role="header"]').clone(true, true));     
        });
});

您可以尝试仅在需要公共页眉的页面上使用相同的方法。

于 2012-11-19T12:42:03.773 回答