включая верхний и нижний колонтитулы в JQuery Mobile многостраничного сайта - PullRequest
Новая
       7

включая верхний и нижний колонтитулы в JQuery Mobile многостраничного сайта

3 голосов
/ 25 ноября 2011

Я создаю мобильное веб-приложение jquery, которое содержит 3 страницы, мой заголовок / навигация для этих страниц не меняется, но во всех примерах, которые я видел, заголовок и нижний колонтитул добавляются на каждую страницу. Можно ли просто добавить 1 навигационный и 1 нижний колонтитулы, а затем просто включить и отключить основное содержимое страниц, как эта структура: 

<div id="header" data-role="header"></div>
<div id="page1" data-role="page">content</div>
<div id="page2" data-role="page">content</div>
<div id="page3" data-role="page">content</div>
<div id="footer" data-role="footer"></div>

В принципе, есть ли способ просто показать / скрыть основной контент и ничего не делать с верхним и нижним колонтитулом?

Любой совет по этому поводу был бы великолепен. Kyle

Ответы [ 3 ]

15 голосов
/ 30 ноября 2011

Нет, к сожалению, JQM не поддерживает это (пока), вам нужно будет добавить свою роль = заголовок и роль = нижний колонтитул на КАЖДУЮ роль = страница, которую вы получили (все 3 из них).

См. документацию

Я бы придерживался $ .mobile.changePage (), так как он заботится о хешировании и множестве других событий, а не просто использует JQuery для .load () нового контента...

Надеюсь, это поможет

4 голосов
/ 25 ноября 2011

Посмотрите на метод load() в jQuery -> http://api.jquery.com/load/

Вот пример: 

$('#navigation').click(function() {
   $('#page1').load('page1.html');
});

Это означает, что при нажатии чего-либо с идентификатором navigation он вызовет функцию load() и заменит div идентификатором page1 содержимым загруженного файла.

0 голосов
/ 14 мая 2012

вы можете использовать .load () в jQuery

, например, на каждой странице у вас будет это: 

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

Теперь создайте эту функцию: 

function goTo(pageURL, transitionType) {
  $.mobile.changePage(pageURL, transitionType);
  $('.ui-footer').load('assets/includes/footer.html');
}

теперь, когда вы перемещаетесь между страницами, попробуйте onclick (или из кода, если хотите), позвоните: 

goTo('home.html','slideup');

, который бы справился (это то, что я использую)

вы можете сделать то же самое и для заголовков.

имейте в виду, что если содержимое верхнего или нижнего колонтитула меняется для каждой версии приложения (например, локализация), вам нужно сначала вызвать его, а затем заполнитьв тексте локализации или что-нибудь еще.

Надеюсь, это поможет вам

...