it-swarm.dev

JQuery Mobile固定工具栏和页脚栏消失了吗?

我正在使用JQuery Mobile版本4.1a并使用:

data-position="fixed"

在页眉和页脚上。

当我滚动内容时,它会消失然后再次出现。

有没有办法让它保持在它的位置而不是每次我滚动页面时都消失?

谢谢

62
Satch3000

我找到了解决方案。我已经在我的项目上测试了它,它就像一个魅力。

这是URL: https://github.com/yappo/javascript-jquery.mobile.iscroll

它与AppML使用的JS解决方案相同。

另外,这是一个演示:

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

p.s:它在我的项目上比在他们的实际演示中效果更好,所以值得一试。

享受:o)

15
Satch3000

data-tap-toggle="false"添加到元素中

要么

将此添加到Javascript

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

旧版本的jQuery使用.fixedtoolbar()

jQuery Mobile Docs - 活动

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

如果您对标题有任何问题,也可以为标题执行此操作。干杯

4
k0sh

我的项目中有jquery mobile 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上运行得非常好。在我的旧Android HTC magi上,它不能很好地工作,但jquery mobile没有一个在该设备上运行良好。请注意,scrollview正在进行实验,尚未添加到主jquery移动项目中。

如果你对iScroll或jquery mobile scrollview没有运气,那么wink工具包是另一种选择。

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

像iScroll一样,我无法使用我的特定项目,但我认为我没有那么努力。

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

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

        });

这有效。在Android 2.3中测试过

3
nish1013

添加到您的页脚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
k0sh

我想在Satch3000的答案中添加评论,但我没有选择这样做 - 不知道为什么。我试过 https://github.com/yappo/javascript-jquery.mobile.iscroll ,但不幸的是它不适用于最新的jquery移动库(http://code.jquery.com/mobile/ 1.0b1/jquery.mobile-1.0b1.min.js)

2
user418775

这很简单。

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

这个对我有用。

1
Kalai Selvan Ravi

我是法国人抱歉我的英语;

我用这段代码解决了这个问题,但它并不完美(必须适应你的情况):

$("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
yakuzayang

$ .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”)){

1
Steve Gardner

这对我有用:

在函数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
Peter Sasburg

如果您已尝试过所有内容并且仍在努力解决此问题(就像我一样),请尝试更新您的jQuery移动版本。在v1.3.1中data-position="fixed"的工作方式应该是开箱即用的。我没有看到这个建议,这是在尝试任何代码之前首先要检查的,所以我想我会提到它。

0
user347284

我遇到了同样的问题,我能够通过将以下转换代码添加到固定位置元素(transform: translateZ(0);-webkit-transform: translateZ(0);)来修复它,它强制浏览器使用硬件加速来访问设备的图形处理单元(GPU)以使像素飞行。另一方面,Web应用程序在浏览器的上下文中运行,这使得软件可以完成大部分(如果不是全部)渲染,从而减少了转换的马力。但是Web一直在追赶,大多数浏览器厂商现在通过特定的CSS规则提供图形硬件加速。

使用-webkit-transform:translate3d(0,0,0);将GPU转换为CSS过渡的动作,使它们更平滑(更高的FPS)。

注意: translate3d(0,0,0)对你看到的内容没有任何意义。它在x,y和z轴上移动对象0px。这只是一种强制硬件加速的技术。

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

在JQM 1.3.2上,这是我的解决方案

  1. 将data-tap-toggle =“false”添加到固定的页眉/页脚
  2. 添加下面的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;
}
0
Wei Zhang