RwdHandler
Handling responsive behavior.
Execute given behavior under specific width, and execute rollback function when the screen width not in the specific width.
Installation
Just clone or download the zip of this repository
or via npm:
or
$ yarn add rwd-handler
Setup
<script src='path/to/RwdHandler.min.js'></script>
or
import RwdHandler from 'rwd-handler';
RwdHandler()
- minWidth: number
Minimum width of screen.
- maxWidth: number
Maximum width of screen.
- behavior: function
The function going to execute under given screen width. - rollback: function
The function for returning behavior to previous state.
NOTE: If rollback function is given and an event listener is added in behavior, the event should call off() in rollback function. e.g. $(element).off('event'), or call off() before bind the event in behavior. e.g. $(element).off('event').on('event', fn).
const rwdHandler = new RwdHandler({
minWidth: 480,
maxWidth: 720,
behavior: rwdBehavior,
rollback: rollback
});
execute()
Execute rwd behavior under specific width, and execute rollback function when the screen width not in the specific width.
rwdHandler.execute();
stopExecute()
Stop executing rwd behavior.
rwdHandler.stopExecute();
changeDetectWidth(minWidth, maxWidth)
Change rwd detect width.
- minWidth: number
Minimum width of screen.
- maxWidth: number
Maximum width of screen.
rwdHandler.changeDetectWidth(0, 720);
changeBehavior(behavior)
Change rwd behavior.
- behavior: function
The function going to execute under given screen width.
rwdHandler.changeBehavior(behavior);
changeRollback(rollback)
Change rwd rollback function.
- rollback: function
The function for returning behavior to previous state.
rwdHandler.changeRollback(rollback);
changeConfig(options)
Change all handler config.
- options: object
RwdHandler options.
rwdHandler.changeConfig(options);