У меня есть мобильный сайт jQuery с 2 страницами, загруженными в один html файл, который использует ту же панель, которая также находится в файле, за пределами всех разделов data-rol = "page". Проблема заключается в том, что при повторной загрузке второй страницы, как и при посещении перед использованием первой страницы, jQuery mobile styling на панели ul на панели исчез.
Я попытался добавить boostWithin() в код после создания панели, но мне нужно что-то упустить, он загружает ту же панель, как потеряется стиль при перезагрузке с другой страницы?
Источник
<div data-role="page" class="ui-responsive-panel" data-theme="b" id="page">
<div data-role="header" data-position="fixed">
<h1>Alpha</h1>
<a href="#left-panel" data-icon="bars" data-iconpos="notext">Menu</a>
</div><!-- /header -->
<div data-role="content">
<h1>News and Features</h1>
<a href="#page2"><p>Lorem ipsum</p>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<p>Content TBD</p>
</div>
</div>
<div data-role="page" class="ui-responsive-panel" data-theme="b" id="page2">
<div data-role="header" data-position="fixed">
<h1>Alpha</h1>
<a href="#left-panel" data-icon="bars" data-iconpos="notext">Menu</a>
</div><!-- /header -->
<div data-role="content">
<h1>News and Features</h1>
<a href="#page"><p>Lorem ipsum</p>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<p>Content TBD</p>
</div>
</div>
и скрипт:
<script type="text/javascript">
var panel = '<div data-role="panel" id="left-panel" data-position="right" data-display="push"><h1>Panel</h1><ul data-role="listview" data-theme="b"><li><a href="#">test</a></li><li>test2</li></ul></div>';
$(document).one('pagebeforecreate', function () {
$.mobile.pageContainer.prepend(panel);
$("#left-panel").panel();
});
</script>
Редактировать: Это странно объяснять, поэтому, если вы заходите на первую страницу, id=page
меню загружается с помощью традиционного стиля jQuery. Если вы перейдете на вторую страницу (id=page"
) после запуска на этой первой странице, стиль будет прекрасным. Если вы, теперь на id="page2"
нажмете кнопку 'reload' в своем браузере, стиль для панели ушел, и он по-прежнему исчезает, если вы перейдете на id="page"
. Поэтому, если первая страница не является начальной точкой, стиль никогда не применяется, это имеет смысл?
При загрузке второй страницы используйте:
.trigger('create');
Используйте это, чтобы воссоздать панель на стр. 2.
Подробнее здесь:
.trigger("create")
устарел.