jquery - jQuery Mobile：在方向更改时隐藏页眉/页脚

Question

当调用设备方向事件时，我需要能够隐藏页眉/页脚（我也愿意将它们的 data-position="fixed" 属性更改为非固定）

我试过了：

$(window).bind('orientationchange resize', function(event){

            if(event.orientation == 'portrait') {
                //do something
            } 
            if (event.orientation == 'landscape') {
                $.mobile.fixedToolbars.show(false);
            }
    });

我也用过：

$.mobile.fixedToolbars.hide(true);

但似乎两者都没有奏效。这是否已从 JQM 1.1 中删除？

Answer 1

使用 css 媒体查询，根据设备方向隐藏元素非常简单：

/* portrait */
@media screen and (orientation:portrait) {
  /* portrait-specific styles */
}

/* landscape */
@media screen and (orientation:landscape) {
  /* landscape-specific styles */
}

这是工作示例：

http://jsfiddle.net/5TDg9/bwzdr/show/

（请务必使用您的移动设备打开此链接）

---

编辑：

我用基于javascript的方向检测（添加到css）改进了上面的示例，理论上你可以在“case”之后传递任何东西：

$(window).bind( 'orientationchange', function(e){
    var orientation="portrait";
    if(window.orientation == -90 || window.orientation == 90) orientation = "landscape";

    $("#status").html(orientation);  

    switch(orientation){
      case 'portrait':
        // alert('portrait');
        $.mobile.fixedToolbars.setTouchToggleEnabled(true);
        break;
      case 'landscape':
        // alert('landscape');        
        $.mobile.fixedToolbars.setTouchToggleEnabled(false);
        break;
      default:
        break;
    };        
});

这里的例子

Answer 2

你可以使用类似的东西：

$(window).bind('orientationchange', function(event) {
    if (event.orientation == 'landscape' ) {
        $.mobile.fixedToolbars.show(false);
    } else {
        $.mobile.fixedToolbars.show(true);
    }
});

Answer 3

根据页脚的名称，您可以在方向检测功能中简单地执行此操作。

yourfooter.hide();

这与将 div 设置为 style="display:none;" 相同

Answer 4

在 JQM 1.1 中，函数的名称全部小写。不再支持以前的方法。

节目：

$("[data-position='fixed']").fixedtoolbar('show');

隐藏：

$("[data-position='fixed']").fixedtoolbar('hide');

有关文档的更多信息。