Как сохранить jquery мобильный заголовок и нижний колонтитул исправлен?

Ответ 1

Добавьте этот атрибут в свой div/footer div:

        <div data-role="header" data-position="fixed">
            <h1>Header Page 1</h1>
        </div>

Кроме того, вы можете взглянуть на это: http://jquerymobile.com/test/docs/toolbars/footer-persist-a.html

Ответ 2

Проблема, с которой я столкнулась с jquery mobile fixed, заключается в том, что верхний и нижний колонтитулы исчезают. Я предполагаю, что это то, что они исправит в будущем, но в дополнение к iscroll, предложенному Дэном, есть также jquery mobile scrollview и подмигивание Инструментарий. Я получил хорошие результаты с помощью jquery mobile scrollview, но не повезло с iscroll или wink

1) Jquery mobile Scrollview

• Демо: http://jquerymobile.com/test/experiments/scrollview/
• Код: https://github.com/jquery/jquery-mobile/tree/master/experiments/scrollview/

2) Wink Toolkit

• Учебное пособие: http://www.winktoolkit.org/tutorials/119/
• Демо: http://www.winktoolkit.org/documentation/wink/ui/layout/scroller/test/test_scroller4.html?theme=default

Ответ 3

Еще один вариант - проверить iScroll: http://cubiq.org/iscroll

Ответ 4

Чтобы включить этот тип панели инструментов, вы применяете атрибут data-fullscreen = "true" и атрибут data-position = "fixed" как для элементов div верхнего и нижнего колонтитула. Рамка также отменит дополнение для контейнера содержимого (ui-content)

  <div data-role="header" data-position="fixed" data-fullscreen="true">
        <h1>Header Page 1</h1>
    </div>

Ответ 5

Другим способом является использование http://jquerymobile.com/test/experiments/scrollview/scrollview-direction.html (jquery.mobile.scrollview.js, scrollview.js и easing.js) и поместите data-scroll = "true" в тег div div, как предлагается здесь: scrollview для мобильных телефонов toQuery * не * для исправления.

Хорошо работал у меня до сих пор.

Приветствия,

Е

Ответ 6

Использовать iScroll v4. Сохраняйте верхний и нижний колонтитулы фиксированными и прокручивайте только содержимое. iScroll требует обертки DIV и дочерний элемент. В приведенном ниже примере content_items является дочерним div с элементами для прокрутки. Я заметил, что вы не можете объединить data-role = "content" и обертку DIV для iScroll в одном HTML-элементе!

<script type="text/javascript">
var myScroll;

$(document).ready(function () {

    myScroll = new iScroll('wrapper');

});

</script>
<div data-role="page"> 
    <div id="header" data-role="header" data-position="fixed"></div>
    <div id="content" data-role="content" class="contentcontainer contentsearched">
        <div id="wrapper">
            <div id="content_items" class="content_items"></div>
        </div>
    </div>
    <div id="footer" data-role="footer" data-position="fixed">
        <div data-role="navbar"></div>
    </div> 
</div>

Ответ 7

Я рекомендую вам попробовать последнюю версию jQuery-mobile (1.1.0-rc). он исправил эту ошибку.

посмотрите здесь

Ответ 8

Для iOS 6, 7 и 8 этот хак, похоже, решает проблему и вызывает перерисовку, чтобы правильно заменить фиксированный заголовок (с панелью или без нее) на iPod, iPhone и iPad. Примечание. Мы тестируем устройство iOS и добавляем это событие в этом случае *.

if (iOS()) {
    $(document).on('blur', 'input:not(:submit), select, textarea', function () {
        var paddingBottom = parseFloat($(".ui-mobile-viewport, .ui-page-active").css("padding-bottom"));
        $(".ui-mobile-viewport, .ui-page-active").css("padding-bottom", (paddingBottom + 1) + "px");
        window.setTimeout(function () {
            $(".ui-mobile-viewport, .ui-page-active").css("padding-bottom", paddingBottom + "px");
        }, 0);
    });
}

* Тест для iOS:

var iOS() = function () {
    var userAgent = window.navigator.userAgent.toLowerCase();
    return (/iphone|ipad|ipod/).test(userAgent);
}