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