Подкатегория jQuery для мобильных устройств (data-role = 'page') не как прямой дочерний элемент тела

В моем случае я загружаю разные подстраницы с сервера во время выполнения, и у них есть контейнеры (div), которые выполняют эти загрузки. Затем контейнеры divs содержат подстраницы (divs with data-role = 'page') в div.Подкатегория jQuery для мобильных устройств (data-role = 'page') не как прямой дочерний элемент тела

По-видимому, навигационная система не работает, если подстраницы не являются прямыми дочерними элементами тела.

Я ошибаюсь? Есть ли решение для этого?

<body> 

<!-- Start of first page --> 
<div data-role="page" id="foo"> 

    <div data-role="header"> 
     <h1>Foo</h1> 
    </div><!-- /header --> 

    <div data-role="content"> 
     <p>I'm first in the source order so I'm shown as the page.</p>  
     <p>View internal page called <a href="#bar">bar</a></p> 
    </div><!-- /content --> 

    <div data-role="footer"> 
     <h4>Page Footer</h4> 
    </div><!-- /footer --> 
</div><!-- /page --> 

<div class="container"> 
    <div data-role="page" id="bar"> 

     <div data-role="header"> 
      <h1>Bar</h1> 
     </div><!-- /header --> 

     <div data-role="content"> 
      <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my ID is beeing clicked.</p>  
      <p><a href="#foo">Back to foo</a></p> 
     </div><!-- /content --> 

     <div data-role="footer"> 
      <h4>Page Footer</h4> 
     </div><!-- /footer --> 
    </div><!-- /page --> 
</div> 

<!-- Start of second page --> 

</body>

источник

2012-04-20 Koray S.

Вы используете плагин для этого?

Поскольку JQuery Mobile по умолчанию загружает только содержимое FIRST-роли-роли-роли через Ajax. Если это ваша первая страница, которая должна быть загружена полностью. Все остальное (голова, скрипты, ваш container.class не будет загружен.

См известный limiatatons here в документации.

Чтобы решить эту проблему, вы можете использовать JQM subpage plugin или JQM multiview plugin (который до сих пор в работах) .

Оба позволяют загружать подстраницы или вложенные страницы внутри страницы JQM для упаковки. Это должно быть так, потому что если вы разместите дополнительные страницы за пределами страницы JQM-оболочки, JQM Ajax не загрузит их.

EDIT:
на основе приведенных ниже комментариев:

Если вы используете мультивидовые вы можете структурировать свою страницу, как это, ahtough это оборачивает все страницы в классе контейнера. Это возможно?

<div data-role="page" data-wrapper="true" id="your_wrapper_page" class="CONTAINER"> 
    <div data-role="header"> 
     <p>global header acrolls all pages</p> 
    </div> 
    <div data-role="panel" data-id="main" data-panel="main" data-hash="history"> 
     <div data-role="page" id="main_first" data-show="first"> 
      <div data-role="header" data-position="fixed" data-theme="a"> 
       <h1>First Page LOCAL HEADER</h1> 
      </div> 
      <div data-role="content" class="yellow"> 
       <p>Content</p> 
      </div> 
      <div data-role="footer"> 
       <p>first page local footer</p> 
      </div> 
     </div> 
     <div data-role="page" id="main_second"> 
      <div data-role="header" data-theme="a" data-position="fixed"> 
       <h1>Second Page LOCAL HEADER</h1> 
      </div> 
      <div data-role="content" class="brown"> 
       <div>Lorem Ipsum</div> 
      </div> 
      <div data-role="footer"> 
       <p>second page local footer</p> 
      </div> 
     </div> 
    </div> 
    <div data-role="footer"> 
     <p>global footer acrolls all pages</p> 
    </div> 
</div>

В качестве альтернативы можно использовать поповер-панель, которую вы можете NEST внутри страницы обертку, после раздела содержания, но должен был бы заставить переопределить некоторые вещи внутри MultiView сделать поповер/всплывающее окно будет полноэкранный режим.

Обратите внимание: я все еще работаю над тем, чтобы переходы панелей совпадали с JQM 1.1. Так что нужно некоторое время.

Кроме этого, вам придется придумать свое решение, потому что я думаю, что JQM не работает так.

Вопрос, если вы можете работать без контейнера?

источник

2012-04-20 08:11:12 frequent

Большое спасибо за ответ. Загрузка подстраниц происходит независимо от вызовов AJAX от jQuery-mobile. Единственной проблемой, с которой я сталкиваюсь, является, по сути, итоговая ситуация, как в моем примере кода, что подстраницы loadad должны находиться в контейнере div, избегая jQuery mobile, чтобы перейти к ним через jQuery.mobile.changePage ('# [id]'). Если бы я мог найти рабочий способ для этого вызова: jQuery.mobile.changePage («# bar») я был бы более чем доволен :) –

что вы пытаетесь достичь? Вы хотите иметь страницу, которая НЕ загружаема? – frequent

№ В приведенном выше примере мне нужно вызвать jQuery.mobile.changePage («# bar»), чтобы перейти на страницу «bar». Что не происходит из-за того, что div «#bar» вложен в div «.container». –

Подкатегория jQuery для мобильных устройств (data-role = 'page') не как прямой дочерний элемент тела

ответ

Смежные вопросы