jQuery Mobile: альтернатива .trigger ('create') или .page () при обновлении navbar? - PullRequest
Новая
       8

jQuery Mobile: альтернатива .trigger ('create') или .page () при обновлении navbar?

3 голосов
/ 09 февраля 2012

У меня есть следующий HTML-код jQuery Mobile, содержимое навигационной панели задается с помощью javascript.jQuery mobile стилизирует панель навигации, когда она установлена ​​статически, но когда вы устанавливаете ее содержимое (html) позже, используя javascript, вам нужно проделать дополнительную работу, чтобы заставить его работать: 

    <div data-role="header">
        <h1 id="title">App</h1>
    </div><!-- /header -->

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

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

trigger('create');обычно используется для решения проблемы нестандартной разметки при установке с использованием javascript / ajax. Однако , похоже, работает только в пределах data-role="content", а не #navbar.Сценарий ниже должен работать, но оставляет меню без стиля ... 

$(function(){
    $("#menu").html("<li><a href='#'>Test Styling</a></li>").trigger('create');
});

Есть идеи, как решить эту проблему?Я пробовал page(); и .listview('refresh'); безрезультатно.

1 Ответ

4 голосов
/ 09 февраля 2012

Попробуйте вызвать метод navbar после добавления элемента списка: 

$(function(){
    $("#menu").html("<li><a href='#'>Test Styling</a></li>");
    $("#navbar").navbar(); 
});

Edit: Вы также можете попробовать динамически создать навигационную панель: 

var footer = $("#footer-id");

var navBar = $("div", {
    "data-role":"navbar",
    "html":"<ul><li><a href='#'>Test Styling</a></li></ul>"
}).appendTo(footer).navbar();
...