Question

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

<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（）和触发器（“pagecreate”）等无济于事。

任何帮助都会有很大的帮助。

Answer 1

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

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

您应该尝试复制“mobileinit”事件中的公共标题，在jQuery mobile加载之前复制它（将您在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');

});

祝你好运！

关注：以下是我的做法。

我有一个标题，我希望在某些页面上公开，这是我的第一页。所以我像往常一样在头版上制作了标题。在我的其他页面上，我将占位符div放在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));     
        });
});

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

动态导航栏未在多页文档的第一页上增强

1 个答案: