jquery-button-flyout
jQuery plugin that creates the basic interactivity for a button that expands and collapse a flyout.
;
Deprecated
This plugin is deprecated and no longer maintained!.
Please use any of the following plugins instead:
Install
npm install jquery-button-flyout
Example
Markup before plugin:
Notifications <!-- flyout content -->
Execute plugin:
;
Markup after plugin:
Notifications <!-- flyout content -->
'Click' event on button will now toggle aria-expanded state of button. CSS can use this state to hide/show overlay. For example:
Options
autoCollapse
- auto collapse flyout when focus leaves the widget (default: true)buttonSelector
- selector for button element (default: '.flyout__button, > button, > a[role=button]')debug
- print debug statements to console (defualt: false)focusManagement
- set focus to 'none, 'overlay', 'first' or an ID (default: 'none')overlaySelector
- selector for overlay element (default: '.flyout__overlay')
Events
flyoutCollapse
- the flyout has collapsedflyoutExpand
- the flyout has expanded
Development
Useful NPM task runners:
npm start
for local browser-sync development.npm test
runs tests & generates reports (see reports section below)npm run tdd
test driven development: watches code and re-tests after any changenpm run build
cleans, lints, tests and minifies
Execute npm run
to view all available CLI scripts.
Reports
Each test run will generate the following reports:
/test_reports/coverage
contains Istanbul code coverage report/test_reports/html
contains HTML test report/test_reports/junit
contains JUnit test report
CI Build
https://travis-ci.org/ianmcburnie/jquery-button-flyout
Code Coverage
https://coveralls.io/github/ianmcburnie/jquery-button-flyout?branch=master