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

Question

Я делаю сайт с помощью jQuery Mobile.

Как сохранить верхний и нижний колонтитулы jquery? Я просто хочу только прокрутку контента (как это происходит в iPhone-приложениях), и сохраняйте верхние и нижние колонтитулы сверху и снизу.

Любые предложения?

Answer 1

Добавить этот атрибут в свой заголовок/колонтитул DIV:

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

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

Answer 2

Другой вариант проверить iScroll: http://cubiq.org/iscroll

Answer 3

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

1) Jquery мобильного Scrollview

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

2) Wink Инструментарий

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

Answer 4

Другой способ заключается в использовании http://jquerymobile.com/test/experiments/scrollview/scrollview-direction.html (jquery.mobile.scrollview.js, scrollview.js и easing.js) и поместить данные улиткой = «истина» в странице сНу тега как предложено здесь: scrollview for jQuery mobile tollbars *not* to be fixed.

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

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

E

Answer 5

Использование 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> 

Answer 6

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

имеет вид here

Answer 7

Для прошивки 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); 
    }); 
} 

* Тест для прошивки:

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

Answer 8

Чтобы включить этот тип элемента панели инструментов, вы применяете данные полноэкранных = «истинный» атрибут и дату-позицию = «фиксированный» атрибут как элементы заголовка и нижнего колонтитула. Рамка также отменит заполнение контейнера контента (ui-content)

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