diff options
Diffstat (limited to 'docs/javascript.html')
| -rw-r--r-- | docs/javascript.html | 109 |
1 files changed, 61 insertions, 48 deletions
diff --git a/docs/javascript.html b/docs/javascript.html index 8051782e7..917b90ae9 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -405,21 +405,21 @@ $('#myModal').on('hidden', function () { <li class="dropdown"> <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu" role="menu" aria-labelledby="drop1"> - <li><a tabindex="-1" href="http://google.com">Action</a></li> - <li><a tabindex="-1" href="#anotherAction">Another action</a></li> - <li><a tabindex="-1" href="#">Something else here</a></li> - <li class="divider"></li> - <li><a tabindex="-1" href="#">Separated link</a></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">Action</a></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">Another action</a></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> + <li role="presentation" class="divider"></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> </ul> </li> <li class="dropdown"> <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a> <ul class="dropdown-menu" role="menu" aria-labelledby="drop2"> - <li><a tabindex="-1" href="#">Action</a></li> - <li><a tabindex="-1" href="#">Another action</a></li> - <li><a tabindex="-1" href="#">Something else here</a></li> - <li class="divider"></li> - <li><a tabindex="-1" href="#">Separated link</a></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> + <li role="presentation" class="divider"></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> </ul> </li> </ul> @@ -427,11 +427,11 @@ $('#myModal').on('hidden', function () { <li id="fat-menu" class="dropdown"> <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a> <ul class="dropdown-menu" role="menu" aria-labelledby="drop3"> - <li><a tabindex="-1" href="#">Action</a></li> - <li><a tabindex="-1" href="#">Another action</a></li> - <li><a tabindex="-1" href="#">Something else here</a></li> - <li class="divider"></li> - <li><a tabindex="-1" href="#">Separated link</a></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> + <li role="presentation" class="divider"></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> </ul> </li> </ul> @@ -447,31 +447,31 @@ $('#myModal').on('hidden', function () { <li class="dropdown"> <a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a> <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4"> - <li><a tabindex="-1" href="#">Action</a></li> - <li><a tabindex="-1" href="#">Another action</a></li> - <li><a tabindex="-1" href="#">Something else here</a></li> - <li class="divider"></li> - <li><a tabindex="-1" href="#">Separated link</a></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> + <li role="presentation" class="divider"></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 2 <b class="caret"></b></a> <ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5"> - <li><a tabindex="-1" href="#">Action</a></li> - <li><a tabindex="-1" href="#">Another action</a></li> - <li><a tabindex="-1" href="#">Something else here</a></li> - <li class="divider"></li> - <li><a tabindex="-1" href="#">Separated link</a></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> + <li role="presentation" class="divider"></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 3 <b class="caret"></b></a> <ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop5"> - <li><a tabindex="-1" href="#">Action</a></li> - <li><a tabindex="-1" href="#">Another action</a></li> - <li><a tabindex="-1" href="#">Something else here</a></li> - <li class="divider"></li> - <li><a tabindex="-1" href="#">Separated link</a></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> + <li role="presentation" class="divider"></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> </ul> </li> </ul> <!-- /tabs --> @@ -769,17 +769,17 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <p>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.</p> <p>Hover over the links below to see tooltips:</p> <div class="bs-docs-example tooltip-demo"> - <p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" rel="tooltip" title="Default 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 class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title="Default 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="#" data-toggle="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="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral. </p> </div> <h3>Four directions</h3> <div class="bs-docs-example tooltip-demo"> <ul class="bs-docs-tooltip-examples"> - <li><a href="#" rel="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</a></li> - <li><a href="#" rel="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</a></li> - <li><a href="#" rel="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</a></li> - <li><a href="#" rel="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</a></li> + <li><a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</a></li> + <li><a href="#" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</a></li> + <li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</a></li> + <li><a href="#" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</a></li> </ul> </div> @@ -836,8 +836,8 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <tr> <td>trigger</td> <td>string</td> - <td>'hover'</td> - <td>how tooltip is triggered - click | hover | focus | manual</td> + <td>'hover focus'</td> + <td>how tooltip is triggered - click | hover | focus | manual. Note you case pass trigger mutliple, space seperated, trigger types.</td> </tr> <tr> <td>delay</td> @@ -849,6 +849,14 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p> </td> </tr> + <tr> + <td>container</td> + <td>string | false</td> + <td>false</td> + <td> + <p>Appends the tooltip to a specific element <code>container: 'body'</code></p> + </td> + </tr> </tbody> </table> <div class="alert alert-info"> @@ -858,7 +866,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <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 selector option.</p> - <pre class="prettyprint linenums"><a href="#" rel="tooltip" title="first tooltip">hover over me</a></pre> + <pre class="prettyprint linenums"><a href="#" data-toggle="tooltip" title="first tooltip">hover over me</a></pre> <h3>Methods</h3> <h4>$().tooltip(options)</h4> @@ -930,16 +938,16 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <h3>Live demo</h3> <div class="bs-docs-example" style="padding-bottom: 24px;"> - <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> + <a href="#" class="btn btn-large btn-danger" data-toggle="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> + <li><a href="#" class="btn" data-toggle="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" data-toggle="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" data-toggle="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" data-toggle="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> @@ -1423,9 +1431,9 @@ $('#myCollapsible').on('hidden', function () { <div class="bs-docs-example"> <div id="myCarousel" class="carousel slide"> <ol class="carousel-indicators"> - <li class="active"></li> - <li></li> - <li></li> + <li data-target="#myCarousel" data-slide-to="0" class="active"></li> + <li data-target="#myCarousel" data-slide-to="1"></li> + <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="item active"> @@ -1456,6 +1464,11 @@ $('#myCollapsible').on('hidden', function () { </div> <pre class="prettyprint linenums"> <div id="myCarousel" class="carousel slide"> + <ol class="carousel-indicators"> + <li data-target="#myCarousel" data-slide-to="0" class="active"></li> + <li data-target="#myCarousel" data-slide-to="1"></li> + <li data-target="#myCarousel" data-slide-to="2"></li> + </ol> <!-- Carousel items --> <div class="carousel-inner"> <div class="active item">…</div> @@ -1480,14 +1493,14 @@ $('#myCollapsible').on('hidden', function () { <h2>Usage</h2> <h3>Via data attributes</h3> - <p>...</p> + <p>Use data attributes to easily control the position of the carousel. <code>data-slide</code> accepts the keywords <code>prev</code> or <code>next</code>, which alters the slide position relative to it's current position. Alternatively, use <code>data-slide-to</code> to pass a raw slide index to the carousel <code>data-slide-to="2"</code>, which jump's the slide position to a particular index beginning with <code>0</code>.</p> <h3>Via JavaScript</h3> <p>Call carousel manually with:</p> <pre class="prettyprint linenums">$('.carousel').carousel()</pre> <h3>Options</h3> - <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-interval=""</code>.</p> + <p>Options can be passed via data attributes or JavaScriptz. For data attributes, append the option name to <code>data-</code>, as in <code>data-interval=""</code>.</p> <table class="table table-bordered table-striped"> <thead> <tr> |