Управление позиционированием jQuery Mobile Footer - PullRequest
Новая
       16

Управление позиционированием jQuery Mobile Footer

3 голосов
/ 08 июня 2011

У меня есть вопрос, который был просмотрен, но без ответов или комментариев по этому вопросу, поэтому я решил попытаться упростить свой вопрос. Для тех, кто интересуется моей общей проблемой, пожалуйста, смотрите ссылку: Постоянный заголовок в jQuery Mobile

В любом случае, мой вопрос: как заставить нижний колонтитул JQM находиться сверху, а не снизу? Вот код для нижнего колонтитула JQM. Он хорошо сохраняется при переходах по страницам, но он находится у подножия страницы, и он мне нужен во главе: 

<div data-role="footer" data-position="fixed" data-id="navBar" id="navigationBar">
    <img src="images/bgheader.png" />
</div>

Я уже собираюсь перестроить его с Сенчей, но, поскольку у меня есть завтрашний срок, я не думаю, что это возможно. Этот постоянный заголовок - единственное, чего в данный момент не хватает (заголовки JQM не остаются при переходе страницы по какой-либо причине).

Ответы [ 6 ]

6 голосов
/ 14 июля 2011

У меня была похожая проблема.

В моем случае я хотел, чтобы нижний колонтитул оставался точно внизу страницы, поэтому я обернул div нижнего колонтитула в новый div, расположенный там, где мне нужно.

Пусть код говорит сам за себя: 

<style> 
.footer-wrapper {

    position: absolute;
    bottom: 0px;
    width: 100%;
}
</style>

тогда 

<div class='footer-wrapper'>
    <div data-role='footer' >
        footer content blah blah blah
    </div>
</div>

Таким образом, вы можете свободно перемещать обертку нижнего колонтитула (как и любой другой обычный div, не управляемый css jQuery Mobile), например, в вашем случае вы должны удалить атрибут bottom: 0px; и изменить его на top: -header's height-px;

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

2 голосов
/ 14 июня 2011

В документах указано:

В ситуациях, когда нижний колонтитул является глобальным элементом навигации, вы можете захотеть, чтобы он отображался на месте между переходами страниц.Это можно сделать с помощью функции постоянного нижнего колонтитула, включенной в jQuery Mobile.

Чтобы нижний колонтитул оставался на месте между переходами, добавьте атрибут data-id в нижний колонтитул всех соответствующих страниц и используйте одно и то же значение идентификатора.для каждого.Например, добавив data-id = "myfooter" к текущей странице и целевой странице, каркас будет держать якоря нижнего колонтитула в одном месте во время анимации страницы.

ОБРАТИТЕ ВНИМАНИЕ: Этот эффект будет толькоработают правильно, если панели инструментов верхнего и нижнего колонтитула установлены на data-position = "fixed", поэтому они видны при переходе.

То же самое относится и к заголовку.Вместо того, чтобы пытаться переместить нижний колонтитул, исправьте заголовок, чтобы он был постоянным.

Я нашел пример здесь , в разделе Создание постоянных колонтитулов и верхних колонтитулов.

1 голос
/ 02 февраля 2012

У меня был некоторый успех в этом, внутри каждой data-role = "page": 

<div data-role="footer" data-id="page_header" class="fixed_header">
 <h1>My Page</h1>
</div>

css: 

.fixed_header {
    position:fixed !important;
    top:0px !important;
    left:0px;
    width:100%;
    z-index:1;
}

И я действительно смогтакже иметь второй «настоящий» нижний колонтитул, закрепленный в нижней части страницы.Я протестировал это на своем HTC Amaze и симуляторе iOS.

Мне было бы интересно узнать, работает ли это на других устройствах.

1 голос
/ 21 сентября 2011

Это сработало для меня.

Внутри каждого div страницы включите div с ролью data-footer, как показано ниже. 

<div data-role="page" id="something">
   <div data-role="footer" data-position="fixed" data-id="navFooter" 
      role="contentinfo" style="position:absolute;bottom:0;">
      <div data-role="navbar" role="navigation">
          ...
      </div>
   </div>
</div>

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

$('#contentDiv').append('<p>some html</p>');

К сожалению, панель навигации должна повторяться в каждом разделе страницы.

1 голос
/ 16 июня 2011

Добавьте следующий css на свою страницу или внизу файла css.

Обратите внимание, что я не проверял этот код на мобильных устройствах .. 

 <style type="text/css">
    .ui-header {
        position: fixed !important;
        top: 0 !important;
        z-index: 99;
    }
    .ui-content {
        margin-top: 35px;
    }
</style>
1 голос
/ 16 июня 2011

Я не думаю, что это возможно, по крайней мере, с помощью нижнего колонтитула JQM.Документация не раскрывает какие-либо атрибуты, которые вы можете установить, которые могли бы изменить позицию, и JQM активно управляет позицией на самом <div>.Он изменяет его напрямую как что-то вроде style='top: -1304px' и меняет значения каждый раз, когда вы прокручиваете или меняете экраны.Таким образом, вы даже не можете изменить его, изменив CSS.JQM всегда побеждает, поскольку он изменяет встроенные стили.

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

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

Удачи вам.Надеемся, что ваши заинтересованные стороны хотели бы иметь фиксированные элементы в нижней части экрана.

...