Fusionary jQuery Plugins
This repo contains some jQuery plugins that we might use at Fusionary. They are sparsely documented below.
All of the following require jQuery. Some require other things, as noted.
jquery.accordiontabs.js
$.fn.accordiontabs(options)
Extends the tabs widget so that tabs will turn into accordion at a certain breakpoint.
options:
Same options as .tabs()
, plus:
breakpoint
: Number. Defaultundefined
isAccordion
: FunctionaccordionCollapsible
: BooleanisAccordionClass
: StringaccordionShow
: Object{effect: 'slideDown', duration: 200}
headingHtml
: Function
Requires:
- jQuery UI Tabs
- Custom CSS to change the display of tabs nav, etc. depending on presence of isAccordionClass
jquery.cachedajax.js
$.cachedAjax(url, options)
Same options as $.ajax()
Returns the jqXHR
Promise-like object
Requires:
- Begins with
import {serialize} from './url'
, so you don't have to do anything if you're using it with the rest of the repo and using Babel/Webpack/whatever
jquery.modal.js
Modal plugin.
Usage
// Initialize; // Open;
Styles
Default stylesheet is at css/jquery.modal.css. Note that if you change templates, the default styles may no longer work.
Default options:
settings = keepFocus: true templates: modal: '<div class="Modal" aria-live="polite"></div>' content: '<div class="Modal-content"></div>' closeDiv: '<div class="Modal-close"></div>' closeBtn: '<button class="Modal-closeBtn Button Button--close">×</button>' classes: modal: 'js-modal' content: 'js-modalContent' closeDiv: 'js-closeModalWrapper' closeBtn: 'js-closeModal' active: 'is-active' // events onInit: null beforeOpen: null // If show === false in the callback arg, it does not go through with the open: beforeOpenAsync: null // function(data, callback) { /* do something async */ callback(show); } afterOpen: null beforeClose: null afterClose: null;
Methods
init
: This is the default method. Creates the modal div and appends it to the body.open
: "Opens" the modal by adding the "is-active" class.close
: "Closes" the modal by removing the "is-active" class.destroy
: Removes the modal and its data & events.options
: Gets or sets options for the modal.
jquery.formfield.js
$.fn.formField(options)
Widget-like plugin that allows for the "float-label" thing.
Default options:
settings = emptyClass: 'is-empty' notEmptyClass: 'is-notEmpty' focusClass: 'is-focused' requiredClass: 'is-required' containers: '.FormField--floatLabel' inputs: '.FormField-input' labels: '.FormField-label';
Methods:
init
: This is the default method.setFields
: e.g.$('form or formFieldContainer(s)').formField('setFields', options)
. This is helpful if.formField()
has already been called on the form and fields are injected later .destroy
: e.g.$('form or formFieldContainer(s)').formField('destroy')
options
Requires:
- Custom CSS. A base css file can be imported from fmjs/css/jquery.formfield.css
jquery.imagesloaded.js
$.fn.imagesLoaded(function, context)
Executes a function when images have loaded.
- If none of the selected elements is an image, executes once for each selected element once all images within it have loaded.
- If any of the selected elements is an image itself, executes when all those images have loaded
Default context is first image if there are images in the collection, or current DOM element if no images in collection.