--- 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: "../" ---
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
.
Both jasny-bootstrap.js
and jasny-bootstrap.min.js
contain all plugins in a single file.
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:
{% highlight js %} $(document).off('.alert.data-api') {% endhighlight %}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.
{% highlight js %} $(".fileinput").fileinput().addClass("fat") {% endhighlight %}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')
.
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.
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.
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.
{% highlight html %} {% endhighlight %}For better understanding, have a look at the off canvas slide in menu, off canvas push menu and off canvas reveal menu examples.
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.
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"
.
Call the input mask via javascript:
{% highlight js %} $('.navmenu').offcanvas() {% endhighlight %}Options can be placed both on control and on target menu element.
Name | type | default | description |
---|---|---|---|
canvas | string | false | 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. |
exclude | string | null | Set css selectors for elements, that have fixed positioning and that should not be moved when showing\hiding menu. |
disableScrolling | boolean | true | Disable scrolling when the off canvas element is shown, by setting overflow to hidden for the body. |
backdrop | boolean | false | If backdrop should be shown when menu is opened, in modal-like style. |
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.
If there are two (or more) menus on the page, there can be only one opened at a time. When menu attempts to be opened, already opened one will be closed first. It's almost fully automated, accept that data-exclude
option should be set for each menu, holding references to other menus. For example, if we have two menus #menu-left
and #menu-right
, then they should have the following option set, correspondingly: data-exclude="#menu-right"
and data-exclude="#menu-left"
.
Initializes the off canvas element with an optional options.
Toggles an off canvas element to shown or hidden.
Shows an off canvas element.
Hides an off canvas element.
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). |
This plugin turns a table row into a clickable link.
Name | Description | Actions |
---|---|---|
Input mask | Input masks can be used to force the user to enter data conform a specific format. | Action |
jasny.net | Shared knowledge of Arnold Daniels aka Jasny. | Action |
Launch modal | Toggle a modal via JavaScript by clicking this row. | Action |
Name | Description | Actions |
---|---|---|
Input mask | Input masks can be used to force the user to enter data conform a specific format. | Action |
jasny.net | Shared knowledge of Arnold Daniels aka Jasny. | Action |
Launch modal | Toggle a modal via JavaScript by clicking this row. | Action |
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>
.
Call the input mask via javascript:
{% highlight js %} $('tbody.rowlink').rowlink() {% endhighlight %}Name | type | default | description |
---|---|---|---|
target | string | 'a' | A jquery selector string, to select the link element within each row. |
Makes the rows of a table or tbody clickable.
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.
Add data attributes to register an element with inputmask functionality as shown in the example above.
Call the input mask via javascript:
{% highlight js %} $('.inputmask').inputmask({ mask: '999-99-999-9999-9' }) {% endhighlight %}Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-
, as in data-mask="999-99-999-9999-9"
.
Name | type | default | description |
---|---|---|---|
mask | string | '' | A string of formatting and literal characters, defining the input mask (see below). |
placeholder | string | '_' | The character that is displayed where something needs to be typed. |
Each typed character needs to match exactly one character in the mask
option.
Character | Description |
---|---|
9 | Number |
a | Letter |
w | Alphanumeric |
* | Any character |
? | Optional - any characters following will become optional |
Initializes an input element with an input mask.
The file input plugin allows you to create a visually appealing file or image input widgets.
When uploading an image, it's possible to show a thumbnail instead of the filename.
Image preview only works in IE10+, FF3.6+, Safari6.0+, Chrome6.0+ and Opera11.1+. In older browsers the filename is shown instead.
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.
Multiple file uploads can be handled by adding multiple
attribute to file input element. Names of files are shown in name preview, joined by comma. In image preview only the first image is shown.
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.
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.
$('.fileinput').fileinput()
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
.
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. |
clearName | boolean | Sets if file input name should be cleared when input is cleared. It's true by default, to tell the server the difference between pressing clear and submit without a change in a normal form. |
maxSize | float | Use this option if you want to limit file upload size. It's in MB and should be set for .fileinput element. For ex. data-max-size="3" allows upload only for files with size <= 3MB. If several files are selected, and only one of them is greater then this option value, all files will be discarded. Event max_size.bs.fileinput is triggered on discard. |
Initializes a file upload widget.
Clear the selected file.
Reset the form element to the original value.
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. |
reset.bs.fileinput | This event is fired before the file input is reset. |
reseted.bs.fileinput | This event is fired after the file input is reset. |
max_size.bs.fileinput | This event is fired, if at least one of selected files has size greater then maxSize option, before input is cleared. |