нижний колонтитул скрывается при переходе на следующую страницу

Question

У меня есть html структура, подобная этой

<div data-role="page" data-theme="b">

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

    <div data-role="content" data-theme="b">
        <a href="#p2" data-role="button" data-icon="arrow-r" data-theme="b" data-iconpos="right">next pagey</a>  
    </div><!-- /content -->

    <div data-role="footer" data-theme="b" data-position="fixed">
        <h1>Footer</h1>
    </div><!-- /footer -->

</div><!-- /page -->

<div id="p2" data-role="page" data-theme="b">

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

    <div data-role="content" data-theme="b">
        <h1>Content</h1> 
    </div><!-- /content -->

    <div data-role="footer" data-theme="b" data-position="fixed">
        <h1>Content</h1>
    </div><!-- /footer -->

</div><!-- /page -->

Но когда я нажимаю на следующую страницу, и появляется следующая страница с автоматически добавленным back btn в заголовке, когда я нажимаю кнопку back, появляется предыдущая страница, но нижний колонтитул исчезает.

в FF работает нормально, но не в симуляторе ipad

Answer 1

Получение исправленных нижних колонтитулов для работы - боль для команды JQM. Я думаю, что это просто еще одна маленькая ошибка, вызванная непредвиденными обстоятельствами. Ну, неважно ...

Немного понимания: Эти штопать мобильные браузеры не поддерживают фиксированное позиционирование CSS, поэтому это делается с помощью javascript и абсолютной позиции (и тонны хаков - держу пари)

Это уже должно дать вам подсказку ...

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

$('div').live('pageshow',function(){ $(window).trigger('orientationchange') });

Событие directionalchange должно работать. Вы также можете попробовать resize, если ориентация вызывает какие-либо новые проблемы.