JQuery Mobile Fixed Toolbar 및 Footer Bar가 사라집니다.

UFO ET IT

JQuery Mobile Fixed Toolbar 및 Footer Bar가 사라집니다.

ufoet 2020. 11. 26. 20:26

JQuery Mobile Fixed Toolbar 및 Footer Bar가 사라집니다.

JQuery Mobile 버전 4.1a를 사용하고 있으며 다음을 사용하고 있습니다.

data-position="fixed"

머리글과 바닥 글 모두에.

콘텐츠를 스크롤하면 사라졌다가 다시 나타납니다.

페이지를 스크롤 할 때마다 사라지지 않고 제자리에 머물게하는 방법이 있습니까?

감사

data-tap-toggle="false"요소에 추가

또는

이것을 자바 스크립트에 추가

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

이전 버전의 jQuery는 .fixedtoolbar().

jQuery Mobile 문서-이벤트

해결책을 찾았습니다. 내 프로젝트에서 테스트했으며 매력처럼 작동합니다.

다음은 URL입니다 : https://github.com/yappo/javascript-jquery.mobile.iscroll

AppML에서 사용하는 것과 동일한 JS 솔루션입니다.

또한 다음은 데모입니다.

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

추신 : 실제 데모보다 내 프로젝트에서 더 잘 작동하므로 시도해 볼 가치가 있습니다.

즐기세요 : o)

내 프로젝트에서 jquery 모바일 iscroll에 문제가 있습니다. 아마도 내가 사용하고 있던 라이브러리 중 일부가 서로 방해하고 있었을 것입니다 (나는 다른 많은 것들과 함께 knockout 및 jquery.templates를 사용하고 있습니다). 나를 위해 일한 솔루션은 jquery 모바일 스크롤 뷰였습니다. 데모는 여기에서 볼 수 있습니다.

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 모바일은 해당 장치에서 잘 작동하지 않습니다. scrollview는 실험 중이며 기본 jquery 모바일 프로젝트에 추가되지 않았습니다.

iScroll 또는 jquery 모바일 scrollview에 운이 없다면 wink 툴킷이 또 다른 옵션입니다.

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

iScroll과 마찬가지로 특정 프로젝트에서이 작업을 수행 할 수는 없었지만 그렇게 열심히 시도한 것 같지는 않습니다.

<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>

추신 : 당신이 그것에 문제가 있다면 헤더에 대해서도 그렇게 할 수 있습니다. 건배

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

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

        });

작동합니다. Android 2.3에서 테스트 됨

나는 Satch3000의 답변에 코멘트를 추가하고 싶었지만 그렇게 할 수있는 옵션이 없었습니다. 이유를 모르겠습니다. https://github.com/yappo/javascript-jquery.mobile.iscroll 시도 했지만 안타깝게도 최신 jquery 모바일 libs (http://code.jquery.com/mobile/1.0b1/jquery)에서는 작동하지 않습니다. .mobile-1.0b1.min.js)

바닥 글에 추가하고 바닥 글 에서 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;
}

건배.

$ .mobile.fixedToolbars.setTouchToggleEnabled (false)는 저에게 적합하지 않았지만 다음과 같이 javascript-jquery.mobile.iscroll 파일을 편집하면 Satch3000이 제안하고 user418775가 쿼리 한 iscroll 솔루션의 문제를 해결하는 것으로 보입니다.

라인 변경 (99) ...

if ($ .mobile.activePage.data ( "iscroll") == "enable") {

에...

if (($ .mobile.activePage) && ($ .mobile.activePage.data ( "iscroll") == "enable")) {

나는 프랑스어입니다. 영어로 죄송합니다.

이 코드로이 문제를 수정했지만 완벽하지는 않습니다 (상황에 맞게 조정해야 함).

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

이것은 나를 위해 일한 것입니다.

함수 내에 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" ) );
      });

아주 간단합니다.

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

그것은 나를 위해 작동합니다.

모든 것을 시도했지만 여전히이 문제를 해결하는 데 어려움을 겪고있는 경우 (예 : 저처럼) jQuery 모바일 버전을 업데이트 해보십시오. v1.3.1에서는 data-position="fixed"즉시 사용할 수있는 것처럼 작동합니다. 나는이 제안을 아무데도 보지 못했고 어떤 코드를 시도하기 전에 먼저 확인해야 할 것이기 때문에 언급 할 것이라고 생각했습니다.

나는 같은 문제를 겪고 있었는데, 고정 위치 요소 ( transform: translateZ(0);-webkit-transform: translateZ(0);)에 다음 변환 코드를 추가 하여 브라우저가 하드웨어 가속을 사용하여 장치의 그래픽 처리 장치 (GPU)에 액세스하여 픽셀을 날리게 함으로써 문제를 해결할 수있었습니다 . 반면에 웹 응용 프로그램은 브라우저 컨텍스트에서 실행되므로 소프트웨어가 렌더링의 대부분 (전부는 아니지만)을 수행 할 수 있으므로 전환 성능이 떨어집니다. 그러나 웹이 따라 잡고 있으며 대부분의 브라우저 공급 업체는 이제 특정 CSS 규칙을 통해 그래픽 하드웨어 가속을 제공합니다.

-webkit-transform 사용 : translate3d (0,0,0); CSS 전환을 위해 GPU를 작동시켜 더 매끄럽게 만듭니다 (높은 FPS).

참고 : translate3d (0,0,0)은 보이는 것과 관련하여 아무 작업도 수행하지 않습니다. x, y 및 z 축에서 개체를 0px만큼 이동합니다. 하드웨어 가속을 강제하는 기술 일뿐입니다.

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

JQM 1.3.2에서 여기 내 솔루션이 있습니다.

고정 머리글 / 바닥 글에 data-tap-toggle = "false"추가
JQM 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;
}

$.mobile.fixedToolbars.setTouchToggleEnabled(false);

그러면 페이지를 클릭 / 터치 할 때 도구 모음이 숨겨지지 않습니다.

참고 URL : https://stackoverflow.com/questions/5763619/jquery-mobile-fixed-toolbar-and-footer-bar-disappears

'UFO ET IT' 카테고리의 다른 글

속성 선택기 식 (0)	2020.11.27
Ubuntu 10.10 (Maverick Meerkat)에서 직렬 -USB 장치에 터미널을 연결하려면 어떻게해야합니까? (0)	2020.11.27
Java에서 SortedMap 인터페이스를 사용하는 방법은 무엇입니까? (0)	2020.11.26
어떻게 Java.util.Map을 현명한 방법으로 소포에 작성합니까? (0)	2020.11.26
Xcode 4.3을 설치 한 후 MacPort 기능을 사용할 수 없습니다. (0)	2020.11.26

현재글JQuery Mobile Fixed Toolbar 및 Footer Bar가 사라집니다.

ufoet

JQuery Mobile Fixed Toolbar 및 Footer Bar가 사라집니다.

JQuery Mobile Fixed Toolbar 및 Footer Bar가 사라집니다.

'UFO ET IT' 카테고리의 다른 글

'UFO ET IT'의 다른글

티스토리툴바

JQuery Mobile Fixed Toolbar 및 Footer Bar가 사라집니다.

JQuery Mobile Fixed Toolbar 및 Footer Bar가 사라집니다.

'UFO ET IT' 카테고리의 다른 글

'UFO ET IT'의 다른글

관련글

티스토리툴바