diff options
Diffstat (limited to 'docs/_includes/js')
| -rw-r--r-- | docs/_includes/js/affix.html | 7 | ||||
| -rw-r--r-- | docs/_includes/js/carousel.html | 12 | ||||
| -rw-r--r-- | docs/_includes/js/popovers.html | 74 | ||||
| -rw-r--r-- | docs/_includes/js/scrollspy.html | 2 | ||||
| -rw-r--r-- | docs/_includes/js/tabs.html | 30 | ||||
| -rw-r--r-- | docs/_includes/js/tooltips.html | 38 |
6 files changed, 89 insertions, 74 deletions
diff --git a/docs/_includes/js/affix.html b/docs/_includes/js/affix.html index cfd32ec35..5b6fec0bb 100644 --- a/docs/_includes/js/affix.html +++ b/docs/_includes/js/affix.html @@ -62,6 +62,13 @@ <td>10</td> <td>Pixels to offset from screen when calculating position of scroll. If a single number is provided, the offset will be applied in both top and bottom directions. To provide a unique, bottom and top offset just provide an object <code>offset: { top: 10 }</code> or <code>offset: { top: 10, bottom: 5 }</code>. Use a function when you need to dynamically calculate an offset.</td> </tr> + <tr> + <td>target</td> + <td>selector | node | jQuery element</td> + <td>the <code>window</code> object</td> + <td>Specifies the target element of the affix.</td> + </tr> + </tbody> </table> </div><!-- /.table-responsive --> diff --git a/docs/_includes/js/carousel.html b/docs/_includes/js/carousel.html index fa7476b68..b8a0d1e4b 100644 --- a/docs/_includes/js/carousel.html +++ b/docs/_includes/js/carousel.html @@ -21,10 +21,10 @@ <img data-src="holder.js/900x500/auto/#555:#333/text:Third slide" alt="Third slide"> </div> </div> - <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> + <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> - <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> + <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> @@ -56,10 +56,10 @@ </div> <!-- Controls --> - <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> + <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> - <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> + <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> @@ -102,10 +102,10 @@ </div> </div> </div> - <a class="left carousel-control" href="#carousel-example-captions" data-slide="prev"> + <a class="left carousel-control" href="#carousel-example-captions" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> - <a class="right carousel-control" href="#carousel-example-captions" data-slide="next"> + <a class="right carousel-control" href="#carousel-example-captions" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> diff --git a/docs/_includes/js/popovers.html b/docs/_includes/js/popovers.html index b2f58fbc4..2ee670741 100644 --- a/docs/_includes/js/popovers.html +++ b/docs/_includes/js/popovers.html @@ -152,6 +152,33 @@ $('.popover-dismiss').popover({ <td>Apply a CSS fade transition to the popover</td> </tr> <tr> + <td>container</td> + <td>string | false</td> + <td>false</td> + <td> + <p>Appends the popover to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.</p> + </td> + </tr> + <tr> + <td>content</td> + <td>string | function</td> + <td>''</td> + <td> + <p>Default content value if <code>data-content</code> attribute isn't present.</p> + <p>If a function is given, it will be called with 1 argument, which is the element that the popover is attached to.</p> + </td> + </tr> + <tr> + <td>delay</td> + <td>number | object</td> + <td>0</td> + <td> + <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> + </tr> + <tr> <td>html</td> <td>boolean</td> <td>false</td> @@ -170,21 +197,9 @@ $('.popover-dismiss').popover({ <td>If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="http://jsfiddle.net/fScua/">an informative example</a>.</td> </tr> <tr> - <td>trigger</td> - <td>string</td> - <td>'click'</td> - <td>How popover is triggered - click | hover | focus | manual</td> - </tr> - <tr> - <td>title</td> - <td>string | function</td> - <td>''</td> - <td>Default title value if <code>title</code> attribute isn't present</td> - </tr> - <tr> <td>template</td> <td>string</td> - <td><code>'<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'</code></td> + <td><code>'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'</code></td> <td> <p>Base HTML to use when creating the popover.</p> <p>The popover's <code>title</code> will be injected into the <code>.popover-title</code>.</p> @@ -194,32 +209,25 @@ $('.popover-dismiss').popover({ </td> </tr> <tr> - <td>content</td> + <td>title</td> <td>string | function</td> <td>''</td> - <td> - <p>Default content value if <code>data-content</code> attribute isn't present.</p> - <p>If a function is given, it will be called with 1 argument, which is the element that the popover is attached to.</p> - </td> + <td>Default title value if <code>title</code> attribute isn't present</td> </tr> <tr> - <td>delay</td> - <td>number | object</td> - <td>0</td> - <td> - <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> + <td>trigger</td> + <td>string</td> + <td>'click'</td> + <td>How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</td> </tr> <tr> - <td>container</td> - <td>string | false</td> - <td>false</td> - <td> - <p>Appends the popover to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.</p> - </td> - </tr> + <td>viewport</td> + <td>string | object</td> + <td>{ selector: 'body', padding: 0 }</td> + <td> + <p>Keeps the popover within the bounds of this element. Example: <code>viewport: '#viewport'</code> or <code>{ selector: '#viewport', padding: 0 }</code></p> + </td> + </tr> </tbody> </table> </div><!-- /.table-responsive --> diff --git a/docs/_includes/js/scrollspy.html b/docs/_includes/js/scrollspy.html index 9767254e0..2ceedb0ca 100644 --- a/docs/_includes/js/scrollspy.html +++ b/docs/_includes/js/scrollspy.html @@ -65,7 +65,7 @@ body { <body data-spy="scroll" data-target=".navbar-example"> ... <div class="navbar-example"> - <ul class="nav nav-tabs"> + <ul class="nav nav-tabs" role="tablist"> ... </ul> </div> diff --git a/docs/_includes/js/tabs.html b/docs/_includes/js/tabs.html index c6c3e0df6..38518f0b1 100644 --- a/docs/_includes/js/tabs.html +++ b/docs/_includes/js/tabs.html @@ -4,14 +4,14 @@ <h2 id="tabs-examples">Example tabs</h2> <p>Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.</p> <div class="bs-example bs-example-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> + <ul id="myTab" class="nav nav-tabs" role="tablist"> + <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li> + <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li> <li class="dropdown"> <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1"> - <li><a href="#dropdown1" tabindex="-1" data-toggle="tab">@fat</a></li> - <li><a href="#dropdown2" tabindex="-1" data-toggle="tab">@mdo</a></li> + <li><a href="#dropdown1" tabindex="-1" role="tab" data-toggle="tab">@fat</a></li> + <li><a href="#dropdown2" tabindex="-1" role="tab" data-toggle="tab">@mdo</a></li> </ul> </li> </ul> @@ -60,11 +60,11 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed) <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 <a href="../components/#nav-tabs">tab styling</a>, while adding the <code>nav</code> and <code>nav-pills</code> classes will apply <a href="../components/#nav-pills">pill styling</a>.</p> {% highlight html %} <!-- Nav tabs --> -<ul 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><a href="#messages" data-toggle="tab">Messages</a></li> - <li><a href="#settings" data-toggle="tab">Settings</a></li> +<ul class="nav nav-tabs" role="tablist"> + <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li> + <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li> + <li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li> + <li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li> </ul> <!-- Tab panes --> @@ -93,11 +93,11 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed) 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> {% highlight html %} -<ul class="nav nav-tabs" id="myTab"> - <li class="active"><a href="#home" data-toggle="tab">Home</a></li> - <li><a href="#profile" data-toggle="tab">Profile</a></li> - <li><a href="#messages" data-toggle="tab">Messages</a></li> - <li><a href="#settings" data-toggle="tab">Settings</a></li> +<ul class="nav nav-tabs" role="tablist" id="myTab"> + <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li> + <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li> + <li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li> + <li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li> </ul> <div class="tab-content"> diff --git a/docs/_includes/js/tooltips.html b/docs/_includes/js/tooltips.html index 64ea06e85..e967878f8 100644 --- a/docs/_includes/js/tooltips.html +++ b/docs/_includes/js/tooltips.html @@ -91,6 +91,24 @@ $('#example').tooltip(options) <td>Apply a CSS fade transition to the tooltip</td> </tr> <tr> + <td>container</td> + <td>string | false</td> + <td>false</td> + <td> + <p>Appends the tooltip to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element - which will prevent the tooltip from floating away from the triggering element during a window resize.</p> + </td> + </tr> + <tr> + <td>delay</td> + <td>number | object</td> + <td>0</td> + <td> + <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> + </tr> + <tr> <td>html</td> <td>boolean</td> <td>false</td> @@ -106,7 +124,7 @@ $('#example').tooltip(options) <td>selector</td> <td>string</td> <td>false</td> - <td>If a selector is provided, tooltip objects will be delegated to the specified targets.</td> + <td>If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have tooltips added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="http://jsfiddle.net/fScua/">an informative example</a>.</td> </tr> <tr> <td>template</td> @@ -132,24 +150,6 @@ $('#example').tooltip(options) <td>How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</td> </tr> <tr> - <td>delay</td> - <td>number | object</td> - <td>0</td> - <td> - <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> - </tr> - <tr> - <td>container</td> - <td>string | false</td> - <td>false</td> - <td> - <p>Appends the tooltip to a specific element. Example: <code>container: 'body'</code></p> - </td> - </tr> - <tr> <td>viewport</td> <td>string | object</td> <td>{ selector: 'body', padding: 0 }</td> |