Сохранение запросов мобильных заголовков одинаковыми

Question

Я пишу небольшое приложение с одинаковым заголовком на нескольких страницах, поэтому вместо того, чтобы снова и снова писать один и тот же бит кода, я хотел включить переменную, аналогичную 'include (' header.php ')'в php.

В настоящее время я сделал:

  //Set header for each page
  var fund_header = '<div data-role="header" data-theme="z" data-position="inline"><a href="javascript:void(0)" onclick="javascript: reset(); $.mobile.changePage("#fund_1");" data-icon="delete" class="restart">Restart</a><h1>Funding</h1><a href="index.html" data-icon="home" class="ui-btn-right" data-iconpos="notext" rel="external" data-ajax="false">Home</a></div>';

Затем на страницах добавлено:

<div data-role="page" id="fund_2" data-theme="z">
    <script type="text/javascript">document.write(fund_header);</script>

Это лучшая практика?Или есть лучший способ?

Answer 1

Вместо того, чтобы хранить заголовок в переменной, вы можете создать отдельный html-файл заголовка и загрузить его с помощью Ajax.

Я сам не пробовал, но, глядя на API jQuery Mobile, онПохоже, вы могли бы использовать $.mobile.loadPage для этого, вместо того, чтобы писать запрос ajax самостоятельно.

Запрос, вероятно, будет выглядеть примерно так: $.mobile.loadPage( 'header.html', { pageContainer: $('header') });

См .: http://code.jquery.com/mobile/latest/demos/docs/api/methods.html

Если это не сработало, вы также можете использовать jQuery .ajax (http://api.jquery.com/jQuery.ajax/).

Хотелось бы услышать, если JQM предлагает лучшее решение.