diff options
Diffstat (limited to 'docs/javascript.html')
| -rw-r--r-- | docs/javascript.html | 92 |
1 files changed, 71 insertions, 21 deletions
diff --git a/docs/javascript.html b/docs/javascript.html index a90562767..7ad42ae81 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -20,6 +20,7 @@ <!-- Le fav and touch icons --> <link rel="shortcut icon" href="assets/ico/favicon.ico"> + <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png"> <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png"> @@ -39,7 +40,7 @@ <span class="icon-bar"></span> </a> <a class="brand" href="./index.html">Bootstrap</a> - <div class="nav-collapse"> + <div class="nav-collapse collapse"> <ul class="nav"> <li class=""> <a href="./index.html">Overview</a> @@ -205,9 +206,9 @@ <h2>Static example</h2> <p>Below is a statically rendered modal.</p> <div class="well modal-example" style="background-color: #888; border: none;"> - <div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1"> + <div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1; max-width: 100%;"> <div class="modal-header"> - <a href="#" class="close" data-dismiss="modal">×</a> + <button class="close" data-dismiss="modal">×</button> <h3>Modal header</h3> </div> <div class="modal-body"> @@ -225,7 +226,7 @@ <!-- sample modal content --> <div id="myModal" class="modal hide fade"> <div class="modal-header"> - <a class="close" data-dismiss="modal" >×</a> + <button class="close" data-dismiss="modal">×</button> <h3>Modal Heading</h3> </div> <div class="modal-body"> @@ -302,7 +303,7 @@ <pre class="prettyprint linenums"> <div class="modal" id="myModal"> <div class="modal-header"> - <a class="close" data-dismiss="modal">×</a> + <button class="close" data-dismiss="modal">×</button> <h3>Modal header</h3> </div> <div class="modal-body"> @@ -492,6 +493,20 @@ $('#myModal').on('hidden', function () { </li> ... </ul></pre> + <p>To keep URLs intact, use the <code>data-target</code> attribute instead of <code>href="#"</code>.</p> +<pre class="prettyprint linenums"> +<ul class="nav nav-pills"> + <li class="dropdown"> + <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="path/to/page.html"> + Dropdown + <b class="caret"></b> + </a> + <ul class="dropdown-menu"> + ... + </ul> + </li> +</ul> +</pre> <h3>Methods</h3> <h4>$().dropdown()</h4> <p>A programatic api for activating menus for a given navbar or tabbed navigation.</p> @@ -570,6 +585,14 @@ $('#myModal').on('hidden', function () { <strong>Heads up!</strong> Navbar links must have resolvable id targets. For example, a <code><a href="#home">home</a></code> must correspond to something in the dom like <code><div id="home"></div></code>. </div> + <h3>Methods</h3> + <h4>.scrollspy('refresh')</h4> + <p>When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:</p> +<pre class="prettyprint linenums"> +$('[data-spy="scroll"]').each(function () { + var $spy = $(this).scrollspy('refresh') +}); +</pre> <h3>Options</h3> <table class="table table-bordered table-striped"> <thead> @@ -589,6 +612,21 @@ $('#myModal').on('hidden', function () { </tr> </tbody> </table> + <h3>Events</h3> + <table class="table table-bordered table-striped"> + <thead> + <tr> + <th style="width: 150px;">Event</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>activate</td> + <td>This event fires whenever a new item becomes activated by the scrollspy.</td> + </tr> + </tbody> + </table> </div> </div> </section> @@ -609,7 +647,7 @@ $('#myModal').on('hidden', function () { <div class="span9 columns"> <h2>Example tabs</h2> <p>Click the tabs below to toggle between hidden panes, even via dropdown menus.</p> - <ul id="tab" class="nav nav-tabs"> + <ul id="myTab" class="nav nav-tabs"> <li class="active"><a href="#home" data-toggle="tab">Home</a></li> <li><a href="#profile" data-toggle="tab">Profile</a></li> <li class="dropdown"> @@ -636,10 +674,21 @@ $('#myModal').on('hidden', function () { </div> <hr> <h2>Using bootstrap-tab.js</h2> - <p>Enable tabbable tabs via javascript:</p> - <pre class="prettyprint linenums">$('#myTab').tab('show')</pre> + <p>Enable tabbable tabs via javascript (each tab needs to be activated individually):</p> + <pre class="prettyprint linenums"> +$('#myTab a').click(function (e) { + e.preventDefault(); + $(this).tab('show'); +})</pre> + <p>You can activate individual tabs in several ways:</p> +<pre class="prettyprint linenums"> +$('#myTab a[href="#profile"]').tab('show'); // Select tab by name +$('#myTab a:first').tab('show'); // Select first tab +$('#myTab a:last').tab('show'); // Select last tab +$('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed) +</pre> <h3>Markup</h3> - <p>You can activate a tab or pill navigation without writing any javascript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element.</p> + <p>You can activate a tab or pill navigation without writing any javascript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element. Adding the <code>nav</code> and <code>nav-tabs</code> classes to the tab <code>ul</code> will apply the bootstrap tab styling.</p> <pre class="prettyprint linenums"> <ul class="nav nav-tabs"> <li><a href="#home" data-toggle="tab">Home</a></li> @@ -650,10 +699,10 @@ $('#myModal').on('hidden', function () { <h3>Methods</h3> <h4>$().tab</h4> <p> - Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the dom. + Activates a tab element and content container. Tab should have either a <code>data-target</code> or an <code>href</code> targeting a container node in the DOM. </p> <pre class="prettyprint linenums"> -<ul class="nav nav-tabs"> +<ul class="nav nav-tabs" id="myTab"> <li class="active"><a href="#home">Home</a></li> <li><a href="#profile">Profile</a></li> <li><a href="#messages">Messages</a></li> @@ -669,7 +718,7 @@ $('#myModal').on('hidden', function () { <script> $(function () { - $('.tabs a:last').tab('show') + $('#myTab a:last').tab('show'); }) </script></pre> <h3>Events</h3> @@ -718,7 +767,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <h2>Example use of Tooltips</h2> <p>Hover over the links below to see tooltips:</p> <div class="tooltip-demo well"> - <p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" rel="tooltip" title="first tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A <a href="#" rel="tooltip" title="Another one here too">really ironic</a> artisan whatever keytar, scenester farm-to-table banksy Austin <a href="#" rel="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral. + <p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" rel="tooltip" title="first tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" rel="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" rel="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral. </p> </div> <hr> @@ -771,7 +820,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <td>number | object</td> <td>0</td> <td> - <p>delay showing and hiding the tooltip (ms)</p> + <p>delay showing and hiding the tooltip (ms) - does not apply to manual trigger type</p> <p>If a number is supplied, delay is applied to both hide/show</p> <p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p> </td> @@ -880,7 +929,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <td>number | object</td> <td>0</td> <td> - <p>delay showing and hiding the popover (ms)</p> + <p>delay showing and hiding the popover (ms) - does not apply to manual trigger type</p> <p>If a number is supplied, delay is applied to both hide/show</p> <p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p> </td> @@ -893,7 +942,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { </div> <h3>Markup</h3> <p> - For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a the selector option. + For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option. </p> <h3>Methods</h3> <h4>$().popover(options)</h4> @@ -929,11 +978,11 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <h2>Example alerts</h2> <p>The alerts plugin works on regular alert messages, and block messages.</p> <div class="alert fade in"> - <a class="close" data-dismiss="alert" href="#">×</a> + <button class="close" data-dismiss="alert">×</button> <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good. </div> <div class="alert alert-block alert-error fade in"> - <a class="close" data-dismiss="alert" href="#">×</a> + <button class="close" data-dismiss="alert">×</button> <h4 class="alert-heading">Oh snap! You got an error!</h4> <p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p> <p> @@ -1039,7 +1088,7 @@ $('#my-alert').bind('closed', function () { <hr> <h2>Using bootstrap-button.js</h2> <p>Enable buttons via javascript:</p> - <pre class="prettyprint linenums">$('.tabs').button()</pre> + <pre class="prettyprint linenums">$('.nav-tabs').button()</pre> <h3>Markup</h3> <p>Data attributes are integral to the button plugin. Check out the example code below for the various markup types.</p> <pre class="prettyprint linenums"> @@ -1101,7 +1150,8 @@ $('#my-alert').bind('closed', function () { <h3>About</h3> <p>Get base styles and flexible support for collapsible components like accordions and navigation.</p> <a href="assets/js/bootstrap-collapse.js" target="_blank" class="btn">Download file</a> - </div> + <p class="muted"><strong>*</strong> Requires the Transitions plugin to be included.</p> + </div> <div class="span9 columns"> <h2>Example accordion</h2> <p>Using the collapse plugin, we built a simple accordion style widget:</p> @@ -1308,7 +1358,7 @@ $('#myCollapsible').on('hidden', function () { <td>interval</td> <td>number</td> <td>5000</td> - <td>The amount of time to delay between automatically cycling an item.</td> + <td>The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.</td> </tr> <tr> <td>pause</td> |