Powered by jQuery

All the plugins depend on jQuery (this means jQuery must be included before the plugin files). Consult the frameworks bower.json to see which versions of jQuery are supported.

Each plugin has also been built to be extensible, providing events that can be tapped into to allow you to further enhance your site.

Accessibility

All Responsive's plugins have been built from the ground up to be mouse, touch and keyboard accessible. They also add the appropriate ARIA attribution where necessary to ensure that screenreaders can follow each plugin's functionality.

Data-API

All plugins come with a data-attribute driven, markup API that allows running the plugin without writing a single line of JavaScript. This is Responsive's first class API and should be your first consideration when using the plugins. This API works in a similar, yet enhanced way to Bootstraps Markup API.

To allow for situations where you might want to turn the functionality off a method has been provided that allows the ability to disable the API by unbinding all events on the document namespaced with data-api.

// Globally turn off the Responsive Data-API.
$(document).off(".data-api");

Each plugin can be individually turned off by prefixing the name of the plugin to the namespace.

// Turn off the Responsive Data-API for the carousel plugin.
$(document).off(".r.carousel.data-api");

When plugins are added to the page using this API they will also automatically register when loaded dynamically. function.

Programmatic API

As well as the recommended Data-API, Responsive also comes with a Programmatic API that can be called via JavaScript. Each plugin runs in the standard jQuery format with a single chainable structure.

// Create a modal window targeting and element with the id 'modal-target'
// and immediately show it.
$("<a/>").modal({target: "#modal-target", immediate : true});

Namespace Collision

Many jQuery plugins within UI frameworks use the same naming conventions and to prevent namespace collision each plugin has been given the ability to reassign it's functionality to a new object via a .noConflict() method call. This allows the two conflicting plugins to exist side by side.

// Reassign the Responsive Carousel plugin to a new function name. 
var responsiveCarousel = $.fn.carousel.noConflict();
$.fn.responsiveCarousel = responsiveCarousel;