Создание шаблонного / постоянного шаблона верхнего / нижнего колонтитула в jQuery Mobile и PhoneGap

Я ныряю в написание мобильного приложения с jQuery Mobile / PhoneGap. Я использую этот образец шаблона для начала, который использует HTML / JS для создания страниц. Вместо того, чтобы хранить все теги в одном html-файле, он разделил его, чтобы его было легче редактировать.

Поскольку у меня будет отдельный файл для каждой страницы, как лучше всего добавить шаблонный верхний / нижний колонтитул? Я видел только его, когда вам нужно скопировать и вставить весь код нижнего колонтитула-> навигационной панели в каждую HTML-страницу. Это не похоже на то, что должно быть. Например, если вы хотите изменить один пункт меню, вам нужно перейти на каждую страницу и изменить его.

Какого решения мне не хватает?

Может, я просто не понимаю jQuery Mobile. Например, их боковая панель, которую они используют для своих документов - это копия кода боковой панели и вставка на каждую страницу? Это не имеет смысла. Это та же идея, что и вопрос, который я задаю здесь о нижнем колонтитуле.

http://jquerymobile.com/test/docs/pages/page-cache.html

Это то, что у меня есть, кажется неправильным (и $. Live ('pageinit' ) не работает).Этот HTML-код находится на каждой HTML-странице:

И JS

$.live('pageinit', function (event) {
    displayFooter();
});

function displayFooter() {
    $('#mainFooter').html('
' +
        '
' +
        '
Menu Item 1
' +
        '
Menu Item 2
' +
        '
Menu Item 3
' +
        '
' +
        '
');
}