Реализация события изменения ориентации с помощью jQuery mobile в phone gap

Question

Реализация события изменения ориентации с помощью jQuery mobile в phone gap

Не мог бы кто-нибудь сообщить мне правильный код для события изменения ориентации по jquery mobile в phone gap? Где и как я могу реализовать эту функцию orientationChange?

646 4

jQuery cordova

4 ответов:

Comments

Ничего не найдено.

ghostCoder · Accepted Answer · 2013-05-07 16:44:07

$(window).bind('orientationchange', _orientationHandler);

Тогда в функции _orientationHandler есть что-то вроде:

if(event.orientation){
      if(event.orientation == 'portrait'){
                  //do something
      }
      else if(event.orientation == 'landscape') {
                    //do something
      }
}

Ettiene Grobler · Accepted Answer · 2012-04-05 12:35:47

$(window).bind( 'orientationchange', function(e){
    if ($.event.special.orientationchange.orientation() == "portrait") {
        //Do whatever in portrait mode
    } else {
        //Do Whatever in landscape mode
    }
});
Вы можете добавить событие resize в параметр event функции bind, если вы ориентируетесь на iOS и orientationchange не работает. Так как изменение ориентации запускает событие resize тоже.

agaase · Accepted Answer · 2013-12-10 01:10:16

Следующий код должен работать во всех браузерах, чтобы обнаружить изменение ориентации. Он не использует jQuery mobile event, но, кажется, работает для большинства устройств.
1. var isIOS = /safari/g.test(navigator.userAgent.toLowerCase());
2. var ev = isIOS ? 'orientationchange' : 'resize'; 
3. var diff = (window.innerWidth-window.innerHeight);
4. $(window).bind(ev,function(){
5.     setTimeout(function(){
6.         if(diff*((window.innerWidth-window.innerHeight)) < 0)
7.             orientationChanged();
8.     },500);
9. });
Строка 2 принимает событие resize для любых браузеров, отличных от safari, поскольку другие браузеры на других устройствах принимают событие resize более последовательно, чем событие orientation change. http://www.quirksmode.org/m/table.html

Строка 5 выполняет проверку в таймаут, так как некоторые из родного браузера android не немедленно займитесь новой шириной.

Строка 6 для изменения ориентации произведение разности старой и новой высоты и ширины должно быть отрицательным.

itsjavi · Accepted Answer · 2014-06-18 13:54:11

Я использую это в своих мобильных шаблонах, так как событие orientationchange не было запущено в iOS 7 Safari:

    // ORIENTATION CHANGE TRICK
    var _orientation = window.matchMedia("(orientation: portrait)");
    _orientation.addListener(function(m) {
        if (m.matches) {
            // Changed to portrait
            $('html').removeClass('orientation-landscape').addClass('orientation-portrait');
        } else {
            // Changed to landscape
            $('html').removeClass('orientation-portrait').addClass('orientation-landscape');
        }
    });
    //  (event is not triggered in some browsers)
    $(window).on('orientationchange', function(e) {
        if (e.orientation) {
            if (e.orientation == 'portrait') {
                $('html').removeClass('orientation-landscape').addClass('orientation-portrait');
            } else if (e.orientation == 'landscape') {
                $('html').removeClass('orientation-portrait').addClass('orientation-landscape');
            }
        }
    }).trigger('orientationchange');
    // END TRICK