【问题标题】:JQuery Mobile Fixed Toolbar and Footer Bar disappears?JQuery Mobile 固定工具栏和页脚栏消失?
【发布时间】:2011-08-11 10:34:25
【问题描述】:

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

data-position="fixed"

在页眉和页脚上。

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

有什么方法可以让它保持在它的位置并且不会在我每次滚动页面时消失?

谢谢

【问题讨论】:

  • 页脚消失是设计使然(注意:可能不是 /good/ 设计),当您点击/单击页面内容时会发生这种情况。在为我的应用程序解决这个问题时,我遇到了各种论坛主题,人们都在努力禁用该功能。我还没来得及修复它。我可能会将我的网络应用程序迁移到 AppML(基于 jQTouch),它更加成熟。
  • 感谢您的信息。我希望有另一种解决方案,因为我真的不想迁移整个项目只是为了发现拐角处有一个修复。另外,项目快完成了:o/
  • 显然,我迁移的原因不仅仅是页脚(它更接近原生应用程序的外观和感觉,并且具有更好的跨设备兼容性)。只是想我会给你两便士 :) 希望有一个简单的解决方案来解决你的问题!
  • 不知道,没研究那么深;你会想要评估 jQTouch 是否有一个,AppML 只是简单地包装了它。
  • 找到了一个解决方案..我已经测试过了,效果很好,和 AppML 使用的 js 相同。

标签: jquery-mobile


【解决方案1】:

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

将此添加到 Javascript

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

旧版本的 jQuery 使用 .fixedtoolbar()

jQuery Mobile Docs - Events

【讨论】:

  • 你如何做相反的事情?我想使用data-position="fixed",因为当没有足够的内容时它会将页脚粘在底部,但我不希望它默认浮动。有没有办法在页面显示时自动切换隐藏并防止它再次出现?
  • 在对源代码进行了一些挖掘之后,我想出了data-visible-on-page-show="false" 以防止它默认弹出但仍停留在底部。
【解决方案2】:

我在项目中遇到了 jquery mobile iscroll 的问题。也许我正在使用的一些库相互干扰(我正在使用敲除和 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 上运行得非常好。在我的旧 android HTC magi 上,它不能很好地工作,但没有一个 jquery mobile 在该设备上运行良好。请注意,滚动视图正在试验中,尚未添加到主 jquery 移动项目中。

如果您对 iScroll 或 jquery 移动滚动视图不满意,wink 工具包是另一种选择。

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

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

【讨论】:

  • 我的 Nexus One 非常紧张。但我仍然比奇怪的内置 JQM 固定工具栏更喜欢它。谢谢。
  • 其实我正在从jqm切换到sencha touch。 Jquery mobile 在开发方面更加直观,但性能尚不具备。他们可能需要一年的时间才能在 Android 手机上拥有响应式界面。即使在 iphone 上,与 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>&nbsp;</p>
</div> 

P.S 如果您也遇到任何问题,您也可以对标题执行此操作。 干杯

【讨论】:

  • 添加 data-position="bottom" 也为我修复了它!
【解决方案4】:
        $(document).bind("mobileinit", function() {
             $.support.touchOverflow = true;

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

        });

这行得通。在 Android 2.3 中测试

【讨论】:

  • 对我来说,它适用于 Chrome 和 IE9,但不适用于 Android 2.3。页眉和页脚是固定的,但我无法滚动页面(在桌面浏览器上,我可以使用浏览器右侧的滚动条来执行此操作),除此之外您还有其他操作吗?
【解决方案5】:

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

【讨论】:

  • 无法在 Beta 版中工作?嗯,很有趣...感谢您提供的信息,我会尽快对其进行测试。
【解决方案6】:

class="FixedFooter" 添加到您的页脚,并确保从您的页脚中删除data-position="fixed"

将此添加到您的&lt;head&gt;

<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 文件似乎解决了 Satch3000 提出并由 user418775 查询的 iscroll 解决方案的问题。

    换行 (99) ...

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

    到...

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

    【讨论】:

      【解决方案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 && 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" ) );
              });
        

        【讨论】:

          【解决方案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 ) 让像素飞起来。另一方面,Web 应用程序在浏览器的上下文中运行,这使软件可以完成大部分(如果不是全部)渲染,从而减少了转换的动力。但是 Web 一直在迎头赶上,现在大多数浏览器供应商都通过特定的 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);
              }
              

              【讨论】:

                【解决方案13】:

                在 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;
                }

                【讨论】:

                  【解决方案14】:
                  $.mobile.fixedToolbars.setTouchToggleEnabled(false);
                  

                  当您单击/触摸页面时,这将阻止工具栏隐藏。

                  【讨论】:

                  • 对我不起作用。将其添加到 live('pageinit') 部分,但滚动时标题仍然消失。
                  • 这对我也不起作用。它确实可以防止工具栏在设备被触摸时消失,但在滚动时不会消失。
                  猜你喜欢
                  • 2013-11-06
                  • 1970-01-01
                  • 2016-04-15
                  • 1970-01-01
                  • 2011-10-31
                  • 2012-04-26
                  • 2012-08-25
                  • 1970-01-01
                  • 2017-09-17
                  相关资源
                  最近更新 更多