Я настраиваю мобильную страницу с несколькими страницами jquery на основе предоставленного шаблона: http://jquerymobile.com/demos/1.1.1/docs/pages/multipage-template.html
Как я могу получить верхний / нижний колонтитул для повторения на всех страницах без дублирования его в содержимом страницы.
Есть ли сценарий jquery для этого или мне нужно использовать какой-то файл include php?
Заранее спасибо!
Вы можете использовать JS (jQuery), чтобы создать шаблон и добавить его к каждому элементу data-role="page" при его создании.
//create template, notice the "{TITLE}" place-holder for dynamically adding titles var myHeaderHTML = '<div data-role="header" data-id="my-header" data-position="fixed"><h1>{TITLE}</h1></div>'; //create delegated event handler for the "pagecreate" event for all pseudo-pages $(document).on('pagecreate', '[data-role="page"]', function () { //get the title of this page, if none is given then use a generic title var title = $(this).data('title') || 'Some Generic Title'; //add the header to this pseudo-page $(this).append(myHeaderHTML.replace('{TITLE}', title)); });
Вот демонстрация: http://jsfiddle.net/vmMVj/
Это добавит фиксированный заголовок на каждую страницу по мере его создания. Я добавил поддержку для передачи уникального названия, добавив атрибут data-title="Some Title" в элемент data-role="page" .
Обратите внимание, что я выбрал событие pagecreate потому что это происходит, когда псевдо-страница вот-вот будет инициализирована. Если вам нужно привязать к событию pageinit , вы опоздаете и должны вручную инициализировать виджет заголовка.
Насколько я знаю, вы должны включать верхний и нижний колонтитулы в каждый контейнер data-role="page" . Если вы не хотите набирать это для каждой страницы, тогда я бы потребовал require_once() страницы на PHP, которая включает верхний или нижний колонтитул, и использовать это вместо того, чтобы каждый раз писать верхний и нижний колонтитулы.
Образец:
<section data-role="page"> <?php require_once("header.php"); ?> <div data-role="content"> <p>Hello world!</p> </div> <?php require_once("footer.php");?> </section>
header.php:
<header data-role="header"> <h1>Title</h1> </header>
footer.php:
<footer data-role="footer"> <<p>Footer content here</p> </footer>
Почему больше JS ?? … вместо добавления двух элементов для заголовка и нижнего колонтитула (теги «header» и «footer» или divs с соответствующими классами, но обязательные с «position: fixed;») – и добавьте верхнюю и нижнюю части страниц divs ? … Нет необходимости в JS-коде … что улучшит производительность … хотя очень мало 🙂 …