jquery-link-flyout
jQuery plugin that creates the basic interactivity for a link that expands and collapses a flyout
;
Deprecated
This plugin is deprecated.
Please use any of the following plugins instead:
Install
npm install jquery-link-flyout
Example
Markup before plugin:
Notifications Flyout Title Flyout Content
Execute plugin:
;
Markup after plugin:
Notifications Notifications Flyout Title Flyout Content
'Click' event on stealth button will now toggle aria-expanded state of button. CSS can use this state to hide/show overlay. For example:
Options
autoCollapse
- whether overlay collapses when focus leaves the widgetanchorSelector
- selector for anchor element (default: '.flyout__anchor, > a')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')
Dependencies
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.
Test 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-link-flyout
Code Coverage
https://coveralls.io/github/ianmcburnie/jquery-link-flyout?branch=master