Фиксированная панель инструментов jQuery Mobile и панель нижнего колонтитула исчезают?

#jquery-mobile

Вопрос:

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

 data-position="fixed"

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

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

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

Спасибо

1. Нижний колонтитул исчезает специально (примечание: возможно, не очень / хороший / дизайн), это происходит, когда вы касаетесь содержимого страницы. Пытаясь решить эту проблему для своего приложения, я наткнулся на множество тем форума, в которых люди пытались отключить функциональность. У меня все еще нет времени исправить это. Вероятно, я собираюсь перенести свое веб-приложение на AppML (на основе jQTouch), оно просто намного более зрелое.

2. Спасибо за информацию. Я надеюсь, что для этого есть другое решение, поскольку я не хочу переносить весь проект только для того, чтобы узнать, что исправление не за горами. Кроме того, проект почти завершен: o/

3. Очевидно, что я переношу по другим причинам, чем просто нижний колонтитул (просто он намного ближе к внешнему виду нативных приложений и обладает лучшей совместимостью между устройствами). Просто подумал, что стоит отдать вам свои два пенса 🙂 надеюсь, есть простое решение вашей проблемы!

4. Понятия не имею, не исследовал так глубоко; вы бы хотели оценить, есть ли он у jQTouch, AppML просто оборачивает это.

5. Найдено решение.. Я протестировал его, и он отлично работает, и это тот же js, который использует AppML.

Ответ №1:

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

или

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

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

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

Документы jQuery Mobile — События

1. Как вы делаете обратное этому? Я хочу использовать data-position="fixed" , потому что это удерживает нижний колонтитул внизу, когда содержимого недостаточно, но я не хочу, чтобы он плавал по умолчанию. Есть ли способ автоматически переключать скрытие при показе страницы и не допускать его возврата?

2. После некоторого изучения исходного кода, который я придумал data-visible-on-page-show="false" , чтобы он не появлялся по умолчанию, но все еще оставался внизу.

Ответ №2:

У меня были проблемы с 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 mobile, и это действительно хорошо работает на iphone 3gs. На моем старом Android HTC magi это работает не так хорошо, но ни один из jquery mobile не работает должным образом на этом устройстве. Обратите внимание, что scrollview находится в стадии экспериментов и не был добавлен в основной проект jquery mobile.

Если вам не повезло с iScroll или jquery mobile scrollview, другим вариантом является wink toolkit.

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

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

1. Довольно нервный на моем Nexus One. Но мне все равно это нравится намного больше, чем причудливые встроенные фиксированные панели инструментов JQM. Спасибо.

2. На самом деле я нахожусь в процессе переключения с jqm на sencha touch. Jquery mobile намного более интуитивно понятен с точки зрения разработки, но производительность просто еще не достигнута. Может пройти год, прежде чем у них появится адаптивный интерфейс на телефонах Android. Даже на iphone есть небольшая задержка по сравнению с sencha. Прокрутка sencha на телефонах HTC sense не работает, но они предположительно исправят это в следующем выпуске, который больше, чем я слышал от jqm. Переключение кажется довольно простым для меня, но мое приложение маленькое.

Ответ №3:

 <div data-role="footer" data-tap-toggle="false"
     data-theme="c" id="footer" data-position="bottom" >
    <h4 align="center" >copyright 2012 @KoshWTF</h4>
    <p>amp;nbsp;</p>
</div>

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

Ответ №4:

         $(document).bind("mobileinit", function() {
             $.support.touchOverflow = true;

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

        });

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

1. для меня это работает в Chrome и IE9, но не работает в Android 2.3. Верхний и нижний колонтитулы исправлены, но я не могу прокручивать страницу (в браузере на рабочем столе я могу сделать это с помощью скроллера справа от браузера), вы сделали что-нибудь еще, кроме этого?

Ответ №5:

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

Ответ №6:

добавьте в нижний колонтитул 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;
}

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

Ответ №7:

$.mobile.fixedToolbars.setTouchToggleEnabled(false) у меня не сработал, но редактирование файла javascript-jquery.mobile.iscroll следующим образом, похоже, решает проблему с решением iscroll, предложенным Satch3000 и запрошенным пользователем 418775.

изменение строки (99)…

если ($.mobile.activePage.data(«iscroll») == «включить») {

Для…

если (($.mobile.activePage) amp;amp; ($.mobile.activePage.data(«iscroll») == «включить»)) {

Ответ №8:

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

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

 $("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);

Ответ №9:

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

Внутри функции 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 amp;amp; st.search(/^[xy]p$/) != -1,
      dir = st amp;amp; 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" ) );
      });

Ответ №10:

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

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

У меня это работает.

Ответ №11:

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

Ответ №12:

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

Использование -webkit-transform: translate3d(0,0,0); запускает графический процессор для CSS-переходов, делая их более плавными (более высокий FPS).

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

 #element {
    position: fixed;
    ...
    /* MAGIC HAPPENS HERE */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

Ответ №13:

В JQM 1.3.2 вот мое решение

Добавьте данные-tap-toggle = «false» в исправленный верхний / нижний колонтитул
Добавьте CSS ниже, чтобы переопределить JQM 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;
}

Ответ №14:

 $.mobile.fixedToolbars.setTouchToggleEnabled(false);

Это остановит скрытие панелей инструментов при нажатии на страницу.

1. У меня не работает. Добавил его в раздел live (‘pageinit’), но заголовок по-прежнему исчезает при прокрутке.

2. У меня это тоже не сработало. Это предотвращает исчезновение панели инструментов при касании устройства, но не при прокрутке.