Исправлены панель инструментов и панель нижнего колонтитула JQuery Mobile? - PullRequest
Новая
       44

Исправлены панель инструментов и панель нижнего колонтитула JQuery Mobile?

62 голосов
/ 23 апреля 2011

Я использую JQuery Mobile версии 4.1a и использую: 

data-position="fixed"

в верхнем и нижнем колонтитуле.

При прокрутке содержимого оно исчезает, а затем снова появляется.

Есть ли способ заставить его оставаться на своем месте и не исчезать при каждой прокрутке страницы?

Спасибо

Ответы [ 15 ]

111 голосов
/ 23 марта 2012

Добавить data-tap-toggle="false" к элементу

или

Добавить это в Javascript 

$("[data-role=header]").toolbar({ tapToggle: false });

В старых версиях jQuery используется .fixedtoolbar().

jQuery Mobile Docs - События

15 голосов
/ 23 апреля 2011

Я нашел решение.Я протестировал его в своем проекте, и он работает как шарм.

Вот URL: https://github.com/yappo/javascript-jquery.mobile.iscroll

Это то же решение JS, которое используется: AppML.

Кроме того, вот демо:

http://yappo.github.com/projects/jquery.mobile.iscroll/livedemo.html

ps: это работает лучше на моем проекте, чем на их реальной демонстрации, поэтому стоит попробовать.

Наслаждайтесь: o)

4 голосов
/ 16 ноября 2012 
<div data-role="footer" data-tap-toggle="false"
     data-theme="c" id="footer" data-position="bottom" >
    <h4 align="center" >copyright 2012 @KoshWTF</h4>
    <p>&nbsp;</p>
</div>

P.S. Вы можете сделать это и для заголовка, если у вас возникли проблемы с ним. веселит

4 голосов
/ 06 мая 2011

У меня были проблемы с jquery mobile iscroll в моем проекте.Возможно, некоторые из библиотек, которые я использовал, мешали друг другу (я использую knockout и jquery.templates вместе с кучей других вещей).Решением, которое сработало для меня, было jquery mobile scrollview.Демоверсии можно посмотреть здесь.

http://jquerymobile.com/test/experiments/scrollview/

И код здесь

https://github.com/jquery/jquery-mobile/tree/master/experiments/scrollview/

вам необходимо включить

  • jquery.easing.1.3.js
  • jquery.mobile.scrollview.js
  • jquery.mobile.scrollview.css
  • scrollview.js

Я недавно использовал это в мобильном проекте jquery, и он отлично работает на iphone 3gs.На моем старом андроиде HTC magi он работает не очень хорошо, но ни один из jquery mobile не работает на этом устройстве.Обратите внимание, что представление прокрутки находится в стадии эксперимента и не было добавлено в основной мобильный проект jquery.

Если вам не повезло с iScroll или jquery mobile scrollview, другой набор инструментов wink -

http://www.winktoolkit.org/tutorials/119/

Как и iScroll, мне не удалось заставить это работать с моим конкретным проектом, но я не думаю, что я действительно так старался.

3 голосов
/ 11 января 2012 
        $(document).bind("mobileinit", function() {
             $.support.touchOverflow = true;

              $.mobile.touchOverflowEnabled = true;
              $.mobile.fixedToolbars.setTouchToggleEnabled(false);

        });

Это работает.Проверено в Android 2.3

2 голосов
/ 18 ноября 2012

добавьте в нижний колонтитул class="FixedFooter" и убедитесь, что вы удалили data-position="fixed" из нижнего колонтитула.

добавьте это к своим <head> 

<style type="text/css">
    .fixedFooter {
position: fixed !important;
left: 0px !important;
right: 0px !important;
bottom: 0px !important;
z-index: 999 !important;
}

приветствиям.

2 голосов
/ 19 июля 2011

Я хотел добавить комментарий к ответу Satch3000, но у меня не было возможности сделать это - не уверен почему. Я пробовал https://github.com/yappo/javascript-jquery.mobile.iscroll,, но, к сожалению, он не работает с последними мобильными библиотеками jquery (http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js)

1 голос
/ 04 июля 2013

Это очень просто. 

   <div data-role="header" data-position="fixed" data-tap-toggle="false">
    </div>

Это работает для меня.

1 голос
/ 11 марта 2012

Вот что у меня сработало:

В функции ResizePageContentHeight() добавить дополнительную строку: 

$page.children('.ui-footer').css('position','fixed');

прямо перед: 

$content.height(wh - (hh + fh) - (pt + pb))

Полный код: (добавьте его в свой jquery.scrollview.js внизу) 

function ResizePageContentHeight(page) {
   var $page = $.mobile.activePage,
    $content = $page.children( ".ui-content" ),
    hh = $page.children( ".ui-header" ).outerHeight() || 0,
    fh = $page.children( ".ui-footer" ).outerHeight() || 0,
    pt = parseFloat($content.css( "padding-top" )),
    pb = parseFloat($content.css( "padding-bottom" )),
    wh = window.innerHeight;

    $page.children('.ui-footer').css('position','fixed');

    $content.height(wh - (hh + fh) - (pt + pb));

}

$( ":jqmData(role='page')" ).live( "pageshow", function(event) {
    var $page = $( this );

    $page.find( ".ui-content" ).attr( "data-" + $.mobile.ns + "scroll", "y" );
    $page.find( ":jqmData(scroll):not(.ui-scrollview-clip)" ).each(function () {
      var $this = $( this );
      if ( $this.hasClass( "ui-scrolllistview" ) ) {
      $this.scrolllistview();
      } else {
      var st = $this.jqmData( "scroll" ) + "",
      paging = st && st.search(/^[xy]p$/) != -1,
      dir = st && st.search(/^[xy]/) != -1 ? st.charAt(0) : null,
      opts = {
      direction: dir || undefined,
      paging: paging || undefined,
      scrollMethod: $this.jqmData("scroll-method") || undefined
      };
      $this.scrollview( opts );
      }
      });
      ResizePageContentHeight( event.target );
      });
      $( window ).bind( "orientationchange", function( event ) {
      ResizePageContentHeight( $( ".ui-page" ) );
      });
1 голос
/ 29 февраля 2012

Я француз Извините за мой английский;

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

$("body").live('scrollstart', function (event, ui) {
    if ($(".divDel").length == 0) {
        //prevents the offset
        var taill = $("[data-role=header]").height();
        $("[data-role=header]").after("<div class='divDel' style='height:" + taill + "px;'></div>");
        $("[data-position=fixed]").css("display", "none");
    }
}).live('vmouseup scrollstop', function (event, ui) {
    $(".divDel").remove();
    $("[data-position=fixed]").css("display", "block");
});
$.mobile.fixedToolbars.setTouchToggleEnabled(false);
Страница:
...