1.0.5 • Published 8 years ago
media-query-event
a module that help you detect CSS media query changing event and run the callback function.
Installation
npm install media-query-event --save
Usage
var mediaQueryEvent = require('media-query-event');
mediaQueryEvent.bind(range, callback, callbackWhenPageInit);
range
| Type | Example Value | Description |
|---|
| single range | string | 'xs', 'sm', 'md', 'lg' | 由其他 range 進入到這個 range 時，觸發 callback function |
| multiple range | array | 'xs', 'sm' | 由陣列以外的 range 進入到陣列中這些 range 時，觸發 callback function |
callback
| Type | Description |
|---|
| function | A callback function that you want to run when media query is changing. |
callbackWhenPageInit
| Type | Example Value | Default Value | Description |
|---|
| boolean | true, false | false | Run the callback function when the web page initialized. |
Example
Single Range
mediaQueryEvent.bind('sm', function() {
alert('sm');
});
Multiple Range
mediaQueryEvent.bind(['md', 'lg'], function() {
alert('desktop');
});
Run callback when the page initialized
mediaQueryEvent.bind('sm', function() {
alert('sm');
}, true);
About more examples, please see the "demo" directory.