2

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

您认为最好的方法是什么？

谢谢！

4

3 回答 3

1

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

任何使用 jQuery UI 小部件工厂的 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);
于 2013-04-23T15:10:49.977 回答
0

在调用插件之前检查窗口大小。例如：

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
  }
});
于 2013-04-23T04:44:25.100 回答
-1

检查请求是否来自 $_SERVER['HTTP_USER_AGENT'] 并​​检查 user_agent 是移动浏览器还是使用插件来完成这部分。

http://detectmobilebrowsers.com/

如果请求来自手机，那么。重定向到您的移动页面。

于 2013-04-23T04:39:42.990 回答