插件 jQuery.Breakpoint 中文API文档

插件 jQuery.Breakpoint 中文API文档

源码 & 下载

• Github地址：https://github.com/martinmartinmartin/breakpoint
• 源码下载： -
• 效果演示： -

插件特点

在jQuery javascripts中使用媒体查询的简单方法！

断点的结构

断点，在这种情况下，是由以下组成的javascript对象4点的方法：condition，first_enter，enter和exit。

condition()应该true在应该激活断点时以及false何时应该取消激活时返回。最有可能的是，您需要使用媒体查询作为条件，但这不是断点插件所要求的任何方式。

$.breakpoint({
    condition: function () {
        return window.matchMedia('only screen and (min-width:500px)').matches;
    }
});

只要条件返回true，无论是在页面加载时还是在视口更改时，enter都会执行该方法。第一次发生这种情况时，可选first_enter方法将在enter方法之前执行。当条件变为false时，该exit方法将执行。但请注意，exit只有先前条件为真，该方法才会运行！

$.breakpoint({
    condition: function () {
        return window.matchMedia('only screen and (min-width:500px)').matches;
    },
    first_enter: function () {
        // Code will run the first time condition() is true.
        // Here, you might create elements to use in
        // your enter and exit methods.
    },
    enter: function () {
        // Code will run whenever condition() becomes true.
    },
    exit: function () {
        // Code will run whenever condition() becomes false
        // (if it was previously true).
        // This is where you revert the things you do in the
        // enter method.
    }
});

调试

该插件提供了一些基本调试，您可以通过设置激活它们$.breakpoint.debug = true。这将导致插件在输入或退出断点时将信息记录到浏览器控制台。toString在断点对象中添加一个方法来区分断点; 否则你会看到[object Object]断点的名称。

技巧和窍门

MatchMedia支持旧版浏览器 要window.matchMedia在旧版浏览器中使用媒体查询，您可以使用类似Paul Irish的matchMedia（）polyfill。如果您使用的是Modernizr，则可以通过选中Extra部分中的Media queries复选框来包含相同的polyfill 。

自我调用匿名函数

使用自调用匿名函数返回断点对象通常是个好主意。这样，您可以定义可在所有断点方法中使用的私有变量。

$.breakpoint((function () {
    var element;
    return {
        condition: function () {
            return window.matchMedia('only screen and (min-width:500px)').matches;
        },
        first_enter: function () {
            // Create element.
            element = $('<a>');
        },
        enter: function () {
            // Append element to DOM when condition is true.
            $('body').append(element);
        },
        exit: function () {
            // Detach element when condition is false.
            element.detach();
        }
    }
}()));