在媒体查询中调用/触发Foundation JS

Call/Firing Foundation JS in a Media Queries

本文关键字：触发 Foundation JS 调用 媒体 查询      更新时间：2023-09-26

Foundation有一些JS函数来检测媒体查询。我的问题是如何定义一些功能只是在媒体查询中发射?

确切地说，我想在medium-up上启动Foundation均衡器，或者实际上停止在移动设备上工作。

谢谢:)

@parhum，

我不确定这是否是正确的方法，但您始终可以删除data-equalizer属性并将其添加回去。

// media query event handler
if (matchMedia) {
    var mq = window.matchMedia("(min-width: 767px)");
    mq.addListener(WidthChange);
    WidthChange(mq);
}
// media query change
function WidthChange(mq) {
    if (mq.matches) {
        // window width is at least 767px
        $('.row').attr('data-equalizer','data-equalizer');
    }
    else {
        // window width is less than 767px
        $('.row').removeAttr('data-equalizer');
    }
}

由于某些原因，我无法使这个工作

Foundation.utils.register_media('custom', "(min-width: 767px)");
if (matchMedia(Foundation.media_queries['custom']).matches) {
    // window width is at least 767px
    $('.row').attr('data-equalizer', 'data-equalizer');
} else {
    // window width is less than 767px
    $('.row').removeAttr('data-equalizer');
}

预览:@Fiddle |代码:@Editor

~ Arvind

Foundation 6支持一个名为"equalizeOn"的均衡器属性，它允许您设置一个断点。均衡器将做它的东西到这个断点和向上(移动优先方法)。

这是文档的链接(章节，插件选项):http://foundation.zurb.com/sites/docs/equalizer.html

您可以通过HTML中的数据属性或JavaScript设置该选项。
相关文章：