JQuery Mobile Same Footer на разных страницах

Question

Я хочу иметь тот же верхний и нижний колонтитул на всех страницах своего мобильного приложения jquery и управлять им, используя другой файл, например footer.html. Это легко сделать с использованием PHP, но я не могу, потому что планирую использовать это приложение с телефонной связью.

Searching вокруг, я нашел с помощью

<div data-role="footer"> 
<div class="footerExt"></div> 
    </div> 

и JavaScript

$('.footerExt').load('footer.html') 

Однако это не работает. Я должен упомянуть, что я начинаю javascript, я едва понимаю, что происходит.

Большое спасибо

Answer 1

Try со следующим событием, он работает с моим кодом:

$('[data-role=page]').live('pageshow', function (event, ui) { 
      $("#" + event.target.id).find("[data-role=footer]").load("footer.html", function(){ 
       $("#" + event.target.id).find("[data-role=navbar]").navbar(); 
      }); 
     }); 

Это gist показывает весь код.

Answer 2

Вы должны загрузить внешний HTML кода в DIV с данными-роли = «колонтитул», так что вам нужно изменить:

<div class="footerExt"></div> 

в

<div data-role="footer" class="footerExt"></div> 

и, например, ваш колонтитул HTML может иметь h3

<h3>This is your footer</h3> 

Answer 3

от jquery 1.9 и выше live is now deprecated используйте функцию с включенным. В консоли это даст TypeError:. $ (...) жить не является функцией

пример изменить код

$('[data-role=page]').live('pageshow', function (event, ui) { 
      $("#" + event.target.id).find("[data-role=footer]").load("footer.html", function(){ 
       $("#" + event.target.id).find("[data-role=navbar]").navbar(); 
      }); 
     }); 

Заменить

$('[data-role=page]').on('pageshow', function (event, ui) { 
       $("#" + event.target.id).find("[data-role=footer]").load("footer.html", function(){ 
        $("#" + event.target.id).find("[data-role=navbar]").navbar(); 
       }); 
      });