diff options
Diffstat (limited to 'docs/javascript.html')
| -rw-r--r-- | docs/javascript.html | 64 |
1 files changed, 41 insertions, 23 deletions
diff --git a/docs/javascript.html b/docs/javascript.html index a530b21e0d..bd4d606b33 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -2,7 +2,7 @@ <html lang="en"> <head> <meta charset="utf-8"> - <title>Javascript · Twitter Bootstrap</title> + <title>Javascript · Bootstrap</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> @@ -58,7 +58,7 @@ <a href="./components.html">Components</a> </li> <li class="active"> - <a href="./javascript.html">Javascript</a> + <a href="./javascript.html">JavaScript</a> </li> <li class=""> <a href="./customize.html">Customize</a> @@ -73,7 +73,7 @@ ================================================== --> <header class="jumbotron subhead"> <div class="container"> - <h1>JavaScript for Bootstrap</h1> + <h1>JavaScript</h1> <p class="lead">Bring Bootstrap's components to life—now with 13 custom jQuery plugins. </div> </header> @@ -112,7 +112,7 @@ </div> <h3>Individual or compiled</h3> - <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> + <p>Plugins can be included individually (though some have required dependencies), or all at once. Both <strong>bootstrap.js</strong> and <strong>bootstrap.min.js</strong> contain all plugins in a single file.</p> <h3>Data attributes</h3> <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> @@ -120,7 +120,7 @@ <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: <pre class="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> + <p>Alternatively, to target a specific plugin, just include the plugin's name as a namespace along with the data-api namespace like this:</p> <pre class="prettyprint linenums">$('body').off('.alert.data-api')</pre> <h3>Programmatic API</h3> @@ -132,10 +132,10 @@ $("#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> + <p>Each plugin also exposes its 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>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 its 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> <pre class="prettyprint linenums"> $('#myModal').on('show', function (e) { @@ -187,7 +187,7 @@ $('#myModal').on('show', function (e) { <h3>Modal header</h3> </div> <div class="modal-body"> - <p>One fine body…</p> + <p>One fine body…</p> </div> <div class="modal-footer"> <a href="#" class="btn">Close</a> @@ -202,7 +202,7 @@ $('#myModal').on('show', function (e) { <h3>Modal header</h3> </div> <div class="modal-body"> - <p>One fine body…</p> + <p>One fine body…</p> </div> <div class="modal-footer"> <a href="#" class="btn">Close</a> @@ -224,7 +224,7 @@ $('#myModal').on('show', function (e) { <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p> <h4>Popover in a modal</h4> - <p>This <a href="#" role="button" class="btn popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on hover.</p> + <p>This <a href="#" role="button" class="btn popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on click.</p> <h4>Tooltips in a modal</h4> <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.</p> @@ -249,17 +249,17 @@ $('#myModal').on('show', function (e) { <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a> </div> <pre class="prettyprint linenums"> -<-- Button to trigger modal --> +<!-- Button to trigger modal --> <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a> -<-- Modal --> -<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> +<!-- Modal --> +<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel">Modal header</h3> </div> <div class="modal-body"> - <p>One fine body…</p> + <p>One fine body…</p> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> @@ -506,8 +506,8 @@ $('#myModal').on('hidden', function () { <p><em>None</em></p> <h3>Methods</h3> - <h4>$().dropdown()</h4> - <p>A programatic api for activating menus for a given navbar or tabbed navigation.</p> + <h4>$().dropdown('toggle')</h4> + <p>A programatic api for toggling menus for a given navbar or tabbed navigation.</p> </section> @@ -804,7 +804,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <tr> <td>html</td> <td>boolean</td> - <td>true</td> + <td>false</td> <td>Insert html into the tooltip. If false, jquery's <code>text</code> method will be used to insert content into the dom. Use text if you're worried about XSS attacks.</td> </tr> <tr> @@ -925,6 +925,16 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <a href="#" class="btn btn-large btn-danger" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a> </div> + <h4>Four directions</h4> + <div class="bs-docs-example tooltip-demo"> + <ul class="bs-docs-tooltip-examples"> + <li><a href="#" class="btn" rel="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on top">Popover on top</a></li> + <li><a href="#" class="btn" rel="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on right">Popover on right</a></li> + <li><a href="#" class="btn" rel="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on bottom">Popover on bottom</a></li> + <li><a href="#" class="btn" rel="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on left">Popover on left</a></li> + </ul> + </div> + <hr class="bs-docs-separator"> @@ -954,7 +964,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <tr> <td>html</td> <td>boolean</td> - <td>true</td> + <td>false</td> <td>Insert html into the popover. If false, jquery's <code>text</code> method will be used to insert content into the dom. Use text if you're worried about XSS attacks.</td> </tr> <tr> @@ -1604,6 +1614,12 @@ $('.carousel').carousel({ <td>Method used to sort autocomplete results. Accepts a single argument <code>items</code> and has the scope of the typeahead instance. Reference the current query with <code>this.query</code>.</td> </tr> <tr> + <td>updater</td> + <td>function</td> + <td>returns selected item</td> + <td>The method used to return selected item. Accepts a single argument, the <code>item</code> and has the scope of the typeahead instance.</td> + </tr> + <tr> <td>highlighter</td> <td>function</td> <td>highlights all default matches</td> @@ -1691,12 +1707,14 @@ $('[data-spy="affix"]').each(function () { <footer class="footer"> <div class="container"> <p class="pull-right"><a href="#">Back to top</a></p> - <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p> - <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> - <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> + <p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p> + <p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> + <p><a href="http://glyphicons.com">Glyphicons Free</a> licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> <ul class="footer-links"> - <li><a href="http://blog.getbootstrap.com">Read the blog</a></li> - <li><a href="https://github.com/twitter/bootstrap/issues?state=open">Submit issues</a></li> + <li><a href="http://blog.getbootstrap.com">Blog</a></li> + <li class="muted">·</li> + <li><a href="https://github.com/twitter/bootstrap/issues?state=open">Issues</a></li> + <li class="muted">·</li> <li><a href="https://github.com/twitter/bootstrap/wiki">Roadmap and changelog</a></li> </ul> </div> |