jQuery mobile - стиль панели удаляется при загрузке с любой страницы, кроме начальной

0

У меня есть мобильный сайт 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". Поэтому, если первая страница не является начальной точкой, стиль никогда не применяется, это имеет смысл?

  • 0
    можете уточнить свой вопрос и код того, как вы посещаете вторую страницу первой?
  • 0
    Я немного обновляю пост, надеюсь, это лучше объясняет, это странная проблема.
Показать ещё 6 комментариев
Теги:
jquery-mobile

1 ответ

0

При загрузке второй страницы используйте:

.trigger('create');

Используйте это, чтобы воссоздать панель на стр. 2.

Подробнее здесь:

Справка

  • 0
    он использует jQM 1.4, .trigger("create") устарел.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню