js/README.md
author indvd00m (gotoindvdum[at]gmail[dot]com)
Fri, 04 Jul 2014 16:42:41 +0400
changeset 0 ba8ab09f730e
permissions -rw-r--r--
First home page
indvd00m@0
     1
## 2.0 BOOTSTRAP JS PHILOSOPHY
indvd00m@0
     2
These are the high-level design rules which guide the development of Bootstrap's plugin apis.
indvd00m@0
     3
indvd00m@0
     4
---
indvd00m@0
     5
indvd00m@0
     6
### DATA-ATTRIBUTE API
indvd00m@0
     7
indvd00m@0
     8
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.
indvd00m@0
     9
indvd00m@0
    10
We acknowledge that this isn't always the most performant and sometimes it may 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:
indvd00m@0
    11
indvd00m@0
    12
    $('body').off('.data-api')
indvd00m@0
    13
indvd00m@0
    14
To target a specific plugin, just include the plugins name as a namespace along with the data-api namespace like this:
indvd00m@0
    15
indvd00m@0
    16
    $('body').off('.alert.data-api')
indvd00m@0
    17
indvd00m@0
    18
---
indvd00m@0
    19
indvd00m@0
    20
### PROGRAMMATIC API
indvd00m@0
    21
indvd00m@0
    22
We also believe you should be able to use all plugins provided by Bootstrap purely through the JS API.
indvd00m@0
    23
indvd00m@0
    24
All public APIs should be single, chainable methods, and return the collection acted upon.
indvd00m@0
    25
indvd00m@0
    26
    $(".btn.danger").button("toggle").addClass("fat")
indvd00m@0
    27
indvd00m@0
    28
All methods should accept an optional options object, a string which targets a particular method, or null which initiates the default behavior:
indvd00m@0
    29
indvd00m@0
    30
    $("#myModal").modal() // initialized with defaults
indvd00m@0
    31
    $("#myModal").modal({ keyboard: false }) // initialized with now keyboard
indvd00m@0
    32
    $("#myModal").modal('show') // initializes and invokes show immediately afterqwe2
indvd00m@0
    33
indvd00m@0
    34
---
indvd00m@0
    35
indvd00m@0
    36
### OPTIONS
indvd00m@0
    37
indvd00m@0
    38
Options should be sparse and add universal value. We should pick the right defaults.
indvd00m@0
    39
indvd00m@0
    40
All plugins should have a default object which can be modified to effect all instance's default options. The defaults object should be available via `$.fn.plugin.defaults`.
indvd00m@0
    41
indvd00m@0
    42
    $.fn.modal.defaults = { … }
indvd00m@0
    43
indvd00m@0
    44
An options definition should take the following form:
indvd00m@0
    45
indvd00m@0
    46
    *noun*: *adjective* - describes or modifies a quality of an instance
indvd00m@0
    47
indvd00m@0
    48
examples:
indvd00m@0
    49
indvd00m@0
    50
    backdrop: true
indvd00m@0
    51
    keyboard: false
indvd00m@0
    52
    placement: 'top'
indvd00m@0
    53
indvd00m@0
    54
---
indvd00m@0
    55
indvd00m@0
    56
### EVENTS
indvd00m@0
    57
indvd00m@0
    58
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.
indvd00m@0
    59
indvd00m@0
    60
    show | shown
indvd00m@0
    61
    hide | hidden
indvd00m@0
    62
indvd00m@0
    63
---
indvd00m@0
    64
indvd00m@0
    65
### CONSTRUCTORS
indvd00m@0
    66
indvd00m@0
    67
Each plugin should expose it's raw constructor on a `Constructor` property -- accessed in the following way:
indvd00m@0
    68
indvd00m@0
    69
indvd00m@0
    70
    $.fn.popover.Constructor
indvd00m@0
    71
indvd00m@0
    72
---
indvd00m@0
    73
indvd00m@0
    74
### DATA ACCESSOR
indvd00m@0
    75
indvd00m@0
    76
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:
indvd00m@0
    77
indvd00m@0
    78
    $('[rel=popover]').data('popover') instanceof $.fn.popover.Constructor
indvd00m@0
    79
indvd00m@0
    80
---
indvd00m@0
    81
indvd00m@0
    82
### DATA ATTRIBUTES
indvd00m@0
    83
indvd00m@0
    84
Data attributes should take the following form:
indvd00m@0
    85
indvd00m@0
    86
- data-{{verb}}={{plugin}} - defines main interaction
indvd00m@0
    87
- data-target || href^=# - defined on "control" element (if element controls an element other than self)
indvd00m@0
    88
- data-{{noun}} - defines class instance options
indvd00m@0
    89
indvd00m@0
    90
examples:
indvd00m@0
    91
indvd00m@0
    92
    // control other targets
indvd00m@0
    93
    data-toggle="modal" data-target="#foo"
indvd00m@0
    94
    data-toggle="collapse" data-target="#foo" data-parent="#bar"
indvd00m@0
    95
indvd00m@0
    96
    // defined on element they control
indvd00m@0
    97
    data-spy="scroll"
indvd00m@0
    98
indvd00m@0
    99
    data-dismiss="modal"
indvd00m@0
   100
    data-dismiss="alert"
indvd00m@0
   101
indvd00m@0
   102
    data-toggle="dropdown"
indvd00m@0
   103
indvd00m@0
   104
    data-toggle="button"
indvd00m@0
   105
    data-toggle="buttons-checkbox"
indvd00m@0
   106
    data-toggle="buttons-radio"