项目作者: lgraubner

项目描述 :
🚧 DEPRECATED - Javascript handling for breakpoints.
高级语言: JavaScript
项目地址: git://github.com/lgraubner/state-manager.git
创建时间: 2015-06-23T10:11:22Z
项目社区:https://github.com/lgraubner/state-manager

开源协议:MIT License

下载



🚧 DEPRECATED - This repository is deprecated in favor of mqr and will not be updated anymore. Use at your own risk.


StateManager

Travis David Dev npm

Javascript handling for mediaquery breakpoints.

This small library is a wrapper for matchMedia and matchMedia.listen to easily deal with Media Queries in Javascript.

Dependencies

None.

Supported Browsers

StateManager relies on window.matchMedia for Media Query checks which is supported by the following browsers:

  • Chrome 10+
  • Firefox 6+
  • Safari 5.1+
  • IE 10+

To support legacy browsers a polyfill is required.

Installation

Install it via npm or download the source directly.

  1. npm install responsive-state-manager --save

Classic

Include StateManager.min.js before the closing body tag.

  1. <script src="node_modules/responsive-state-manager/dist/StateManager.min.js"></script>

CommonJS

  1. var StateManager = require("responsive-state-manager");

Usage

Initialize it:

  1. var sm = new StateManager();

.register()

Registers a listener for a Media Query. The callback function is triggered every time the breakpoint is passed and the state changes. Additionally the callback is triggered when the Listener gets registered. The suplied argument is true or false depending on whether the Media Query matches.
It returns a reference to the Listener Object.

  1. var handler = sm.register("screen and (max-width: 768px)", function (matches) {
  2. // fires on register and every time the state changes
  3. if (matches) {
  4. // Media Query matches
  5. } else {
  6. // Media Query doesn't match
  7. }
  8. });

.deregister()

Deregisters an attached listener. Accepts a reference to a listener Object.

  1. sm.deregister(handler);

.matches()

You can also check directly if a media query matches.

  1. var mobile = sm.matches("screen and (max-width: 768px)"); // does not attach listener
  2. console.log(mobile); // true/false