---
layout: default
title: JavaScript
slug: js
lead: "Bring Bootstrap's components to life with over a dozen custom jQuery plugins. Easily include them all, or one by one."
base_url: "../"
---
Overview
Individual or compiled
Plugins can be included individually (using Jasny Bootstrap's individual *.js files), or all at once (using jasny-bootstrap.js or the minified jasny-bootstrap.min.js).
The Jasny Bootstrap plugins work with or without loading vanilla Bootstrap's bootstrap.js.
Do not attempt to include both.
Both jasny-bootstrap.js and jasny-bootstrap.min.js contain all plugins in a single file.
Data attributes
You can use all Jasny Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first-class API and should be your first consideration when using a plugin.
That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the document namespaced with data-api. This looks like this:
{% highlight js %}
$(document).off('.data-api')
{% endhighlight %}
Alternatively, to target a specific plugin, just include the plugin's name as a namespace along with the data-api namespace like this:
We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon.
All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):
{% highlight js %}
$("#myMenu").offcanvas() // initialized with defaults
$("#myMenu").offcanvas({ autohide: false }) // initialized with no autohide
$("#myMenu").offcanvas('show') // initializes and invokes show immediately
{% endhighlight %}
Each plugin also exposes its raw constructor on a Constructor property: $.fn.popover.Offcanvas. If you'd like to get a particular plugin instance, retrieve it directly from an element: $('.navmenu').data('offcanvas').
No conflict
Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call .noConflict on the plugin you wish to revert the value of.
{% highlight js %}
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
{% endhighlight %}
Events
Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. show) is triggered at the start of an event, and its past participle form (ex. shown) is trigger on the completion of an action.
As of 3.1.2, all Bootstrap events are namespaced.
All infinitive events provide preventDefault functionality. This provides the ability to stop the execution of an action before it starts.
{% highlight js %}
$('#myMenu').on('show.bs.offcanvas', function (e) {
if (!data) return e.preventDefault() // stops menu from being shown
})
{% endhighlight %}
Off canvas offcanvas.js
Example
The offcanvas plugin allows you to hide an element from sight and than show it by moving either that or any other element. It's intended to be used for off canvas navigation, like push menus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in aliquet nisl. Praesent sed leo congue, fringilla eros eu, tempus metus. Nam mollis odio ipsum, non vehicula ipsum accumsan sodales. Morbi varius vitae elit euismod cursus. Donec a dapibus justo, in facilisis nisi. Suspendisse ut turpis dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dui risus, tincidunt at odio ut, ultrices dignissim ipsum. Cras ultrices erat nec leo luctus varius. Nulla sollicitudin tincidunt nulla, ut porta mauris volutpat vitae. Suspendisse ornare dolor sit amet massa venenatis pulvinar.
Add .offcanvas to hide an element. Alternatively add .offcanvas-* to hide an element up to a specific viewport width. Adding the .offcanvas class is not required. You may also hide an element by any other means.
The effect works best for elements positioned to the top, bottom, left or right of the window, either with absolute or fixed positioning.
When shown, the plugin adds .canvas-slid to the element that has slid.
Via data attributes
Add data-toggle="offcanvas" and a data-target to control, assigning it to show and hide the target element. The data-target attribute accepts a CSS selector to apply the collapse to.
Optionally add a data-canvas attribute to slide a canvas instead of only the target element. For a push menu set data-canvas="body".
If set, the canvas will be moved on show and hide instead of the target element. This creates alternative effects.
toggle
boolean
true
Toggles the off canvas element on invocation
placement
string
'auto'
Where to position the element at the start of the animation. For example, if placement is "left", the element will slide from left to right. The default option "auto" guesses the placement based on position and dimension.
autohide
boolean
true
Hide the off canvas element if clicked anywhere other that the element.
recalc
boolean
true
Calculate if off canvas should be disabled for this viewport width on window resize. If your elements always gets hidden on window resize, try setting this to false.
disableScrolling
boolean
true
Disable scrolling when the off canvas element is shown, by setting overflow to hidden for the body.
Graceful degradation
For browsers that don't support transform (mainly IE8), the target option is ignored. In that case, the plugin will always slide the target element. In that case .canvas-slid will be added to the target element instead.
Methods
.offcanvas(options)
Initializes the off canvas element with an optional options.
.offcanvas('toggle')
Toggles an off canvas element to shown or hidden.
.offcanvas('show')
Shows an off canvas element.
.offcanvas('hide')
Hides an off canvas element.
Events
Event Type
Description
show.bs.offcanvas
This event fires immediately when the show instance method is called.
shown.bs.offcanvas
This event is fired when the target has been made visible to the user (will wait for CSS transitions to complete).
hide.bs.offcanvas
This event is fired immediately when the hide instance method has been called.
hidden.bs.offcanvas
This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
Row link rowlink.js
Example
This plugin turns a table row into a clickable link.
Add class .rowlink and attribute data-link="row" to a <table> or <tbody> element. For other options append the name to data-, as in data-target="a.mainlink" A cell can be excluded by adding the .rowlink-skip class to the <td>.
A jquery selector string, to select the link element within each row.
Methods
.rowlink(options)
Makes the rows of a table or tbody clickable.
Input mask inputmask.js
Example
Input masks can be used to force the user to enter data conform a specific format. Unlike validation, the user can't enter any other key than the ones specified by the mask.
{% highlight html %}
{% endhighlight %}
Usage
Via data attributes
Add data attributes to register an element with inputmask functionality as shown in the example above.
Image preview only works in IE10+, FF3.6+, Safari6.0+, Chrome6.0+ and Opera11.1+. In older browsers the filename is shown instead.
Usage
Add .fileinput to the container. Elements inside the container with .fileinput-new and .fileinput-exists are shown or hidden based on the current state. A preview of the selected file is placed in .fileinput-preview. The text of .fileinput-filename gets set to the name of the selected file.
The file input widget should be placed in a regular <form> replacing a standard <input type="file">. The server side code should handle the file upload as normal.
Via data attributes
Add data-provides="fileinput" to the .fileinput element. Implement a button to clear the file with data-dismiss="fileinput". Add data-trigger="fileinput" to any element within the .fileinput widget to trigger the file dialog.
Via JavaScript
$('.fileinput').fileinput()
Layout
Using the given elements, you can layout the upload widget the way you want, either with a fixed width and height or with max-width and max-height.
Options
Name
type
description
name
string
Use this option instead of setting the name attribute on the <input> element to prevent it from being part of the post data when not changed.
Methods
.fileinput(options)
Initializes a file upload widget.
.fileinput('clear')
Clear the selected file.
.fileinput('reset')
Reset the form element to the original value.
Events
Event Type
Description
change.bs.fileinput
This event is fired after a file is selected.
clear.bs.fileinput
This event is fired when the file input is cleared.