2012-03-03 2 views
1

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

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

JQuery мобильной документации (http://jquerymobile.com/test/docs/toolbars/bars-fixed.html) дает мне информацию, что данные-позицию = «фиксированный» следует отключить пряча мой заголовок & сноска

, что я делаю неправильно?

ответ

1

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

Что касается фиксированного позиционирования, из ссылки, которые вы указали в оригинальный вопрос:

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

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

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

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

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

Fixed пример сноска разметки:

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

Там нет никакого упоминания о каких-либо фактов, которые говорят, что панель инструментов не исчезнут прокрутки. Это просто поведение в jQm. Плагины могут помочь в этом.

+0

и что с данными положение = «фиксированный» ? – David

+0

@David проверить мой обновленный ответ –

+0

iScroll 4 dosent work with jquery mobile ... = ( – David

0

Я заметил, что вы используете 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/

Смежные вопросы