2011-11-28 07:13:54 +01:00
## 2.0 BOOTSTRAP JS PHILOSOPHY
2011-12-21 08:28:48 +01:00
These are the high-level design rules which guide the development of Bootstrap's plugin apis.
2011-11-25 03:55:44 +01:00
---
### DATA-ATTRIBUTE API
2012-04-27 19:48:59 +02:00
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.
2011-11-25 03:55:44 +01:00
2012-04-27 19:48:59 +02:00
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:
2011-11-25 03:55:44 +01:00
2011-12-21 04:37:41 +01:00
$('body').off('.data-api')
2011-11-25 03:55:44 +01:00
To target a specific plugin, just include the plugins name as a namespace along with the data-api namespace like this:
2011-12-21 04:37:41 +01:00
$('body').off('.alert.data-api')
2011-11-25 03:55:44 +01:00
---
### PROGRAMATIC API
2012-04-27 19:48:59 +02:00
We also believe you should be able to use all plugins provided by Bootstrap purely through the JavaScript API.
2011-11-25 03:55:44 +01:00
2011-12-21 03:02:47 +01:00
All public APIs should be single, chainable methods, and return the collection acted upon.
2011-11-25 03:55:44 +01:00
$(".btn.danger").button("toggle").addClass("fat")
2011-11-28 07:13:54 +01:00
All methods should accept an optional options object, a string which targets a particular method, or null which initiates the default behavior:
2011-11-25 03:55:44 +01:00
$("#myModal").modal() // initialized with defaults
2012-03-11 22:24:18 +01:00
$("#myModal").modal({ keyboard: false }) // initialized with no keyboard
2012-04-04 23:58:04 +02:00
$("#myModal").modal('show') // initializes and invokes show immediately
2011-11-25 03:55:44 +01:00
---
2011-12-21 08:28:48 +01:00
### OPTIONS
2011-11-25 03:55:44 +01:00
Options should be sparse and add universal value. We should pick the right defaults.
2012-02-07 08:11:25 +01:00
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` .
2011-11-25 03:55:44 +01:00
$.fn.modal.defaults = { … }
2011-11-28 07:13:54 +01:00
An options definition should take the following form:
2011-11-25 03:55:44 +01:00
*noun* : *adjective* - describes or modifies a quality of an instance
2012-04-27 19:48:59 +02:00
Examples:
2011-11-25 03:55:44 +01:00
backdrop: true
keyboard: false
2011-12-23 04:10:32 +01:00
placement: 'top'
2011-11-25 03:55:44 +01:00
---
2011-12-21 08:28:48 +01:00
### EVENTS
2011-11-25 03:55:44 +01:00
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
2012-04-04 23:58:04 +02:00
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
})
2011-11-25 03:55:44 +01:00
---
2011-12-21 08:28:48 +01:00
### CONSTRUCTORS
2012-02-07 08:11:25 +01:00
Each plugin should expose its raw constructor on a `Constructor` property -- accessed in the following way:
2011-12-21 08:28:48 +01:00
$.fn.popover.Constructor
---
### DATA ACCESSOR
2012-01-29 22:07:31 +01:00
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:
2011-12-21 08:28:48 +01:00
$('[rel=popover]').data('popover') instanceof $.fn.popover.Constructor
---
2011-11-25 03:55:44 +01:00
### DATA ATTRIBUTES
Data attributes should take the following form:
2011-12-21 22:29:12 +01:00
- data-{{verb}}={{plugin}} - defines main interaction
2011-12-21 08:28:48 +01:00
- data-target || href^=# - defined on "control" element (if element controls an element other than self)
2011-12-21 22:29:12 +01:00
- data-{{noun}} - defines class instance options
2011-11-25 03:55:44 +01:00
2012-04-27 19:48:59 +02:00
Examples:
2011-11-25 03:55:44 +01:00
// control other targets
data-toggle="modal" data-target="#foo"
2011-12-21 03:02:47 +01:00
data-toggle="collapse" data-target="#foo" data-parent="#bar"
2011-11-25 03:55:44 +01:00
// defined on element they control
data-spy="scroll"
data-dismiss="modal"
data-dismiss="alert"
data-toggle="dropdown"
data-toggle="button"
data-toggle="buttons-checkbox"
data-toggle="buttons-radio"