JQuery Mobile CSS прокрутки и нажмите

Question

Я занимаюсь разработкой мобильного сайта для смартфонов и использую jquery mobile. Первый тест: http://pastehtml.com/view/bq51kpbmm.html

Я добавил контент на страницу, чтобы его можно было прокручивать, но при прокрутке верхний и нижний колонтитулы будут отключены на время прокрутки. :( второй тест: http://pastehtml.com/view/bq51nmk7i.html

Мобильная документация jquery (http://jquerymobile.com/test/docs/toolbars/bars-fixed.html) дает мне информацию, что data-position = "fixed" должна отключить скрытие моего верхнего и нижнего колонтитула

что я делаю не так?

Answer 1

С jQm это именно то, что происходит при прокрутке.Попробуйте поискать некоторые виджеты jQm, которые будут дополнять инфраструктуру jQm.Я думаю iScroll 4 делает то, что вы ищете здесь.

Что касается фиксированного позиционирования, по ссылке, которую вы указали в исходном вопросе:

Фиксированные панели инструментов

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

Чтобы включить это поведение в верхнем или нижнем колонтитуле, добавьте атрибут data-position = "fixed"к элементу верхнего или нижнего колонтитула 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>

Нет никаких упоминаний о том, что панели инструментов не исчезают при прокрутке.Это просто поведение в jQm.Плагины могут помочь с этим.

Answer 2

Я заметил, что вы используете jQuery 1.0.1, которая является последней стабильной версией, однако в 1.1.0-RC1 команда jQuery Mobile добилась больших успехов в фиксированных верхних и нижних колонтитулах: http://jquerymobile.com/demos/1.1.0-rc.1/docs/toolbars/bars-fixed.html

Я рекомендую использовать jQuery Mobile 1.1.0-RC1:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>

Вот демонстрационная версия с использованием точно такого же кода, но с указанными выше, вместо 1.0.1 включает: http://jsfiddle.net/tLNFu/