mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-17 09:52:29 +01:00
responsive tables all up in js docs
This commit is contained in:
Mark Otto
parent
bf5434dbec
commit
bed8e959b3
896
javascript.html
896
javascript.html
@ -228,45 +228,47 @@ $('#myModal').on('show.bs.modal', function (e) {
|
|||||||
|
|
||||||
<h3>Options</h3>
|
<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-backdrop=""</code>.</p>
|
<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-backdrop=""</code>.</p>
|
||||||
<table class="table table-bordered table-striped">
|
<div class="bs-table-scrollable">
|
||||||
<thead>
|
<table class="table table-bordered table-striped">
|
||||||
<tr>
|
<thead>
|
||||||
<th style="width: 100px;">Name</th>
|
<tr>
|
||||||
<th style="width: 50px;">type</th>
|
<th style="width: 100px;">Name</th>
|
||||||
<th style="width: 50px;">default</th>
|
<th style="width: 50px;">type</th>
|
||||||
<th>description</th>
|
<th style="width: 50px;">default</th>
|
||||||
</tr>
|
<th>description</th>
|
||||||
</thead>
|
</tr>
|
||||||
<tbody>
|
</thead>
|
||||||
<tr>
|
<tbody>
|
||||||
<td>backdrop</td>
|
<tr>
|
||||||
<td>boolean</td>
|
<td>backdrop</td>
|
||||||
<td>true</td>
|
<td>boolean</td>
|
||||||
<td>Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal on click.</td>
|
<td>true</td>
|
||||||
</tr>
|
<td>Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal on click.</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>keyboard</td>
|
<tr>
|
||||||
<td>boolean</td>
|
<td>keyboard</td>
|
||||||
<td>true</td>
|
<td>boolean</td>
|
||||||
<td>Closes the modal when escape key is pressed</td>
|
<td>true</td>
|
||||||
</tr>
|
<td>Closes the modal when escape key is pressed</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>show</td>
|
<tr>
|
||||||
<td>boolean</td>
|
<td>show</td>
|
||||||
<td>true</td>
|
<td>boolean</td>
|
||||||
<td>Shows the modal when initialized.</td>
|
<td>true</td>
|
||||||
</tr>
|
<td>Shows the modal when initialized.</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>remote</td>
|
<tr>
|
||||||
<td>path</td>
|
<td>remote</td>
|
||||||
<td>false</td>
|
<td>path</td>
|
||||||
<td><p>If a remote URL is provided, content will be loaded via jQuery's <code>load</code> method and injected into the <code>.modal-body</code>. If you're using the data api, you may alternatively use the <code>href</code> tag to specify the remote source. An example of this is shown below:</p>
|
<td>false</td>
|
||||||
|
<td><p>If a remote URL is provided, content will be loaded via jQuery's <code>load</code> method and injected into the <code>.modal-body</code>. If you're using the data api, you may alternatively use the <code>href</code> tag to specify the remote source. An example of this is shown below:</p>
|
||||||
{% highlight html %}
|
{% highlight html %}
|
||||||
<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
|
<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
</div><!-- /.bs-table-scrollable -->
|
||||||
|
|
||||||
<h3>Methods</h3>
|
<h3>Methods</h3>
|
||||||
|
|
||||||
@ -292,32 +294,34 @@ $('#myModal').modal({
|
|||||||
|
|
||||||
<h3>Events</h3>
|
<h3>Events</h3>
|
||||||
<p>Bootstrap's modal class exposes a few events for hooking into modal functionality.</p>
|
<p>Bootstrap's modal class exposes a few events for hooking into modal functionality.</p>
|
||||||
<table class="table table-bordered table-striped">
|
<div class="bs-table-scrollable">
|
||||||
<thead>
|
<table class="table table-bordered table-striped">
|
||||||
<tr>
|
<thead>
|
||||||
<th style="width: 150px;">Event Type</th>
|
<tr>
|
||||||
<th>Description</th>
|
<th style="width: 150px;">Event Type</th>
|
||||||
</tr>
|
<th>Description</th>
|
||||||
</thead>
|
</tr>
|
||||||
<tbody>
|
</thead>
|
||||||
<tr>
|
<tbody>
|
||||||
<td>show</td>
|
<tr>
|
||||||
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
|
<td>show</td>
|
||||||
</tr>
|
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>shown</td>
|
<tr>
|
||||||
<td>This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete).</td>
|
<td>shown</td>
|
||||||
</tr>
|
<td>This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete).</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>hide</td>
|
<tr>
|
||||||
<td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
|
<td>hide</td>
|
||||||
</tr>
|
<td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>hidden</td>
|
<tr>
|
||||||
<td>This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).</td>
|
<td>hidden</td>
|
||||||
</tr>
|
<td>This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).</td>
|
||||||
</tbody>
|
</tr>
|
||||||
</table>
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div><!-- /.bs-table-scrollable -->
|
||||||
{% highlight js %}
|
{% highlight js %}
|
||||||
$('#myModal').on('hidden.bs.modal', function () {
|
$('#myModal').on('hidden.bs.modal', function () {
|
||||||
// do something…
|
// do something…
|
||||||
@ -546,40 +550,44 @@ $('[data-spy="scroll"]').each(function () {
|
|||||||
|
|
||||||
<h3>Options</h3>
|
<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-offset=""</code>.</p>
|
<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-offset=""</code>.</p>
|
||||||
<table class="table table-bordered table-striped">
|
<div class="bs-table-scrollable">
|
||||||
<thead>
|
<table class="table table-bordered table-striped">
|
||||||
<tr>
|
<thead>
|
||||||
<th style="width: 100px;">Name</th>
|
<tr>
|
||||||
<th style="width: 100px;">type</th>
|
<th style="width: 100px;">Name</th>
|
||||||
<th style="width: 50px;">default</th>
|
<th style="width: 100px;">type</th>
|
||||||
<th>description</th>
|
<th style="width: 50px;">default</th>
|
||||||
</tr>
|
<th>description</th>
|
||||||
</thead>
|
</tr>
|
||||||
<tbody>
|
</thead>
|
||||||
<tr>
|
<tbody>
|
||||||
<td>offset</td>
|
<tr>
|
||||||
<td>number</td>
|
<td>offset</td>
|
||||||
<td>10</td>
|
<td>number</td>
|
||||||
<td>Pixels to offset from top when calculating position of scroll.</td>
|
<td>10</td>
|
||||||
</tr>
|
<td>Pixels to offset from top when calculating position of scroll.</td>
|
||||||
</tbody>
|
</tr>
|
||||||
</table>
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div><!-- ./bs-table-scrollable -->
|
||||||
|
|
||||||
<h3>Events</h3>
|
<h3>Events</h3>
|
||||||
<table class="table table-bordered table-striped">
|
<div class="bs-table-scrollable">
|
||||||
<thead>
|
<table class="table table-bordered table-striped">
|
||||||
<tr>
|
<thead>
|
||||||
<th style="width: 150px;">Event Type</th>
|
<tr>
|
||||||
<th>Description</th>
|
<th style="width: 150px;">Event Type</th>
|
||||||
</tr>
|
<th>Description</th>
|
||||||
</thead>
|
</tr>
|
||||||
<tbody>
|
</thead>
|
||||||
<tr>
|
<tbody>
|
||||||
<td>activate</td>
|
<tr>
|
||||||
<td>This event fires whenever a new item becomes activated by the scrollspy.</td>
|
<td>activate</td>
|
||||||
</tr>
|
<td>This event fires whenever a new item becomes activated by the scrollspy.</td>
|
||||||
</tbody>
|
</tr>
|
||||||
</table>
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div><!-- ./bs-table-scrollable -->
|
||||||
{% highlight js %}
|
{% highlight js %}
|
||||||
$('#myScrollspy').on('activate.bs.scrollspy', function () {
|
$('#myScrollspy').on('activate.bs.scrollspy', function () {
|
||||||
// do something…
|
// do something…
|
||||||
@ -685,24 +693,26 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
|
|||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
<h3>Events</h3>
|
<h3>Events</h3>
|
||||||
<table class="table table-bordered table-striped">
|
<div class="bs-table-scrollable">
|
||||||
<thead>
|
<table class="table table-bordered table-striped">
|
||||||
<tr>
|
<thead>
|
||||||
<th style="width: 150px;">Event Type</th>
|
<tr>
|
||||||
<th>Description</th>
|
<th style="width: 150px;">Event Type</th>
|
||||||
</tr>
|
<th>Description</th>
|
||||||
</thead>
|
</tr>
|
||||||
<tbody>
|
</thead>
|
||||||
<tr>
|
<tbody>
|
||||||
<td>show</td>
|
<tr>
|
||||||
<td>This event fires on tab show, but before the new tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
|
<td>show</td>
|
||||||
</tr>
|
<td>This event fires on tab show, but before the new tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>shown</td>
|
<tr>
|
||||||
<td>This event fires on tab show after a tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
|
<td>shown</td>
|
||||||
</tr>
|
<td>This event fires on tab show after a tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
|
||||||
</tbody>
|
</tr>
|
||||||
</table>
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div><!-- /.bs-table-scrollable -->
|
||||||
{% highlight js %}
|
{% highlight js %}
|
||||||
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
|
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
|
||||||
e.target // activated tab
|
e.target // activated tab
|
||||||
@ -752,72 +762,74 @@ $('#example').tooltip(options)
|
|||||||
|
|
||||||
<h3>Options</h3>
|
<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-animation=""</code>.</p>
|
<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-animation=""</code>.</p>
|
||||||
<table class="table table-bordered table-striped">
|
<div class="bs-table-scrollable">
|
||||||
<thead>
|
<table class="table table-bordered table-striped">
|
||||||
<tr>
|
<thead>
|
||||||
<th style="width: 100px;">Name</th>
|
<tr>
|
||||||
<th style="width: 100px;">type</th>
|
<th style="width: 100px;">Name</th>
|
||||||
<th style="width: 50px;">default</th>
|
<th style="width: 100px;">type</th>
|
||||||
<th>description</th>
|
<th style="width: 50px;">default</th>
|
||||||
</tr>
|
<th>description</th>
|
||||||
</thead>
|
</tr>
|
||||||
<tbody>
|
</thead>
|
||||||
<tr>
|
<tbody>
|
||||||
<td>animation</td>
|
<tr>
|
||||||
<td>boolean</td>
|
<td>animation</td>
|
||||||
<td>true</td>
|
<td>boolean</td>
|
||||||
<td>apply a CSS fade transition to the tooltip</td>
|
<td>true</td>
|
||||||
</tr>
|
<td>apply a CSS fade transition to the tooltip</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>html</td>
|
<tr>
|
||||||
<td>boolean</td>
|
<td>html</td>
|
||||||
<td>false</td>
|
<td>boolean</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>
|
<td>false</td>
|
||||||
</tr>
|
<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>
|
||||||
<td>placement</td>
|
<tr>
|
||||||
<td>string | function</td>
|
<td>placement</td>
|
||||||
<td>'top'</td>
|
<td>string | function</td>
|
||||||
<td>how to position the tooltip - top | bottom | left | right | auto. <br> When "auto" is specified, it will dynamically reorient the tooltip. For example, if placment is "auto left", the tooltip will display to the left when possible, otherwise it will display right.</td>
|
<td>'top'</td>
|
||||||
</tr>
|
<td>how to position the tooltip - top | bottom | left | right | auto. <br> When "auto" is specified, it will dynamically reorient the tooltip. For example, if placment is "auto left", the tooltip will display to the left when possible, otherwise it will display right.</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>selector</td>
|
<tr>
|
||||||
<td>string</td>
|
<td>selector</td>
|
||||||
<td>false</td>
|
<td>string</td>
|
||||||
<td>If a selector is provided, tooltip objects will be delegated to the specified targets.</td>
|
<td>false</td>
|
||||||
</tr>
|
<td>If a selector is provided, tooltip objects will be delegated to the specified targets.</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>title</td>
|
<tr>
|
||||||
<td>string | function</td>
|
<td>title</td>
|
||||||
<td>''</td>
|
<td>string | function</td>
|
||||||
<td>default title value if <code>title</code> tag isn't present</td>
|
<td>''</td>
|
||||||
</tr>
|
<td>default title value if <code>title</code> tag isn't present</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>trigger</td>
|
<tr>
|
||||||
<td>string</td>
|
<td>trigger</td>
|
||||||
<td>'hover focus'</td>
|
<td>string</td>
|
||||||
<td>how tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</td>
|
<td>'hover focus'</td>
|
||||||
</tr>
|
<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>
|
<tr>
|
||||||
<td>number | object</td>
|
<td>delay</td>
|
||||||
<td>0</td>
|
<td>number | object</td>
|
||||||
<td>
|
<td>0</td>
|
||||||
<p>delay showing and hiding the tooltip (ms) - does not apply to manual trigger type</p>
|
<td>
|
||||||
<p>If a number is supplied, delay is applied to both hide/show</p>
|
<p>delay showing and hiding the tooltip (ms) - does not apply to manual trigger type</p>
|
||||||
<p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
|
<p>If a number is supplied, delay is applied to both hide/show</p>
|
||||||
</td>
|
<p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
|
||||||
</tr>
|
</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>container</td>
|
<tr>
|
||||||
<td>string | false</td>
|
<td>container</td>
|
||||||
<td>false</td>
|
<td>string | false</td>
|
||||||
<td>
|
<td>false</td>
|
||||||
<p>Appends the tooltip to a specific element. Example: <code>container: 'body'</code></p>
|
<td>
|
||||||
</td>
|
<p>Appends the tooltip to a specific element. Example: <code>container: 'body'</code></p>
|
||||||
</tr>
|
</td>
|
||||||
</tbody>
|
</tr>
|
||||||
</table>
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div><!-- /.bs-table-scrollable -->
|
||||||
<div class="bs-callout bs-callout-info">
|
<div class="bs-callout bs-callout-info">
|
||||||
<h4>Data attributes for individual tooltips</h4>
|
<h4>Data attributes for individual tooltips</h4>
|
||||||
<p>Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.</p>
|
<p>Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.</p>
|
||||||
@ -850,32 +862,34 @@ $('#example').tooltip(options)
|
|||||||
{% highlight js %}$('#element').tooltip('destroy'){% endhighlight %}
|
{% highlight js %}$('#element').tooltip('destroy'){% endhighlight %}
|
||||||
|
|
||||||
<h3>Events</h3>
|
<h3>Events</h3>
|
||||||
<table class="table table-bordered table-striped">
|
<div class="bs-table-scrollable">
|
||||||
<thead>
|
<table class="table table-bordered table-striped">
|
||||||
<tr>
|
<thead>
|
||||||
<th style="width: 150px;">Event Type</th>
|
<tr>
|
||||||
<th>Description</th>
|
<th style="width: 150px;">Event Type</th>
|
||||||
</tr>
|
<th>Description</th>
|
||||||
</thead>
|
</tr>
|
||||||
<tbody>
|
</thead>
|
||||||
<tr>
|
<tbody>
|
||||||
<td>show</td>
|
<tr>
|
||||||
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
|
<td>show</td>
|
||||||
</tr>
|
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>shown</td>
|
<tr>
|
||||||
<td>This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete).</td>
|
<td>shown</td>
|
||||||
</tr>
|
<td>This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete).</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>hide</td>
|
<tr>
|
||||||
<td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
|
<td>hide</td>
|
||||||
</tr>
|
<td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>hidden</td>
|
<tr>
|
||||||
<td>This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).</td>
|
<td>hidden</td>
|
||||||
</tr>
|
<td>This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).</td>
|
||||||
</tbody>
|
</tr>
|
||||||
</table>
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div><!-- /.bs-table-scrollable -->
|
||||||
{% highlight js %}
|
{% highlight js %}
|
||||||
$('#myTooltip').on('hidden.bs.tooltip', function () {
|
$('#myTooltip').on('hidden.bs.tooltip', function () {
|
||||||
// do something…
|
// do something…
|
||||||
@ -970,78 +984,80 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
|
|||||||
|
|
||||||
<h3>Options</h3>
|
<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-animation=""</code>.</p>
|
<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-animation=""</code>.</p>
|
||||||
<table class="table table-bordered table-striped">
|
<div class="bs-table-scrollable">
|
||||||
<thead>
|
<table class="table table-bordered table-striped">
|
||||||
<tr>
|
<thead>
|
||||||
<th style="width: 100px;">Name</th>
|
<tr>
|
||||||
<th style="width: 100px;">type</th>
|
<th style="width: 100px;">Name</th>
|
||||||
<th style="width: 50px;">default</th>
|
<th style="width: 100px;">type</th>
|
||||||
<th>description</th>
|
<th style="width: 50px;">default</th>
|
||||||
</tr>
|
<th>description</th>
|
||||||
</thead>
|
</tr>
|
||||||
<tbody>
|
</thead>
|
||||||
<tr>
|
<tbody>
|
||||||
<td>animation</td>
|
<tr>
|
||||||
<td>boolean</td>
|
<td>animation</td>
|
||||||
<td>true</td>
|
<td>boolean</td>
|
||||||
<td>apply a CSS fade transition to the tooltip</td>
|
<td>true</td>
|
||||||
</tr>
|
<td>apply a CSS fade transition to the tooltip</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>html</td>
|
<tr>
|
||||||
<td>boolean</td>
|
<td>html</td>
|
||||||
<td>false</td>
|
<td>boolean</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>
|
<td>false</td>
|
||||||
</tr>
|
<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>
|
||||||
<td>placement</td>
|
<tr>
|
||||||
<td>string | function</td>
|
<td>placement</td>
|
||||||
<td>'right'</td>
|
<td>string | function</td>
|
||||||
<td>how to position the popover - top | bottom | left | right | auto.<br> When "auto" is specified, it will dynamically reorient the popover. For example, if placment is "auto left", the tooltip will display to the left when possible, otherwise it will display right.</td>
|
<td>'right'</td>
|
||||||
</tr>
|
<td>how to position the popover - top | bottom | left | right | auto.<br> When "auto" is specified, it will dynamically reorient the popover. For example, if placment is "auto left", the tooltip will display to the left when possible, otherwise it will display right.</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>selector</td>
|
<tr>
|
||||||
<td>string</td>
|
<td>selector</td>
|
||||||
<td>false</td>
|
<td>string</td>
|
||||||
<td>if a selector is provided, tooltip objects will be delegated to the specified targets 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 popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="http://jsfiddle.net/KPeKS/4/">an informative example</a>.</td>
|
<td>false</td>
|
||||||
</tr>
|
<td>if a selector is provided, tooltip objects will be delegated to the specified targets 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 popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="http://jsfiddle.net/KPeKS/4/">an informative example</a>.</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>trigger</td>
|
<tr>
|
||||||
<td>string</td>
|
<td>trigger</td>
|
||||||
<td>'click'</td>
|
<td>string</td>
|
||||||
<td>how popover is triggered - click | hover | focus | manual</td>
|
<td>'click'</td>
|
||||||
</tr>
|
<td>how popover is triggered - click | hover | focus | manual</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>title</td>
|
<tr>
|
||||||
<td>string | function</td>
|
<td>title</td>
|
||||||
<td>''</td>
|
<td>string | function</td>
|
||||||
<td>default title value if <code>title</code> attribute isn't present</td>
|
<td>''</td>
|
||||||
</tr>
|
<td>default title value if <code>title</code> attribute isn't present</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>content</td>
|
<tr>
|
||||||
<td>string | function</td>
|
<td>content</td>
|
||||||
<td>''</td>
|
<td>string | function</td>
|
||||||
<td>default content value if <code>data-content</code> attribute isn't present</td>
|
<td>''</td>
|
||||||
</tr>
|
<td>default content value if <code>data-content</code> attribute isn't present</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>delay</td>
|
<tr>
|
||||||
<td>number | object</td>
|
<td>delay</td>
|
||||||
<td>0</td>
|
<td>number | object</td>
|
||||||
<td>
|
<td>0</td>
|
||||||
<p>delay showing and hiding the popover (ms) - does not apply to manual trigger type</p>
|
<td>
|
||||||
<p>If a number is supplied, delay is applied to both hide/show</p>
|
<p>delay showing and hiding the popover (ms) - does not apply to manual trigger type</p>
|
||||||
<p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
|
<p>If a number is supplied, delay is applied to both hide/show</p>
|
||||||
</td>
|
<p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
|
||||||
</tr>
|
</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>container</td>
|
<tr>
|
||||||
<td>string | false</td>
|
<td>container</td>
|
||||||
<td>false</td>
|
<td>string | false</td>
|
||||||
<td>
|
<td>false</td>
|
||||||
<p>Appends the popover to a specific element. Example: <code>container: 'body'</code></p>
|
<td>
|
||||||
</td>
|
<p>Appends the popover to a specific element. Example: <code>container: 'body'</code></p>
|
||||||
</tr>
|
</td>
|
||||||
</tbody>
|
</tr>
|
||||||
</table>
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div><!-- /.bs-table-scrollable -->
|
||||||
<div class="bs-callout bs-callout-info">
|
<div class="bs-callout bs-callout-info">
|
||||||
<h4>Data attributes for individual popovers</h4>
|
<h4>Data attributes for individual popovers</h4>
|
||||||
<p>Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.</p>
|
<p>Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.</p>
|
||||||
@ -1070,32 +1086,34 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
|
|||||||
<p>Hides and destroys an element's popover.</p>
|
<p>Hides and destroys an element's popover.</p>
|
||||||
{% highlight js %}$('#element').popover('destroy'){% endhighlight %}
|
{% highlight js %}$('#element').popover('destroy'){% endhighlight %}
|
||||||
<h3>Events</h3>
|
<h3>Events</h3>
|
||||||
<table class="table table-bordered table-striped">
|
<div class="bs-table-scrollable">
|
||||||
<thead>
|
<table class="table table-bordered table-striped">
|
||||||
<tr>
|
<thead>
|
||||||
<th style="width: 150px;">Event Type</th>
|
<tr>
|
||||||
<th>Description</th>
|
<th style="width: 150px;">Event Type</th>
|
||||||
</tr>
|
<th>Description</th>
|
||||||
</thead>
|
</tr>
|
||||||
<tbody>
|
</thead>
|
||||||
<tr>
|
<tbody>
|
||||||
<td>show</td>
|
<tr>
|
||||||
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
|
<td>show</td>
|
||||||
</tr>
|
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>shown</td>
|
<tr>
|
||||||
<td>This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).</td>
|
<td>shown</td>
|
||||||
</tr>
|
<td>This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>hide</td>
|
<tr>
|
||||||
<td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
|
<td>hide</td>
|
||||||
</tr>
|
<td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>hidden</td>
|
<tr>
|
||||||
<td>This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).</td>
|
<td>hidden</td>
|
||||||
</tr>
|
<td>This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).</td>
|
||||||
</tbody>
|
</tr>
|
||||||
</table>
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div><!-- /.bs-table-scrollable -->
|
||||||
{% highlight js %}
|
{% highlight js %}
|
||||||
$('#myPopover').on('hidden.bs.popover', function () {
|
$('#myPopover').on('hidden.bs.popover', function () {
|
||||||
// do something…
|
// do something…
|
||||||
@ -1152,24 +1170,26 @@ $('#myPopover').on('hidden.bs.popover', function () {
|
|||||||
|
|
||||||
<h3>Events</h3>
|
<h3>Events</h3>
|
||||||
<p>Bootstrap's alert class exposes a few events for hooking into alert functionality.</p>
|
<p>Bootstrap's alert class exposes a few events for hooking into alert functionality.</p>
|
||||||
<table class="table table-bordered table-striped">
|
<div class="bs-table-scrollable">
|
||||||
<thead>
|
<table class="table table-bordered table-striped">
|
||||||
<tr>
|
<thead>
|
||||||
<th style="width: 150px;">Event Type</th>
|
<tr>
|
||||||
<th>Description</th>
|
<th style="width: 150px;">Event Type</th>
|
||||||
</tr>
|
<th>Description</th>
|
||||||
</thead>
|
</tr>
|
||||||
<tbody>
|
</thead>
|
||||||
<tr>
|
<tbody>
|
||||||
<td>close</td>
|
<tr>
|
||||||
<td>This event fires immediately when the <code>close</code> instance method is called.</td>
|
<td>close</td>
|
||||||
</tr>
|
<td>This event fires immediately when the <code>close</code> instance method is called.</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>closed</td>
|
<tr>
|
||||||
<td>This event is fired when the alert has been closed (will wait for CSS transitions to complete).</td>
|
<td>closed</td>
|
||||||
</tr>
|
<td>This event is fired when the alert has been closed (will wait for CSS transitions to complete).</td>
|
||||||
</tbody>
|
</tr>
|
||||||
</table>
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div><!-- /.bs-table-scrollable -->
|
||||||
{% highlight js %}
|
{% highlight js %}
|
||||||
$('#my-alert').bind('closed.bs.alert', function () {
|
$('#my-alert').bind('closed.bs.alert', function () {
|
||||||
// do something…
|
// do something…
|
||||||
@ -1444,31 +1464,32 @@ $(".collapse").collapse()
|
|||||||
|
|
||||||
<h3>Options</h3>
|
<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-parent=""</code>.</p>
|
<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-parent=""</code>.</p>
|
||||||
<table class="table table-bordered table-striped">
|
<div class="bs-table-scrollable">
|
||||||
<thead>
|
<table class="table table-bordered table-striped">
|
||||||
<tr>
|
<thead>
|
||||||
<th style="width: 100px;">Name</th>
|
<tr>
|
||||||
<th style="width: 50px;">type</th>
|
<th style="width: 100px;">Name</th>
|
||||||
<th style="width: 50px;">default</th>
|
<th style="width: 50px;">type</th>
|
||||||
<th>description</th>
|
<th style="width: 50px;">default</th>
|
||||||
</tr>
|
<th>description</th>
|
||||||
</thead>
|
</tr>
|
||||||
<tbody>
|
</thead>
|
||||||
<tr>
|
<tbody>
|
||||||
<td>parent</td>
|
<tr>
|
||||||
<td>selector</td>
|
<td>parent</td>
|
||||||
<td>false</td>
|
<td>selector</td>
|
||||||
<td>If selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior)</td>
|
<td>false</td>
|
||||||
</tr>
|
<td>If selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior)</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>toggle</td>
|
<tr>
|
||||||
<td>boolean</td>
|
<td>toggle</td>
|
||||||
<td>true</td>
|
<td>boolean</td>
|
||||||
<td>Toggles the collapsible element on invocation</td>
|
<td>true</td>
|
||||||
</tr>
|
<td>Toggles the collapsible element on invocation</td>
|
||||||
</tbody>
|
</tr>
|
||||||
</table>
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div><!-- /.bs-table-scrollable -->
|
||||||
|
|
||||||
<h3>Methods</h3>
|
<h3>Methods</h3>
|
||||||
|
|
||||||
@ -1491,34 +1512,36 @@ $('#myCollapsible').collapse({
|
|||||||
|
|
||||||
<h3>Events</h3>
|
<h3>Events</h3>
|
||||||
<p>Bootstrap's collapse class exposes a few events for hooking into collapse functionality.</p>
|
<p>Bootstrap's collapse class exposes a few events for hooking into collapse functionality.</p>
|
||||||
<table class="table table-bordered table-striped">
|
<div class="bs-table-scrollable">
|
||||||
<thead>
|
<table class="table table-bordered table-striped">
|
||||||
<tr>
|
<thead>
|
||||||
<th style="width: 150px;">Event Type</th>
|
<tr>
|
||||||
<th>Description</th>
|
<th style="width: 150px;">Event Type</th>
|
||||||
</tr>
|
<th>Description</th>
|
||||||
</thead>
|
</tr>
|
||||||
<tbody>
|
</thead>
|
||||||
<tr>
|
<tbody>
|
||||||
<td>show</td>
|
<tr>
|
||||||
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
|
<td>show</td>
|
||||||
</tr>
|
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>shown</td>
|
<tr>
|
||||||
<td>This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).</td>
|
<td>shown</td>
|
||||||
</tr>
|
<td>This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>hide</td>
|
<tr>
|
||||||
<td>
|
<td>hide</td>
|
||||||
This event is fired immediately when the <code>hide</code> method has been called.
|
<td>
|
||||||
</td>
|
This event is fired immediately when the <code>hide</code> method has been called.
|
||||||
</tr>
|
</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>hidden</td>
|
<tr>
|
||||||
<td>This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).</td>
|
<td>hidden</td>
|
||||||
</tr>
|
<td>This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).</td>
|
||||||
</tbody>
|
</tr>
|
||||||
</table>
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div><!-- /.bs-table-scrollable -->
|
||||||
{% highlight js %}
|
{% highlight js %}
|
||||||
$('#myCollapsible').on('hidden.bs.collapse', function () {
|
$('#myCollapsible').on('hidden.bs.collapse', function () {
|
||||||
// do something…
|
// do something…
|
||||||
@ -1661,30 +1684,32 @@ $('.carousel').carousel()
|
|||||||
|
|
||||||
<h3>Options</h3>
|
<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 JavaScript. 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">
|
<div class="bs-table-scrollable">
|
||||||
<thead>
|
<table class="table table-bordered table-striped">
|
||||||
<tr>
|
<thead>
|
||||||
<th style="width: 100px;">Name</th>
|
<tr>
|
||||||
<th style="width: 50px;">type</th>
|
<th style="width: 100px;">Name</th>
|
||||||
<th style="width: 50px;">default</th>
|
<th style="width: 50px;">type</th>
|
||||||
<th>description</th>
|
<th style="width: 50px;">default</th>
|
||||||
</tr>
|
<th>description</th>
|
||||||
</thead>
|
</tr>
|
||||||
<tbody>
|
</thead>
|
||||||
<tr>
|
<tbody>
|
||||||
<td>interval</td>
|
<tr>
|
||||||
<td>number</td>
|
<td>interval</td>
|
||||||
<td>5000</td>
|
<td>number</td>
|
||||||
<td>The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.</td>
|
<td>5000</td>
|
||||||
</tr>
|
<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>
|
<tr>
|
||||||
<td>string</td>
|
<td>pause</td>
|
||||||
<td>"hover"</td>
|
<td>string</td>
|
||||||
<td>Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.</td>
|
<td>"hover"</td>
|
||||||
</tr>
|
<td>Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.</td>
|
||||||
</tbody>
|
</tr>
|
||||||
</table>
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div><!-- /.bs-table-scrollable -->
|
||||||
|
|
||||||
<h3>Methods</h3>
|
<h3>Methods</h3>
|
||||||
|
|
||||||
@ -1714,24 +1739,26 @@ $('.carousel').carousel({
|
|||||||
|
|
||||||
<h3>Events</h3>
|
<h3>Events</h3>
|
||||||
<p>Bootstrap's carousel class exposes two events for hooking into carousel functionality.</p>
|
<p>Bootstrap's carousel class exposes two events for hooking into carousel functionality.</p>
|
||||||
<table class="table table-bordered table-striped">
|
<div class="bs-table-scrollable">
|
||||||
<thead>
|
<table class="table table-bordered table-striped">
|
||||||
<tr>
|
<thead>
|
||||||
<th style="width: 150px;">Event Type</th>
|
<tr>
|
||||||
<th>Description</th>
|
<th style="width: 150px;">Event Type</th>
|
||||||
</tr>
|
<th>Description</th>
|
||||||
</thead>
|
</tr>
|
||||||
<tbody>
|
</thead>
|
||||||
<tr>
|
<tbody>
|
||||||
<td>slide</td>
|
<tr>
|
||||||
<td>This event fires immediately when the <code>slide</code> instance method is invoked.</td>
|
<td>slide</td>
|
||||||
</tr>
|
<td>This event fires immediately when the <code>slide</code> instance method is invoked.</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>slid</td>
|
<tr>
|
||||||
<td>This event is fired when the carousel has completed its slide transition.</td>
|
<td>slid</td>
|
||||||
</tr>
|
<td>This event is fired when the carousel has completed its slide transition.</td>
|
||||||
</tbody>
|
</tr>
|
||||||
</table>
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div><!-- /.bs-table-scrollable -->
|
||||||
{% highlight js %}
|
{% highlight js %}
|
||||||
$('#myCarousel').on('slide.bs.carousel', function () {
|
$('#myCarousel').on('slide.bs.carousel', function () {
|
||||||
// do something…
|
// do something…
|
||||||
@ -1787,22 +1814,25 @@ $('#myCarousel').on('slide.bs.carousel', function () {
|
|||||||
<h3>Options</h3>
|
<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-offset-top="200"</code>.</p>
|
<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-offset-top="200"</code>.</p>
|
||||||
|
|
||||||
<table class="table table-bordered table-striped">
|
<div class="bs-table-scrollable">
|
||||||
<thead>
|
<table class="table table-bordered table-striped">
|
||||||
<tr>
|
<thead>
|
||||||
<th style="width: 100px;">Name</th>
|
<tr>
|
||||||
<th style="width: 100px;">type</th>
|
<th style="width: 100px;">Name</th>
|
||||||
<th style="width: 50px;">default</th>
|
<th style="width: 100px;">type</th>
|
||||||
<th>description</th>
|
<th style="width: 50px;">default</th>
|
||||||
</tr>
|
<th>description</th>
|
||||||
</thead>
|
</tr>
|
||||||
<tbody>
|
</thead>
|
||||||
<tr>
|
<tbody>
|
||||||
<td>offset</td>
|
<tr>
|
||||||
<td>number | function | object</td>
|
<td>offset</td>
|
||||||
<td>10</td>
|
<td>number | function | object</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 left 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>
|
<td>10</td>
|
||||||
</tr>
|
<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 left 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>
|
||||||
</tbody>
|
</tr>
|
||||||
</table>
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div><!-- /.bs-table-scrollable -->
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user