Вопросы Теги

JQuery Мобильная Фиксированная Панель Панели инструментов и Нижнего колонтитула исчезает?

Я использую Мобильную версию 4.1a JQuery и использование:

data-position="fixed"

и на заголовке и на нижнем колонтитуле.

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

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

Спасибо

62
задан 23 April 2011 в 14:16

10 ответов

На JQM 1.3.2 вот мое решение

  1. , Добавляет переключатель касания данных =, "ложь" к фиксированному заголовку/нижнему колонтитулу
  2. Добавляет CSS ниже для переопределения CSS 

.ui-header-fixed.ui-fixed-hidden,
.ui-footer-fixed.ui-fixed-hidden{
	position: fixed !important;
}

header.ui-panel-animate {
	-webkit-transition: none !important;
}

header.slidedown.out.reverse {
	-webkit-transform: none !important;
	-webkit-animation-name: none !important;
	-webkit-animation-duration: 0ms !important;
	transform: none !important;
	animation-name: none !important;
	animation-duration: 0ms !important;
}

header.slidedown.in.reverse {
	-webkit-transform: none !important;
	-webkit-animation-name: none !important;
	-webkit-animation-duration: 0ms !important;
	transform: none !important;
	animation-name: none !important;
	animation-duration: 0ms !important;
}

header.slidedown.out {
	-webkit-transform: none !important;
	-webkit-animation-name: none !important;
	-webkit-animation-duration: 0ms !important;
	transform: none !important;
	animation-name: none !important;
	animation-duration: 0ms !important;
}

header.slidedown.in {
	-webkit-transform: none !important;
	-webkit-animation-name: none !important;
	-webkit-animation-duration: 0ms !important;
	transform: none !important;
	animation-name: none !important;
	animation-duration: 0ms !important;
}

header.slideup.out.reverse {
	-webkit-transform: none !important;
	-webkit-animation-name: none !important;
	-webkit-animation-duration: 0ms !important;
	transform: none !important;
	animation-name: none !important;
	animation-duration: 0ms !important;
}

header.slideup.in.reverse {
	-webkit-transform: none !important;
	-webkit-animation-name: none !important;
	-webkit-animation-duration: 0ms !important;
	transform: none !important;
	animation-name: none !important;
	animation-duration: 0ms !important;
}

header.slideup.out {
	-webkit-transform: none !important;
	-webkit-animation-name: none !important;
	-webkit-animation-duration: 0ms !important;
	transform: none !important;
	animation-name: none !important;
	animation-duration: 0ms !important;
}

header.slideup.in {
	-webkit-transform: none !important;
	-webkit-animation-name: none !important;
	-webkit-animation-duration: 0ms !important;
	transform: none !important;
	animation-name: none !important;
	animation-duration: 0ms !important;
}

footer.ui-panel-animate {
	-webkit-transition: none !important;
}

footer.slidedown.out.reverse {
	-webkit-transform: none !important;
	-webkit-animation-name: none !important;
	-webkit-animation-duration: 0ms !important;
	transform: none !important;
	animation-name: none !important;
	animation-duration: 0ms !important;
}

footer.slidedown.in.reverse {
	-webkit-transform: none !important;
	-webkit-animation-name: none !important;
	-webkit-animation-duration: 0ms !important;
	transform: none !important;
	animation-name: none !important;
	animation-duration: 0ms !important;
}

footer.slidedown.out {
	-webkit-transform: none !important;
	-webkit-animation-name: none !important;
	-webkit-animation-duration: 0ms !important;
	transform: none !important;
	animation-name: none !important;
	animation-duration: 0ms !important;
}

footer.slidedown.in {
	-webkit-transform: none !important;
	-webkit-animation-name: none !important;
	-webkit-animation-duration: 0ms !important;
	transform: none !important;
	animation-name: none !important;
	animation-duration: 0ms !important;
}

footer.slideup.out.reverse {
	-webkit-transform: none !important;
	-webkit-animation-name: none !important;
	-webkit-animation-duration: 0ms !important;
	transform: none !important;
	animation-name: none !important;
	animation-duration: 0ms !important;
}

footer.slideup.in.reverse {
	-webkit-transform: none !important;
	-webkit-animation-name: none !important;
	-webkit-animation-duration: 0ms !important;
	transform: none !important;
	animation-name: none !important;
	animation-duration: 0ms !important;
}

footer.slideup.out {
	-webkit-transform: none !important;
	-webkit-animation-name: none !important;
	-webkit-animation-duration: 0ms !important;
	transform: none !important;
	animation-name: none !important;
	animation-duration: 0ms !important;
}

footer.slideup.in {
	-webkit-transform: none !important;
	-webkit-animation-name: none !important;
	-webkit-animation-duration: 0ms !important;
	transform: none !important;
	animation-name: none !important;
	animation-duration: 0ms !important;
}
JQM
0
ответ дан 31 October 2019 в 13:36

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

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

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

1
ответ дан 31 October 2019 в 13:36

У меня была та же проблема, я смог зафиксировать ее путем добавления, что следующее преобразовывает код к элементу фиксированной позиции, (transform: translateZ(0);-webkit-transform: translateZ(0);), который вынуждает браузер использовать аппаратное ускорение для доступа к device’s графическому блоку обработки (GPU), чтобы заставить пиксели полететь. Веб-приложения, с другой стороны, выполненный в контексте браузера, который позволяет программному обеспечению сделать большинство (если не все) рендеринга, приводящего к меньшему количеству лошадиной силы для переходов. Но сеть нагоняла, и большинство поставщиков браузера теперь обеспечивает графическое аппаратное ускорение посредством конкретных правил CSS.

Используя - преобразуйте WebKit: translate3d (0,0,0); ударит GPU в действие для переходов CSS, делая их более гладкими (более высокий кадр/с).

Примечание: translate3d (0,0,0) ничего не делает с точки зрения того, что Вы видите. это перемещает объект 0px в x, y и оси z. Это - только техника для принуждения аппаратного ускорения. 

#element {
    position: fixed;
    ...
    /* MAGIC HAPPENS HERE */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}
0
ответ дан 31 October 2019 в 13:36

В случае, если Вы попробовали все, и Вы все еще боретесь, пытаясь устранить эту проблему (как, я был), попытайтесь обновить свою мобильную версию jQuery. В работах v1.3.1 data-position="fixed" как он должен из поля. Я не видел это предложение нигде, и это - первая вещь проверить прежде, чем попробовать любой код, таким образом, я думал, что упомяну это.

0
ответ дан 31 October 2019 в 13:36

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

, или

Добавляют это к Javascript

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

Более старые версии использования jQuery .fixedtoolbar().

jQuery Мобильные Документы - События

111
ответ дан 31 October 2019 в 13:36 
<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
ответ дан 31 October 2019 в 13:36 
        $(document).bind("mobileinit", function() {
             $.support.touchOverflow = true;

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

        });

Это работает. Протестированный в Android 2.3

3
ответ дан 31 October 2019 в 13:36

добавьте к своему нижнему колонтитулу 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
ответ дан 31 October 2019 в 13:36

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

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

$("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);
1
ответ дан 31 October 2019 в 13:36

Это - то, что работало на меня:

В функции 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
ответ дан 31 October 2019 в 13:36

Другие вопросы по тегам:

Похожие вопросы: