Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
javascript.mustache 84.54 KiB
1 
<!-- Subhead
2 
================================================== -->
3 
<header class="jumbotron subhead">
4 
  <div class="container">
5 
    <h1>{{_i}}JavaScript for Bootstrap{{/i}}</h1>
6 
    <p class="lead">{{_i}}Bring Bootstrap's components to life&mdash;now with 13 custom jQuery plugins.{{/i}}
7 
  </div>
8 
</header>
9
10 
  <div class="container">
11
12 
    <!-- Docs nav
13 
    ================================================== -->
14 
    <div class="row">
15 
      <div class="span3 bs-docs-sidebar">
16 
        <ul class="nav nav-list bs-docs-sidenav">
17 
          <li><a href="#overview"><i class="icon-chevron-right"></i> {{_i}}Overview{{/i}}</a></li>
18 
          <li><a href="#transitions"><i class="icon-chevron-right"></i> {{_i}}Transitions{{/i}}</a></li>
19 
          <li><a href="#modals"><i class="icon-chevron-right"></i> {{_i}}Modal{{/i}}</a></li>
20 
          <li><a href="#dropdowns"><i class="icon-chevron-right"></i> {{_i}}Dropdown{{/i}}</a></li>
21 
          <li><a href="#scrollspy"><i class="icon-chevron-right"></i> {{_i}}Scrollspy{{/i}}</a></li>
22 
          <li><a href="#tabs"><i class="icon-chevron-right"></i> {{_i}}Tab{{/i}}</a></li>
23 
          <li><a href="#tooltips"><i class="icon-chevron-right"></i> {{_i}}Tooltip{{/i}}</a></li>
24 
          <li><a href="#popovers"><i class="icon-chevron-right"></i> {{_i}}Popover{{/i}}</a></li>
25 
          <li><a href="#alerts"><i class="icon-chevron-right"></i> {{_i}}Alert{{/i}}</a></li>
26 
          <li><a href="#buttons"><i class="icon-chevron-right"></i> {{_i}}Button{{/i}}</a></li>
27 
          <li><a href="#collapse"><i class="icon-chevron-right"></i> {{_i}}Collapse{{/i}}</a></li>
28 
          <li><a href="#carousel"><i class="icon-chevron-right"></i> {{_i}}Carousel{{/i}}</a></li>
29 
          <li><a href="#typeahead"><i class="icon-chevron-right"></i> {{_i}}Typeahead{{/i}}</a></li>
30 
          <li><a href="#affix"><i class="icon-chevron-right"></i> {{_i}}Affix{{/i}}</a></li>
31 
        </ul>
32 
      </div>
33 
      <div class="span9">
34
35
36 
        <!-- Overview
37 
        ================================================== -->
38 
        <section id="overview">
39 
          <div class="page-header">
40 
            <h1>{{_i}}JavaScript in Bootstrap{{/i}}</h1>
41 
          </div>
42
43 
          <h3>{{_i}}Individual or compiled{{/i}}</h3>
44 
          <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>
45
46 
          <h3>{{_i}}Data attributes{{/i}}</h3>
47 
          <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>
48
49 
          <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}}
50 
          <pre class="prettyprint linenums">$('body').off('.data-api')</pre>
51
52 
          <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>
53 
          <pre class="prettyprint linenums">$('body').off('.alert.data-api')</pre>
54
55 
          <h3>{{_i}}Programmatic API{{/i}}</h3>
56 
          <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>
57 
          <pre class="prettyprint linenums">$(".btn.danger").button("toggle").addClass("fat")</pre>
58 
          <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>
59 
<pre class="prettyprint linenums">
60 
$("#myModal").modal()                       // initialized with defaults
61 
$("#myModal").modal({ keyboard: false })   // initialized with no keyboard
62 
$("#myModal").modal('show')                // initializes and invokes show immediately</p>
63 
</pre>
64 
          <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>
65
66 
          <h3>{{_i}}Events{{/i}}</h3>
67 
          <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>
68 
          <p>{{_i}}All infinitive events provide preventDefault functionality. This provides the abililty to stop the execution of an action before it starts.{{/i}}</p>
69 
<pre class="prettyprint linenums">
70 
$('#myModal').on('show', function (e) {