jQuery Mobile - включить нижний колонтитул из внешнего файла

#jquery #dynamic #mobile #footer #navbar

#jquery #динамический #Мобильный #нижний колонтитул #панель навигации

Вопрос:

Я хотел бы создать общий нижний колонтитул (например footer.html ), который может быть использован всеми страницами в моем мобильном приложении jQuery. Однако я не могу найти способ заставить jQuery обновлять стили в навигационной панели нижнего колонтитула после загрузки html из внешнего файла. После того, как мысли будут с благодарностью.

Footer.html:

 <div data-role="navbar" class="CSS" data-grid="d" id="footerNav">
    <ul >
        <li ><a href="#" id="a" data-icon="custom"><div>a</div></a></li>
        <li ><a href="#" id="b" data-icon="custom"><div>b</div></a></li>
        <li ><a href="#" id="c" data-icon="custom"><div>c</div></a></li>
        <li ><a href="#" id="d" data-icon="custom"><div>d</div></a></li>
        <li ><a href="#" id="e" data-icon="custom"><div>e</div></a></li>
    </ul>
</div>

Index.html:

 <div data-role="page" style="position: relative" data-theme="a" id="index">
    <div data-role="header">
        <div class="homebutton" onclick="location.href='default.html'">
            amp;nbsp;</div>
        <h1>
            EVENT CALENDAR</h1>
    </div>
    <div data-role="content">
        <p>
            This is a single page boilerplate template that you can copy to build you first
            jQuery Mobile page. Each link or form from here will pull a new page in via Ajax
            to support the animated page transitions.</p>
    </div>

    <div data-role="footer" class="CSO" data-position="fixed" id="footerDiv">

    </div>

    <script>
    $('#index').live('pageinit', function (event, ui) {
         $('#footerDiv').load('Shared/Footer.html');
         [Some code to refresh the footer so it gets redrawn by Jquery Mobile]  
    });
    </script>

Ответ №1:

Предполагая, что остальная часть кода действительна:

 $('#footerDiv').load('Shared/Footer.html').trigger("create");

Ответ №2:

что касается меня, мне пришлось использовать функцию обратного вызова и добавить ее в мое событие pageinit :

 $(document).on('pageinit', function(event){
  $("#footerDiv").load('_footer.html', function(){$(this).trigger("create")});
});