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/

(не забудьте открыть эту ссылку с вашего мобильного устройства)

---

EDIT:

я улучшил выше образца с JavaScript (добавлено в css), теоретически вы можете передать что-либо после «случая»:

$(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'); 

Hide:

$("[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); 
    } 
});