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

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

这里的例子