阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.Breakpoint 中文API文档

      插件 jQuery.Breakpoint 中文API文档

      源码 & 下载

      插件特点

      在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();
              }
          }
      }()));
      
      目录
      目录