1

デバイスオリエンテーションイベントが呼び出されたときにヘッダー/フッターを非表示にできるようにする必要があります（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);

しかし、どちらもうまくいかないようです。これはJQM1.1から削除されましたか？

4

4 に答える 4

6

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

ここの例

于 2012-10-04T15:27:27.183 に答える
0

JQM 1.1では、関数の名前はすべて小文字になっています。以前の方法はサポートされなくなりました。

公演：

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

隠れる：

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

ドキュメントの詳細。

于 2012-06-18T15:11:12.260 に答える
0

フッターの名前によっては、方向検出機能でこれを行うことができます。

yourfooter.hide();

これは、そのdivをstyle = "display：none;"に設定するのと同じです。

于 2012-10-05T18:38:03.780 に答える
0

次のようなものを使用できます：

$(window).bind('orientationchange', function(event) {
    if (event.orientation == 'landscape' ) {
        $.mobile.fixedToolbars.show(false);
    } else {
        $.mobile.fixedToolbars.show(true);
    }
});
于 2012-10-10T07:53:22.637 に答える