jquery - 即时禁用 Jquery 插件/函数

Question

所以我在网站上有一个幻灯片，当窗口大小是移动时我想将其变成一个列表。我在想是否有办法禁用 jquery 插件或窗口大小调整功能来禁用滑动并为幻灯片列表创建移动样式。

您认为做到这一点的最佳方法是什么？

谢谢!

Answer 1

使用带有 teardown() 的幻灯片或destroy()能够删除它创建的任何元素和事件监听器的方法。

任何使用 jQuery UI 小部件工厂的 jQuery 插件都会有这个功能，但不幸的是许多其他插件没有。你可以试试这个轮播https://github.com/richardscarrott/jquery-ui-carousel ，只需确保包含 jQuery 小部件工厂:http://jqueryui.com/widget/

其次，不要尝试嗅探设备是否是移动设备，不要陷入设备方面的思考。如果用户想在手机上查看轮播怎么办？如果他们的设备被错误地解释为移动设备怎么办？做出假设可能会反过来伤害你。检测特征和属性更安全，并且应该更适合 future 。

考虑一下您要解决的问题，如果是“如果在小视口(viewport)上以列表形式呈现此幻灯片效果会更好”，那么请继续检查窗口的大小或使用 matchMedia() 测试媒体查询在实例化插件之前(为什么要做所有工作只是为了再次撤消它)以及在视口(viewport)调整大小或设备方向发生变化时再次进行。

在普通的 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);