JQuery мобильный нижний navbar или липкий нижний колонтитул - PullRequest
Новая
       0

JQuery мобильный нижний navbar или липкий нижний колонтитул

0 голосов
/ 03 августа 2011

JQuery Mobile предлагает два варианта для липких навигационных панелей нижнего колонтитула. «Inline», который просто вставит страницу, где она была объявлена, и «Fixed», что сделает ее липкой, если вы не прокрутите ее. Как только вы прокрутите его, он исчезнет. Я обнаружил, что это поведение очень ненадежно.

Судя по всему, академия Хана это поняла, но по какой-то причине я не могу на самом деле посетить их мобильный сайт с openapp mkt: http://www.jqmgallery.com/2011/03/07/khan-academy/

Я знаю, что другие спрашивали об этом, но jQuery Mobile теперь другой: jQuery Mobile: вставьте нижний колонтитул в конец страницы

Позже я мог бы просто попробовать поэкспериментировать с макетом CSS (которого я старался избегать, чтобы не сломать jquery mobile) http://ryanfait.com/sticky-footer/

Ответы [ 3 ]

1 голос
/ 17 ноября 2012

http://jquerymobile.com/demos/1.2.0/docs/toolbars/bars-fixed.html

В браузерах, которые поддерживают положение CSS: исправлено (большинство браузеров для настольных компьютеров, iOS5 +, Android 2.2+, BlackBerry 6 и другие), панели инструментов, использующие плагин «fixedtoolbar», будут зафиксированы наверх или низ окна просмотра, а содержимое страницы свободно прокручивается между ними.В браузерах, которые не поддерживают фиксированное позиционирование, панели инструментов будут оставаться в потоке, вверху или внизу страницы.

Чтобы включить это поведение в верхнем или нижнем колонтитуле, добавьте data-position = "исправлен атрибут к заголовку или элементу нижнего колонтитула jQuery Mobile.

Пример исправленной разметки заголовка: 

<div data-role="header" data-position="fixed">
    <h1>Fixed Header!</h1>
</div>

Пример исправленной разметки нижнего колонтитула: 

<div data-role="footer" data-position="fixed">
    <h1>Fixed Footer!</h1>
</div>
1 голос
/ 11 декабря 2011

для устройства IOS5 это работает: http://jquerymobile.com/test/docs/config/touchOverflow.html с этим исправлением: https://github.com/jquery/jquery-mobile/pull/3165

0 голосов
/ 05 февраля 2014

Это не фиксированный нижний колонтитул.Нижний колонтитул будет за кадром, если содержимое страницы будет выше экрана.Я думаю, что так это выглядит лучше.

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

body,
.ui-page {
    min-height:100% !important;
    height:auto !important;
}

.ui-content {
    margin-bottom:42px; /* HEIGHT OF YOUR FOOTER */
}

.ui-footer {
    position:absolute !important;
    width:100%;
    bottom:0;
}
...