Dismiss
A jQuery plugin that adds the functionality to hide to any parent element it targets. Uses CSS transitions to perform the animation.
Comes with a 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 a plugin.
Examples
Adding the plugin inside any element will hide the closest parent to the plugin matching the given selector on click.
The concept that launched a thousand site redesigns. For years, web designers have coveted print for its precision layouts, lamenting the varying user contexts on the web that compromise their designs. Responsive design advocates that we shift our design thinking to make a virtue of these constraints. Using fluid grids, flexible images, and media queries to embrace the ebb and flow of the web.
Markup
/* Add inside any element. */
<button role="button" data-dismiss-target="YOUR_PARENT_SELECTOR">x</button>Methods
The dismiss plugin exposes the following method signatures.
- .dismiss(options)
-
Initialises the plugin with an optional options
object- options
-
Contains parameters to pass to the plugin.
- target
- A jQuery selector indicating which target to hide.
- closeHint
- A hidden html value that is added to the close trigger for accessibility purposes. Defaults to Click to close
Events
The dismiss plugin exposes the following events allowing the developer to tap into its behaviour.
- dismiss.r.dismiss
- This event is fired immediately when the plugins
dismissinstance method is invoked. - dismissed.r.dismiss
- This event is fired when the plugins
dismissedinstance method is invoked once the target has completed the animation and is hidden.
Binding to these events is as follows:
// Bind to the close event.
$("YOUR_TRIGGER_SELECTOR").on("dismiss.r.dismiss", function(event) {
// Your custom behaviour...
});
// Bind to the closed event.
$("YOUR_TRIGGER_SELECTOR").on("dismissed.r.dismiss", function(event) {
// Your custom behaviour...
});Data API
The dismiss plugin's default behaviour is bound using a markup API that allows running the plugin without writing a single line of JavaScript. If you need to override this behaviour the following code will allow you to do so.
// Disable the default loading behaviour
$(document).off(".r.dismiss.data-api");