<p>If you have downloaded the latest version of Bootstrap, both <strong>bootstrap.js</strong> and <strong>bootstrap.min.js</strong> contain all of these plugins.</p>
<p>If you have downloaded the latest version of Bootstrap, both <strong>bootstrap.js</strong> and <strong>bootstrap.min.js</strong> contain all of the plugins listed on this page.</p>
<h3>Data attributes</h3>
<p>...</p>
<p>You can use all 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.</p>
<p>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 body namespaced with `'data-api'`. This looks like this:
<preclass="prettyprint linenums">
$('body').off('.data-api')
</pre>
<p>Alternatively, to target a specific plugin, just include the plugins name as a namespace along with the data-api namespace like this:</p>
<preclass="prettyprint linenums">
$('body').off('.alert.data-api')
</pre>
<h3>Programmatic API</h3>
<p>...</p>
<p>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.</p>
<preclass="prettyprint linenums">
$(".btn.danger").button("toggle").addClass("fat")
</pre>
<p>All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):</p>
<preclass="prettyprint linenums">
$("#myModal").modal() // initialized with defaults
$("#myModal").modal({ keyboard: false }) // initialized with no keyboard
$("#myModal").modal('show') // initializes and invokes show immediately</p>
</pre>
<p>Each plugin also exposes it's raw constructor on a `Constructor` property: <code>$.fn.popover.Constructor</code>. If you'd like to get a particular plugin instance, retrieve it directly from an element: <code>$('[rel=popover]').data('popover')</code>.</p>
<h3>Events</h3>
<p>Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and it's past participle form (ex. <code>shown</code>) is trigger on the completion of an action.</p>
<p>All infinitive events provide preventDefault functionality. This provides the abililty to stop the execution of an action before it starts.</p>
<preclass="prettyprint linenums">
$('#myModal').on('show', function (e) {
if (!data) return e.preventDefault() // stops modal from being shown
})
</pre>
</section>
...
...
@@ -849,7 +886,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<p>The subnavigation on the left is a live demo of the affix plugin.</p>
<hrclass="bs-docs-separator">
<h2>Usage</h2>
<h3>Via data attributes</h3>
<p>To easily add affix behavior to any element, just add <code>data-spy="affix"</code> to the element you want to spy on. When the affix offsets are satisified, an <code>.affix</code> class is added to the element. </p>
It's up to you to maintain the dimensions of an element when toggling between relative and fixed positions. To see how this is done, refer to this pages subnavigation.
<p>When using affix in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:</p>
<preclass="prettyprint linenums">
...
$('[data-spy="affix"]').each(function () {
$(this).affix('refresh')
});
</pre>
</section>
<h3>Options</h3>
<p>Options can be passed via data attributes or javascript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset-y=""</code>.</p>
<tableclass="table table-bordered table-striped">
<thead>
<tr>
<thstyle="width: 100px;">Name</th>
<thstyle="width: 100px;">type</th>
<thstyle="width: 50px;">default</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td>offset</td>
<td>number | object</td>
<td>10</td>
<td>Pixels to offset from screen when calculating position of scroll. If a single number is provide, the offset will be applied in both top and left directions. To listen for a single direction, or multiple unique offsets, just provided an object <code>offset: { x: 10 }</code>.</td>
<p>{{_i}}If you have downloaded the latest version of Bootstrap, both <strong>bootstrap.js</strong> and <strong>bootstrap.min.js</strong> contain all of these plugins.{{/i}}</p>
<p>{{_i}}If you have downloaded the latest version of Bootstrap, both <strong>bootstrap.js</strong> and <strong>bootstrap.min.js</strong> contain all of the plugins listed on this page.{{/i}}</p>
<h3>{{_i}}Data attributes{{/i}}</h3>
<p>{{_i}}...{{/i}}</p>
<p>{{_i}}You can use all 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.{{/i}}</p>
<p>{{_i}}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 body namespaced with `'data-api'`. This looks like this:{{/i}}
<preclass="prettyprint linenums">
$('body').off('.data-api')
</pre>
<p>{{_i}}Alternatively, to target a specific plugin, just include the plugins name as a namespace along with the data-api namespace like this:{{/i}}</p>
<preclass="prettyprint linenums">
$('body').off('.alert.data-api')
</pre>
<h3>{{_i}}Programmatic API{{/i}}</h3>
<p>{{_i}}...{{/i}}</p>
<p>{{_i}}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.{{/i}}</p>
<preclass="prettyprint linenums">
$(".btn.danger").button("toggle").addClass("fat")
</pre>
<p>{{_i}}All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):{{/i}}</p>
<preclass="prettyprint linenums">
$("#myModal").modal() // initialized with defaults
$("#myModal").modal({ keyboard: false }) // initialized with no keyboard
$("#myModal").modal('show') // initializes and invokes show immediately</p>
</pre>
<p>{{_i}}Each plugin also exposes it's raw constructor on a `Constructor` property: <code>$.fn.popover.Constructor</code>. If you'd like to get a particular plugin instance, retrieve it directly from an element: <code>$('[rel=popover]').data('popover')</code>.{{/i}}</p>
<h3>{{_i}}Events{{/i}}</h3>
<p>{{_i}}Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and it's past participle form (ex. <code>shown</code>) is trigger on the completion of an action.{{/i}}</p>
<p>{{_i}}All infinitive events provide preventDefault functionality. This provides the abililty to stop the execution of an action before it starts.{{/i}}</p>
{{! Thought: consider porting much of the JS readme here? }}
<preclass="prettyprint linenums">
$('#myModal').on('show', function (e) {
if (!data) return e.preventDefault() // stops modal from being shown
<p>{{_i}}The subnavigation on the left is a live demo of the affix plugin.{{/i}}</p>
<hrclass="bs-docs-separator">
<h2>{{_i}}Usage{{/i}}</h2>
<h3>{{_i}}Via data attributes{{/i}}</h3>
<p>{{_i}}To easily add affix behavior to any element, just add <code>data-spy="affix"</code> to the element you want to spy on. When the affix offsets are satisified, an <code>.affix</code> class is added to the element. {{/i}}</p>
{{_i}}It's up to you to maintain the dimensions of an element when toggling between relative and fixed positions. To see how this is done, refer to this pages subnavigation.{{/i}}
</div>
<h3>{{_i}}Via javascript{{/i}}</h3>
<p>{{_i}}Call the affix plugin via javascript:{{/i}}</p>
<p>{{_i}}When using affix in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:{{/i}}</p>
<preclass="prettyprint linenums">
...
$('[data-spy="affix"]').each(function () {
$(this).affix('refresh')
});
</pre>
</section>
<h3>{{_i}}Options{{/i}}</h3>
<p>{{_i}}Options can be passed via data attributes or javascript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset-y=""</code>.{{/i}}</p>
<tableclass="table table-bordered table-striped">
<thead>
<tr>
<thstyle="width: 100px;">{{_i}}Name{{/i}}</th>
<thstyle="width: 100px;">{{_i}}type{{/i}}</th>
<thstyle="width: 50px;">{{_i}}default{{/i}}</th>
<th>{{_i}}description{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{_i}}offset{{/i}}</td>
<td>{{_i}}number | object{{/i}}</td>
<td>{{_i}}10{{/i}}</td>
<td>{{_i}}Pixels to offset from screen when calculating position of scroll. If a single number is provide, the offset will be applied in both top and left directions. To listen for a single direction, or multiple unique offsets, just provided an object <code>offset: { x: 10 }</code>.{{/i}}</td>
These are the high-level design rules which guide the development of Bootstrap's plugin apis.
---
### DATA-ATTRIBUTE API
We believe you should be able to use all plugins provided by Bootstrap purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first class API.
We acknowledge that this isn't always the most performant and it may sometimes be desirable to turn this functionality off altogether. Therefore, as of 2.0 we provide the ability to disable the data attribute API by unbinding all events on the body namespaced with `'data-api'`. This looks like this:
$('body').off('.data-api')
To target a specific plugin, just include the plugins name as a namespace along with the data-api namespace like this:
$('body').off('.alert.data-api')
---
### PROGRAMATIC API
We also believe you should be able to use all plugins provided by Bootstrap purely through the JavaScript API.
All public APIs should be single, chainable methods, and return the collection acted upon.
$(".btn.danger").button("toggle").addClass("fat")
All methods should accept an optional options object, a string which targets a particular method, or null which initiates the default behavior:
$("#myModal").modal() // initialized with defaults
$("#myModal").modal({ keyboard:false }) // initialized with no keyboard
$("#myModal").modal('show') // initializes and invokes show immediately
---
### OPTIONS
Options should be sparse and add universal value. We should pick the right defaults.
All plugins should have a default object which can be modified to affect all instances' default options. The defaults object should be available via `$.fn.plugin.defaults`.
$.fn.modal.defaults = { … }
An options definition should take the following form:
*noun*: *adjective* - describes or modifies a quality of an instance
Examples:
backdrop: true
keyboard: false
placement: 'top'
---
### EVENTS
All events should have an infinitive and past participle form. The infinitive is fired just before an action takes place, the past participle on completion of the action.
show | shown
hide | hidden
All infinitive events should provide preventDefault functionality. This provides the abililty to stop the execution of an action.
$('#myModal').on('show', function (e) {
if (!data) return e.preventDefault() // stops modal from being shown
})
---
### CONSTRUCTORS
Each plugin should expose its raw constructor on a `Constructor` property -- accessed in the following way:
$.fn.popover.Constructor
---
### DATA ACCESSOR
Each plugin stores a copy of the invoked class on an object. This class instance can be accessed directly through jQuery's data API like this:
