Question

我需要能够在调用设备方向事件时隐藏页眉/页脚（我还决定将其data-position =“fixed”属性更改为not-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;
    };        
});

示例here

Answer 2

在JQM 1.1中，函数的名称全部为小写。不再支持上一个方法。

显示：

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

隐藏：

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

<强> More info on the docs.

Answer 3

根据页脚的名称，您只需在方向检测功能中执行此操作即可。

yourfooter.hide();

与将div设置为style =“display：none;”

相同

Answer 4

您可以使用以下内容：

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

jQuery Mobile：隐藏方向更改时的页眉/页脚

4 个答案: