Отключить плагин/функцию JQuery на лету

Question

Итак, у меня есть слайд-шоу на веб-сайте, и я хочу перейти только к списку, когда размер окна является мобильным. Я думал, есть ли способ отключить плагин jquery или функции при изменении размера окна, чтобы отключить разворот и создать мобильные стили для списка слайдов.

Как вы думаете, что это лучший способ сделать это?

Спасибо!

Answer 1

проверить, требуется ли запрос от $ _SERVER ['HTTP_USER_AGENT'] и проверить, является ли user_agent мобильным браузером или использовать плагин для выполнения этой части.

http://detectmobilebrowsers.com/

Если запрос пришел от мобильного потом. перенаправлять на свою мобильную страницу.

Answer 2

Проверьте размер окна перед вызовом плагина. Например:

height = $(window).height(); 
width = $(window).width(); 
if(height > 300 || width > 200) { 
    // Initialize plugin 
} 

Или, если вы хотите, чтобы запустить его, а затем остановить его, когда окно становится слишком мал (предполагается, что плагин будет иметь возможность отключить себя):

$(window).resize(function() { 
    height = $(window).height(); 
    width = $(window).width(); 
    if(height < 300 || width < 200) { 
    // Stop plugin 
    } 
}); 

Answer 3

Используйте слайд-шоу с методом teardown() или destroy(), который может удалить любые элементы и прослушиватели событий, которые он создал.

Любой плагин jQuery, использующий фабрику виджета jQuery, будет иметь это, но, к сожалению, многие другие этого не делают. Вы можете попробовать эту карусель https://github.com/richardscarrott/jquery-ui-carousel, просто не забудьте включить фабрику виджета jQuery: http://jqueryui.com/widget/

Во-вторых, не пытайтесь понюхать, мобильное устройство или нет, не застревайте мышление с точки зрения устройств. Что делать, если пользователь хочет просматривать карусель на своем телефоне? Что делать, если их устройство неправильно интерпретируется как мобильное? Принятие предположений может вернуться, чтобы укусить вас. Обнаружение функций и свойств более безопасно и должно быть более благоприятным для будущего.

Подумайте о проблеме, которую вы пытаетесь решить, если это «это слайд-шоу будет работать лучше, если оно будет представлено в виде списка на небольших видовых экранах», а затем проверьте размер окна или проверьте медиа-запрос с помощью matchMedia(). создание экземпляра плагина (зачем делать все это просто для его отмены) и снова, если изменяется размер окна просмотра или ориентация устройства.

В равнинных JS (и для браузера относительно уточненный), который может быть что-то вроде:

var slideshowControl = function(element, breakpoint) { 

    var api; 

    var initSlideshow = function() { 
     api = new Slideshow(element); 
    }; 

    var removeSlideshow = function() { 
     api.teardown(); 
     api = undefined; 
    }; 

    // Test media query 
    return function() { 

     // Test if match media is available 
     var matchMedia = window.matchMedia || window.msMatchMedia; 

     if (! matchMedia) { 
      return; 
     } 

     if (matchMedia('all and (max-width:' + breakpoint + ')').matches && ! api) { 
      return initSlideshow(); 
     } 

     if (matchMedia('all and (min-width:' + breakpoint + ')').matches && api) { 
      return removeSlideshow(); 
     } 
    }; 

}(document.querySelector('.slideshow'), 640); 

window.addEventListener('resize', slideshowControl); 
window.addEventListener('DOMContentLoaded', slideshowControl);