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.

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:

$(document).off('.data-api')

Alternatively, to target a specific plugin, just include the plugin's name as a namespace along with the data-api namespace like this:

$(document).off('.alert.data-api')

Programmatic API

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.

$(".fileinput").fileinput().addClass("fat")

All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):

$("#myMenu").offcanvas()                      // initialized with defaults
$("#myMenu").offcanvas({ autohide: false })   // initialized with no autohide
$("#myMenu").offcanvas('show')                // initializes and invokes show immediately</p>

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.

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

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.

$('#myMenu').on('show.bs.offcanvas', function (e) {
  if (!data) return e.preventDefault() // stops menu from being shown
})

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.

<nav id="myNavmenu" class="navmenu navmenu-default navmenu-fixed-left offcanvas" role="navigation">
  <a class="navmenu-brand" href="#">Brand</a>
  <ul class="nav navmenu-nav">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </ul>
</nav>
<div class="navbar navbar-default navbar-fixed-top">
  <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target="#myNavmenu" data-canvas="body">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
</div>

Usage

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".

Via JavaScript

Call the input mask via javascript:

$('.navmenu').offcanvas()

Options

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