mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-24 12:40:58 +00:00
fix js docs formatting
This commit is contained in:
Mark Otto
parent
4bb2a13776
commit
79067721b1
@ -894,351 +894,214 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h2>Examples</h2>
|
<div class="popover right">
|
||||||
<p>Add small overlays of content, like those on the iPad, to any element for housing secondary information. Hover over the button to trigger the popover. <strong>Requires <a href="#tooltips">Tooltip</a> to be included.</strong></p>
|
<div class="arrow"></div>
|
||||||
|
<h3 class="popover-title">Popover right</h3>
|
||||||
<h3>Static popover</h3>
|
<div class="popover-content">
|
||||||
<p>Four options are available: top, right, bottom, and left aligned.</p>
|
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
|
||||||
<div class="bs-docs-example bs-docs-example-popover">
|
|
||||||
<div class="popover top">
|
|
||||||
<div class="arrow"></div>
|
|
||||||
<h3 class="popover-title">Popover top</h3>
|
|
||||||
<div class="popover-content">
|
|
||||||
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="popover right">
|
|
||||||
<div class="arrow"></div>
|
|
||||||
<h3 class="popover-title">Popover right</h3>
|
|
||||||
<div class="popover-content">
|
|
||||||
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="popover bottom">
|
|
||||||
<div class="arrow"></div>
|
|
||||||
<h3 class="popover-title">Popover bottom</h3>
|
|
||||||
<div class="popover-content">
|
|
||||||
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="popover left">
|
|
||||||
<div class="arrow"></div>
|
|
||||||
<h3 class="popover-title">Popover left</h3>
|
|
||||||
<div class="popover-content">
|
|
||||||
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="clearfix"></div>
|
|
||||||
</div>
|
|
||||||
<p>No markup shown as popovers are generated from javascript and content within a <code>data</code> attribute.</p>
|
|
||||||
|
|
||||||
<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?">Hover for popover</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="popover bottom">
|
||||||
<hr class="bs-docs-separator">
|
<div class="arrow"></div>
|
||||||
|
<h3 class="popover-title">Popover bottom</h3>
|
||||||
|
<div class="popover-content">
|
||||||
<h2>Usage</h2>
|
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
|
||||||
<p>Enable popovers via javascript:</p>
|
</div>
|
||||||
<pre class="prettyprint linenums">$('#example').popover(options)</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-animation=""</code>.</p>
|
|
||||||
<table class="table table-bordered table-striped">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th style="width: 100px;">Name</th>
|
|
||||||
<th style="width: 100px;">type</th>
|
|
||||||
<th style="width: 50px;">default</th>
|
|
||||||
<th>description</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>animation</td>
|
|
||||||
<td>boolean</td>
|
|
||||||
<td>true</td>
|
|
||||||
<td>apply a css fade transition to the tooltip</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>html</td>
|
|
||||||
<td>boolean</td>
|
|
||||||
<td>true</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>
|
|
||||||
<td>placement</td>
|
|
||||||
<td>string|function</td>
|
|
||||||
<td>'right'</td>
|
|
||||||
<td>how to position the popover - top | bottom | left | right</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<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>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>trigger</td>
|
|
||||||
<td>string</td>
|
|
||||||
<td>'hover'</td>
|
|
||||||
<td>how popover is triggered - hover | focus | manual</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>title</td>
|
|
||||||
<td>string | function</td>
|
|
||||||
<td>''</td>
|
|
||||||
<td>default title value if `title` attribute isn't present</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>content</td>
|
|
||||||
<td>string | function</td>
|
|
||||||
<td>''</td>
|
|
||||||
<td>default content value if `data-content` 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>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
<div class="alert alert-info">
|
|
||||||
<strong>Heads up!</strong>
|
|
||||||
Options for individual popovers can alternatively be specified through the use of data attributes.
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Markup</h3>
|
<div class="popover left">
|
||||||
<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>
|
<div class="arrow"></div>
|
||||||
|
<h3 class="popover-title">Popover left</h3>
|
||||||
<h3>Methods</h3>
|
<div class="popover-content">
|
||||||
<h4>$().popover(options)</h4>
|
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
|
||||||
<p>Initializes popovers for an element collection.</p>
|
</div>
|
||||||
<h4>.popover('show')</h4>
|
|
||||||
<p>Reveals an elements popover.</p>
|
|
||||||
<pre class="prettyprint linenums">$('#element').popover('show')</pre>
|
|
||||||
<h4>.popover('hide')</h4>
|
|
||||||
<p>Hides an elements popover.</p>
|
|
||||||
<pre class="prettyprint linenums">$('#element').popover('hide')</pre>
|
|
||||||
<h4>.popover('toggle')</h4>
|
|
||||||
<p>Toggles an elements popover.</p>
|
|
||||||
<pre class="prettyprint linenums">$('#element').popover('toggle')</pre>
|
|
||||||
<h4>.popover('destroy')</h4>
|
|
||||||
<p>Hides and destroys an element's popover.</p>
|
|
||||||
<pre class="prettyprint linenums">$('#element').popover('destroy')</pre>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Alert
|
|
||||||
================================================== -->
|
|
||||||
<section id="alerts">
|
|
||||||
<div class="page-header">
|
|
||||||
<h1>Alert messages <small>bootstrap-alert.js</small></h1>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="clearfix"></div>
|
||||||
|
</div>
|
||||||
|
<p>No markup shown as popovers are generated from javascript and content within a <code>data</code> attribute.</p>
|
||||||
|
|
||||||
<h2>Example alerts</h2>
|
<h3>Live demo</h3>
|
||||||
<p>Add dismiss functionality to all alerge messages with this plugin.</p>
|
<div class="bs-docs-example" style="padding-bottom: 24px;">
|
||||||
<div class="bs-docs-example">
|
<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?">Hover for popover</a>
|
||||||
<div class="alert fade in">
|
</div>
|
||||||
<button type="button" class="close" data-dismiss="alert">×</button>
|
|
||||||
<strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
|
|
||||||
</div>
|
|
||||||
<p>No markup shown as popovers are generated from javascript and content within a <code>data</code> attribute.</p>
|
|
||||||
|
|
||||||
<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?">Hover for popover</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<hr class="bs-docs-separator">
|
<hr class="bs-docs-separator">
|
||||||
|
|
||||||
|
|
||||||
<h2>Usage</h2>
|
<h2>Usage</h2>
|
||||||
<p>Enable popovers via javascript:</p>
|
<p>Enable popovers via javascript:</p>
|
||||||
<pre class="prettyprint linenums">$('#example').popover(options)</pre>
|
<pre class="prettyprint linenums">$('#example').popover(options)</pre>
|
||||||
|
|
||||||
<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">
|
<table class="table table-bordered table-striped">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th style="width: 100px;">Name</th>
|
<th style="width: 100px;">Name</th>
|
||||||
<th style="width: 100px;">type</th>
|
<th style="width: 100px;">type</th>
|
||||||
<th style="width: 50px;">default</th>
|
<th style="width: 50px;">default</th>
|
||||||
<th>description</th>
|
<th>description</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>animation</td>
|
<td>animation</td>
|
||||||
<td>boolean</td>
|
<td>boolean</td>
|
||||||
<td>true</td>
|
<td>true</td>
|
||||||
<td>apply a css fade transition to the tooltip</td>
|
<td>apply a css fade transition to the tooltip</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>html</td>
|
<td>html</td>
|
||||||
<td>boolean</td>
|
<td>boolean</td>
|
||||||
<td>true</td>
|
<td>true</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>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>
|
||||||
<tr>
|
<tr>
|
||||||
<td>placement</td>
|
<td>placement</td>
|
||||||
<td>string|function</td>
|
<td>string|function</td>
|
||||||
<td>'right'</td>
|
<td>'right'</td>
|
||||||
<td>how to position the popover - top | bottom | left | right</td>
|
<td>how to position the popover - top | bottom | left | right</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>selector</td>
|
<td>selector</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>false</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</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>trigger</td>
|
<td>trigger</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>'hover'</td>
|
<td>'hover'</td>
|
||||||
<td>how popover is triggered - hover | focus | manual</td>
|
<td>how popover is triggered - hover | focus | manual</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>title</td>
|
<td>title</td>
|
||||||
<td>string | function</td>
|
<td>string | function</td>
|
||||||
<td>''</td>
|
<td>''</td>
|
||||||
<td>default title value if `title` attribute isn't present</td>
|
<td>default title value if `title` attribute isn't present</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>content</td>
|
<td>content</td>
|
||||||
<td>string | function</td>
|
<td>string | function</td>
|
||||||
<td>''</td>
|
<td>''</td>
|
||||||
<td>default content value if `data-content` attribute isn't present</td>
|
<td>default content value if `data-content` attribute isn't present</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>delay</td>
|
<td>delay</td>
|
||||||
<td>number | object</td>
|
<td>number | object</td>
|
||||||
<td>0</td>
|
<td>0</td>
|
||||||
<td>
|
<td>
|
||||||
<p>delay showing and hiding the popover (ms) - does not apply to manual trigger type</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>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>
|
<p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
<div class="alert alert-info">
|
<div class="alert alert-info">
|
||||||
<strong>Heads up!</strong>
|
<strong>Heads up!</strong>
|
||||||
Options for individual popovers can alternatively be specified through the use of data attributes.
|
Options for individual popovers can alternatively be specified through the use of data attributes.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Markup</h3>
|
<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>
|
<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>
|
||||||
|
|
||||||
<h3>Methods</h3>
|
<h3>Methods</h3>
|
||||||
<h4>$().popover(options)</h4>
|
<h4>$().popover(options)</h4>
|
||||||
<p>Initializes popovers for an element collection.</p>
|
<p>Initializes popovers for an element collection.</p>
|
||||||
<h4>.popover('show')</h4>
|
<h4>.popover('show')</h4>
|
||||||
<p>Reveals an elements popover.</p>
|
<p>Reveals an elements popover.</p>
|
||||||
<pre class="prettyprint linenums">$('#element').popover('show')</pre>
|
<pre class="prettyprint linenums">$('#element').popover('show')</pre>
|
||||||
<h4>.popover('hide')</h4>
|
<h4>.popover('hide')</h4>
|
||||||
<p>Hides an elements popover.</p>
|
<p>Hides an elements popover.</p>
|
||||||
<pre class="prettyprint linenums">$('#element').popover('hide')</pre>
|
<pre class="prettyprint linenums">$('#element').popover('hide')</pre>
|
||||||
<h4>.popover('toggle')</h4>
|
<h4>.popover('toggle')</h4>
|
||||||
<p>Toggles an elements popover.</p>
|
<p>Toggles an elements popover.</p>
|
||||||
<pre class="prettyprint linenums">$('#element').popover('toggle')</pre>
|
<pre class="prettyprint linenums">$('#element').popover('toggle')</pre>
|
||||||
<h4>.popover('destroy')</h4>
|
<h4>.popover('destroy')</h4>
|
||||||
<p>Destroys an element's popover.</p>
|
<p>Hides and destroys an element's popover.</p>
|
||||||
<pre class="prettyprint linenums">$('#element').popover('destroy')</pre>
|
<pre class="prettyprint linenums">$('#element').popover('destroy')</pre>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Alert
|
<!-- Alert
|
||||||
================================================== -->
|
================================================== -->
|
||||||
<section id="alerts">
|
<section id="alerts">
|
||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<h1>Alert messages <small>bootstrap-alert.js</small></h1>
|
<h1>Alert messages <small>bootstrap-alert.js</small></h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<h2>Example alerts</h2>
|
<h2>Example alerts</h2>
|
||||||
<p>Add dismiss functionality to all alerge messages with this plugin.</p>
|
<p>Add dismiss functionality to all alerge messages with this plugin.</p>
|
||||||
<div class="bs-docs-example">
|
<div class="bs-docs-example">
|
||||||
<div class="alert fade in">
|
<div class="alert fade in">
|
||||||
<button type="button" class="close" data-dismiss="alert">×</button>
|
<button type="button" class="close" data-dismiss="alert">×</button>
|
||||||
<strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
|
<strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="bs-docs-example">
|
<div class="bs-docs-example">
|
||||||
<div class="alert alert-block alert-error fade in">
|
<div class="alert alert-block alert-error fade in">
|
||||||
<button type="button" class="close" data-dismiss="alert">×</button>
|
<button type="button" class="close" data-dismiss="alert">×</button>
|
||||||
<h4 class="alert-heading">Oh snap! You got an error!</h4>
|
<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>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>
|
<p>
|
||||||
<a class="btn btn-danger" href="#">Take this action</a> <a class="btn" href="#">Or do this</a>
|
<a class="btn btn-danger" href="#">Take this action</a> <a class="btn" href="#">Or do this</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<hr class="bs-docs-separator">
|
<hr class="bs-docs-separator">
|
||||||
|
|
||||||
|
|
||||||
<h2>Usage</h2>
|
<h2>Usage</h2>
|
||||||
<p>Enable dismissal of an alert via javascript:</p>
|
<p>Enable dismissal of an alert via javascript:</p>
|
||||||
<pre class="prettyprint linenums">$(".alert").alert()</pre>
|
<pre class="prettyprint linenums">$(".alert").alert()</pre>
|
||||||
|
|
||||||
<h3>Markup</h3>
|
<h3>Markup</h3>
|
||||||
<p>Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality.</p>
|
<p>Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality.</p>
|
||||||
<pre class="prettyprint linenums"><a class="close" data-dismiss="alert" href="#">&times;</a></pre>
|
<pre class="prettyprint linenums"><a class="close" data-dismiss="alert" href="#">&times;</a></pre>
|
||||||
|
|
||||||
<h3>Methods</h3>
|
<h3>Methods</h3>
|
||||||
<h4>$().alert()</h4>
|
<h4>$().alert()</h4>
|
||||||
<p>Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the <code>.fade</code> and <code>.in</code> class already applied to them.</p>
|
<p>Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the <code>.fade</code> and <code>.in</code> class already applied to them.</p>
|
||||||
<h4>.alert('close')</h4>
|
<h4>.alert('close')</h4>
|
||||||
<p>Closes an alert.</p>
|
<p>Closes an alert.</p>
|
||||||
<pre class="prettyprint linenums">$(".alert").alert('close')</pre>
|
<pre class="prettyprint linenums">$(".alert").alert('close')</pre>
|
||||||
|
|
||||||
|
|
||||||
<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">
|
<table class="table table-bordered table-striped">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th style="width: 150px;">Event</th>
|
<th style="width: 150px;">Event</th>
|
||||||
<th>Description</th>
|
<th>Description</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>close</td>
|
<td>close</td>
|
||||||
<td>This event fires immediately when the <code>close</code> instance method is called.</td>
|
<td>This event fires immediately when the <code>close</code> instance method is called.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>closed</td>
|
<td>closed</td>
|
||||||
<td>This event is fired when the alert has been closed (will wait for css transitions to complete).</td>
|
<td>This event is fired when the alert has been closed (will wait for css transitions to complete).</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
$('#my-alert').bind('closed', function () {
|
$('#my-alert').bind('closed', function () {
|
||||||
// do something…
|
// do something…
|
||||||
})
|
})
|
||||||
</pre>
|
</pre>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
485
docs/templates/pages/javascript.mustache
vendored
485
docs/templates/pages/javascript.mustache
vendored
@ -824,351 +824,214 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h2>{{_i}}Examples{{/i}}</h2>
|
<div class="popover right">
|
||||||
<p>{{_i}}Add small overlays of content, like those on the iPad, to any element for housing secondary information. Hover over the button to trigger the popover. <strong>Requires <a href="#tooltips">Tooltip</a> to be included.</strong>{{/i}}</p>
|
<div class="arrow"></div>
|
||||||
|
<h3 class="popover-title">Popover right</h3>
|
||||||
<h3>{{_i}}Static popover{{/i}}</h3>
|
<div class="popover-content">
|
||||||
<p>{{_i}}Four options are available: top, right, bottom, and left aligned.{{/i}}</p>
|
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
|
||||||
<div class="bs-docs-example bs-docs-example-popover">
|
|
||||||
<div class="popover top">
|
|
||||||
<div class="arrow"></div>
|
|
||||||
<h3 class="popover-title">Popover top</h3>
|
|
||||||
<div class="popover-content">
|
|
||||||
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="popover right">
|
|
||||||
<div class="arrow"></div>
|
|
||||||
<h3 class="popover-title">Popover right</h3>
|
|
||||||
<div class="popover-content">
|
|
||||||
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="popover bottom">
|
|
||||||
<div class="arrow"></div>
|
|
||||||
<h3 class="popover-title">Popover bottom</h3>
|
|
||||||
<div class="popover-content">
|
|
||||||
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="popover left">
|
|
||||||
<div class="arrow"></div>
|
|
||||||
<h3 class="popover-title">Popover left</h3>
|
|
||||||
<div class="popover-content">
|
|
||||||
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="clearfix"></div>
|
|
||||||
</div>
|
|
||||||
<p>{{_i}}No markup shown as popovers are generated from javascript and content within a <code>data</code> attribute.{{/i}}</p>
|
|
||||||
|
|
||||||
<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?">{{_i}}Hover for popover{{/i}}</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="popover bottom">
|
||||||
<hr class="bs-docs-separator">
|
<div class="arrow"></div>
|
||||||
|
<h3 class="popover-title">Popover bottom</h3>
|
||||||
|
<div class="popover-content">
|
||||||
<h2>{{_i}}Usage{{/i}}</h2>
|
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
|
||||||
<p>{{_i}}Enable popovers via javascript:{{/i}}</p>
|
</div>
|
||||||
<pre class="prettyprint linenums">$('#example').popover({{_i}}options{{/i}})</pre>
|
|
||||||
|
|
||||||
<h3>{{_i}}Options{{/i}}</h3>
|
|
||||||
<p>{{_i}}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>.{{/i}}</p>
|
|
||||||
<table class="table table-bordered table-striped">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th style="width: 100px;">{{_i}}Name{{/i}}</th>
|
|
||||||
<th style="width: 100px;">{{_i}}type{{/i}}</th>
|
|
||||||
<th style="width: 50px;">{{_i}}default{{/i}}</th>
|
|
||||||
<th>{{_i}}description{{/i}}</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>{{_i}}animation{{/i}}</td>
|
|
||||||
<td>{{_i}}boolean{{/i}}</td>
|
|
||||||
<td>true</td>
|
|
||||||
<td>{{_i}}apply a css fade transition to the tooltip{{/i}}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>{{_i}}html{{/i}}</td>
|
|
||||||
<td>{{_i}}boolean{{/i}}</td>
|
|
||||||
<td>true</td>
|
|
||||||
<td>{{_i}}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.{{/i}}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>{{_i}}placement{{/i}}</td>
|
|
||||||
<td>{{_i}}string|function{{/i}}</td>
|
|
||||||
<td>'right'</td>
|
|
||||||
<td>{{_i}}how to position the popover{{/i}} - top | bottom | left | right</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>{{_i}}selector{{/i}}</td>
|
|
||||||
<td>{{_i}}string{{/i}}</td>
|
|
||||||
<td>false</td>
|
|
||||||
<td>{{_i}}if a selector is provided, tooltip objects will be delegated to the specified targets{{/i}}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>{{_i}}trigger{{/i}}</td>
|
|
||||||
<td>{{_i}}string{{/i}}</td>
|
|
||||||
<td>'hover'</td>
|
|
||||||
<td>{{_i}}how popover is triggered{{/i}} - hover | focus | manual</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>{{_i}}title{{/i}}</td>
|
|
||||||
<td>{{_i}}string | function{{/i}}</td>
|
|
||||||
<td>''</td>
|
|
||||||
<td>{{_i}}default title value if `title` attribute isn't present{{/i}}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>{{_i}}content{{/i}}</td>
|
|
||||||
<td>{{_i}}string | function{{/i}}</td>
|
|
||||||
<td>''</td>
|
|
||||||
<td>{{_i}}default content value if `data-content` attribute isn't present{{/i}}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>{{_i}}delay{{/i}}</td>
|
|
||||||
<td>{{_i}}number | object{{/i}}</td>
|
|
||||||
<td>0</td>
|
|
||||||
<td>
|
|
||||||
<p>{{_i}}delay showing and hiding the popover (ms) - does not apply to manual trigger type{{/i}}</p>
|
|
||||||
<p>{{_i}}If a number is supplied, delay is applied to both hide/show{{/i}}</p>
|
|
||||||
<p>{{_i}}Object structure is: <code>delay: { show: 500, hide: 100 }</code>{{/i}}</p>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
<div class="alert alert-info">
|
|
||||||
<strong>{{_i}}Heads up!{{/i}}</strong>
|
|
||||||
{{_i}}Options for individual popovers can alternatively be specified through the use of data attributes.{{/i}}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>{{_i}}Markup{{/i}}</h3>
|
<div class="popover left">
|
||||||
<p>{{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}}</p>
|
<div class="arrow"></div>
|
||||||
|
<h3 class="popover-title">Popover left</h3>
|
||||||
<h3>{{_i}}Methods{{/i}}</h3>
|
<div class="popover-content">
|
||||||
<h4>$().popover({{_i}}options{{/i}})</h4>
|
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
|
||||||
<p>{{_i}}Initializes popovers for an element collection.{{/i}}</p>
|
</div>
|
||||||
<h4>.popover('show')</h4>
|
|
||||||
<p>{{_i}}Reveals an elements popover.{{/i}}</p>
|
|
||||||
<pre class="prettyprint linenums">$('#element').popover('show')</pre>
|
|
||||||
<h4>.popover('hide')</h4>
|
|
||||||
<p>{{_i}}Hides an elements popover.{{/i}}</p>
|
|
||||||
<pre class="prettyprint linenums">$('#element').popover('hide')</pre>
|
|
||||||
<h4>.popover('toggle')</h4>
|
|
||||||
<p>{{_i}}Toggles an elements popover.{{/i}}</p>
|
|
||||||
<pre class="prettyprint linenums">$('#element').popover('toggle')</pre>
|
|
||||||
<h4>.popover('destroy')</h4>
|
|
||||||
<p>{{_i}}Hides and destroys an element's popover.{{/i}}</p>
|
|
||||||
<pre class="prettyprint linenums">$('#element').popover('destroy')</pre>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Alert
|
|
||||||
================================================== -->
|
|
||||||
<section id="alerts">
|
|
||||||
<div class="page-header">
|
|
||||||
<h1>{{_i}}Alert messages{{/i}} <small>bootstrap-alert.js</small></h1>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="clearfix"></div>
|
||||||
|
</div>
|
||||||
|
<p>{{_i}}No markup shown as popovers are generated from javascript and content within a <code>data</code> attribute.{{/i}}</p>
|
||||||
|
|
||||||
<h2>{{_i}}Example alerts{{/i}}</h2>
|
<h3>Live demo</h3>
|
||||||
<p>{{_i}}Add dismiss functionality to all alerge messages with this plugin.{{/i}}</p>
|
<div class="bs-docs-example" style="padding-bottom: 24px;">
|
||||||
<div class="bs-docs-example">
|
<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?">{{_i}}Hover for popover{{/i}}</a>
|
||||||
<div class="alert fade in">
|
</div>
|
||||||
<button type="button" class="close" data-dismiss="alert">×</button>
|
|
||||||
<strong>{{_i}}Holy guacamole!{{/i}}</strong> {{_i}}Best check yo self, you're not looking too good.{{/i}}
|
|
||||||
</div>
|
|
||||||
<p>{{_i}}No markup shown as popovers are generated from javascript and content within a <code>data</code> attribute.{{/i}}</p>
|
|
||||||
|
|
||||||
<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?">{{_i}}Hover for popover{{/i}}</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<hr class="bs-docs-separator">
|
<hr class="bs-docs-separator">
|
||||||
|
|
||||||
|
|
||||||
<h2>{{_i}}Usage{{/i}}</h2>
|
<h2>{{_i}}Usage{{/i}}</h2>
|
||||||
<p>{{_i}}Enable popovers via javascript:{{/i}}</p>
|
<p>{{_i}}Enable popovers via javascript:{{/i}}</p>
|
||||||
<pre class="prettyprint linenums">$('#example').popover({{_i}}options{{/i}})</pre>
|
<pre class="prettyprint linenums">$('#example').popover({{_i}}options{{/i}})</pre>
|
||||||
|
|
||||||
<h3>{{_i}}Options{{/i}}</h3>
|
<h3>{{_i}}Options{{/i}}</h3>
|
||||||
<p>{{_i}}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>.{{/i}}</p>
|
<p>{{_i}}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>.{{/i}}</p>
|
||||||
<table class="table table-bordered table-striped">
|
<table class="table table-bordered table-striped">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th style="width: 100px;">{{_i}}Name{{/i}}</th>
|
<th style="width: 100px;">{{_i}}Name{{/i}}</th>
|
||||||
<th style="width: 100px;">{{_i}}type{{/i}}</th>
|
<th style="width: 100px;">{{_i}}type{{/i}}</th>
|
||||||
<th style="width: 50px;">{{_i}}default{{/i}}</th>
|
<th style="width: 50px;">{{_i}}default{{/i}}</th>
|
||||||
<th>{{_i}}description{{/i}}</th>
|
<th>{{_i}}description{{/i}}</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>{{_i}}animation{{/i}}</td>
|
<td>{{_i}}animation{{/i}}</td>
|
||||||
<td>{{_i}}boolean{{/i}}</td>
|
<td>{{_i}}boolean{{/i}}</td>
|
||||||
<td>true</td>
|
<td>true</td>
|
||||||
<td>{{_i}}apply a css fade transition to the tooltip{{/i}}</td>
|
<td>{{_i}}apply a css fade transition to the tooltip{{/i}}</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>{{_i}}html{{/i}}</td>
|
<td>{{_i}}html{{/i}}</td>
|
||||||
<td>{{_i}}boolean{{/i}}</td>
|
<td>{{_i}}boolean{{/i}}</td>
|
||||||
<td>true</td>
|
<td>true</td>
|
||||||
<td>{{_i}}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.{{/i}}</td>
|
<td>{{_i}}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.{{/i}}</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>{{_i}}placement{{/i}}</td>
|
<td>{{_i}}placement{{/i}}</td>
|
||||||
<td>{{_i}}string|function{{/i}}</td>
|
<td>{{_i}}string|function{{/i}}</td>
|
||||||
<td>'right'</td>
|
<td>'right'</td>
|
||||||
<td>{{_i}}how to position the popover{{/i}} - top | bottom | left | right</td>
|
<td>{{_i}}how to position the popover{{/i}} - top | bottom | left | right</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>{{_i}}selector{{/i}}</td>
|
<td>{{_i}}selector{{/i}}</td>
|
||||||
<td>{{_i}}string{{/i}}</td>
|
<td>{{_i}}string{{/i}}</td>
|
||||||
<td>false</td>
|
<td>false</td>
|
||||||
<td>{{_i}}if a selector is provided, tooltip objects will be delegated to the specified targets{{/i}}</td>
|
<td>{{_i}}if a selector is provided, tooltip objects will be delegated to the specified targets{{/i}}</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>{{_i}}trigger{{/i}}</td>
|
<td>{{_i}}trigger{{/i}}</td>
|
||||||
<td>{{_i}}string{{/i}}</td>
|
<td>{{_i}}string{{/i}}</td>
|
||||||
<td>'hover'</td>
|
<td>'hover'</td>
|
||||||
<td>{{_i}}how popover is triggered{{/i}} - hover | focus | manual</td>
|
<td>{{_i}}how popover is triggered{{/i}} - hover | focus | manual</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>{{_i}}title{{/i}}</td>
|
<td>{{_i}}title{{/i}}</td>
|
||||||
<td>{{_i}}string | function{{/i}}</td>
|
<td>{{_i}}string | function{{/i}}</td>
|
||||||
<td>''</td>
|
<td>''</td>
|
||||||
<td>{{_i}}default title value if `title` attribute isn't present{{/i}}</td>
|
<td>{{_i}}default title value if `title` attribute isn't present{{/i}}</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>{{_i}}content{{/i}}</td>
|
<td>{{_i}}content{{/i}}</td>
|
||||||
<td>{{_i}}string | function{{/i}}</td>
|
<td>{{_i}}string | function{{/i}}</td>
|
||||||
<td>''</td>
|
<td>''</td>
|
||||||
<td>{{_i}}default content value if `data-content` attribute isn't present{{/i}}</td>
|
<td>{{_i}}default content value if `data-content` attribute isn't present{{/i}}</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>{{_i}}delay{{/i}}</td>
|
<td>{{_i}}delay{{/i}}</td>
|
||||||
<td>{{_i}}number | object{{/i}}</td>
|
<td>{{_i}}number | object{{/i}}</td>
|
||||||
<td>0</td>
|
<td>0</td>
|
||||||
<td>
|
<td>
|
||||||
<p>{{_i}}delay showing and hiding the popover (ms) - does not apply to manual trigger type{{/i}}</p>
|
<p>{{_i}}delay showing and hiding the popover (ms) - does not apply to manual trigger type{{/i}}</p>
|
||||||
<p>{{_i}}If a number is supplied, delay is applied to both hide/show{{/i}}</p>
|
<p>{{_i}}If a number is supplied, delay is applied to both hide/show{{/i}}</p>
|
||||||
<p>{{_i}}Object structure is: <code>delay: { show: 500, hide: 100 }</code>{{/i}}</p>
|
<p>{{_i}}Object structure is: <code>delay: { show: 500, hide: 100 }</code>{{/i}}</p>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
<div class="alert alert-info">
|
<div class="alert alert-info">
|
||||||
<strong>{{_i}}Heads up!{{/i}}</strong>
|
<strong>{{_i}}Heads up!{{/i}}</strong>
|
||||||
{{_i}}Options for individual popovers can alternatively be specified through the use of data attributes.{{/i}}
|
{{_i}}Options for individual popovers can alternatively be specified through the use of data attributes.{{/i}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>{{_i}}Markup{{/i}}</h3>
|
<h3>{{_i}}Markup{{/i}}</h3>
|
||||||
<p>{{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}}</p>
|
<p>{{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}}</p>
|
||||||
|
|
||||||
<h3>{{_i}}Methods{{/i}}</h3>
|
<h3>{{_i}}Methods{{/i}}</h3>
|
||||||
<h4>$().popover({{_i}}options{{/i}})</h4>
|
<h4>$().popover({{_i}}options{{/i}})</h4>
|
||||||
<p>{{_i}}Initializes popovers for an element collection.{{/i}}</p>
|
<p>{{_i}}Initializes popovers for an element collection.{{/i}}</p>
|
||||||
<h4>.popover('show')</h4>
|
<h4>.popover('show')</h4>
|
||||||
<p>{{_i}}Reveals an elements popover.{{/i}}</p>
|
<p>{{_i}}Reveals an elements popover.{{/i}}</p>
|
||||||
<pre class="prettyprint linenums">$('#element').popover('show')</pre>
|
<pre class="prettyprint linenums">$('#element').popover('show')</pre>
|
||||||
<h4>.popover('hide')</h4>
|
<h4>.popover('hide')</h4>
|
||||||
<p>{{_i}}Hides an elements popover.{{/i}}</p>
|
<p>{{_i}}Hides an elements popover.{{/i}}</p>
|
||||||
<pre class="prettyprint linenums">$('#element').popover('hide')</pre>
|
<pre class="prettyprint linenums">$('#element').popover('hide')</pre>
|
||||||
<h4>.popover('toggle')</h4>
|
<h4>.popover('toggle')</h4>
|
||||||
<p>{{_i}}Toggles an elements popover.{{/i}}</p>
|
<p>{{_i}}Toggles an elements popover.{{/i}}</p>
|
||||||
<pre class="prettyprint linenums">$('#element').popover('toggle')</pre>
|
<pre class="prettyprint linenums">$('#element').popover('toggle')</pre>
|
||||||
<h4>.popover('destroy')</h4>
|
<h4>.popover('destroy')</h4>
|
||||||
<p>{{_i}}Destroys an element's popover.{{/i}}</p>
|
<p>{{_i}}Hides and destroys an element's popover.{{/i}}</p>
|
||||||
<pre class="prettyprint linenums">$('#element').popover('destroy')</pre>
|
<pre class="prettyprint linenums">$('#element').popover('destroy')</pre>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Alert
|
<!-- Alert
|
||||||
================================================== -->
|
================================================== -->
|
||||||
<section id="alerts">
|
<section id="alerts">
|
||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<h1>{{_i}}Alert messages{{/i}} <small>bootstrap-alert.js</small></h1>
|
<h1>{{_i}}Alert messages{{/i}} <small>bootstrap-alert.js</small></h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<h2>{{_i}}Example alerts{{/i}}</h2>
|
<h2>{{_i}}Example alerts{{/i}}</h2>
|
||||||
<p>{{_i}}Add dismiss functionality to all alerge messages with this plugin.{{/i}}</p>
|
<p>{{_i}}Add dismiss functionality to all alerge messages with this plugin.{{/i}}</p>
|
||||||
<div class="bs-docs-example">
|
<div class="bs-docs-example">
|
||||||
<div class="alert fade in">
|
<div class="alert fade in">
|
||||||
<button type="button" class="close" data-dismiss="alert">×</button>
|
<button type="button" class="close" data-dismiss="alert">×</button>
|
||||||
<strong>{{_i}}Holy guacamole!{{/i}}</strong> {{_i}}Best check yo self, you're not looking too good.{{/i}}
|
<strong>{{_i}}Holy guacamole!{{/i}}</strong> {{_i}}Best check yo self, you're not looking too good.{{/i}}
|
||||||
</div>
|
</div>
|
||||||
</div>{{! /example }}
|
</div>{{! /example }}
|
||||||
|
|
||||||
<div class="bs-docs-example">
|
<div class="bs-docs-example">
|
||||||
<div class="alert alert-block alert-error fade in">
|
<div class="alert alert-block alert-error fade in">
|
||||||
<button type="button" class="close" data-dismiss="alert">×</button>
|
<button type="button" class="close" data-dismiss="alert">×</button>
|
||||||
<h4 class="alert-heading">{{_i}}Oh snap! You got an error!{{/i}}</h4>
|
<h4 class="alert-heading">{{_i}}Oh snap! You got an error!{{/i}}</h4>
|
||||||
<p>{{_i}}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.{{/i}}</p>
|
<p>{{_i}}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.{{/i}}</p>
|
||||||
<p>
|
<p>
|
||||||
<a class="btn btn-danger" href="#">{{_i}}Take this action{{/i}}</a> <a class="btn" href="#">{{_i}}Or do this{{/i}}</a>
|
<a class="btn btn-danger" href="#">{{_i}}Take this action{{/i}}</a> <a class="btn" href="#">{{_i}}Or do this{{/i}}</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>{{! /example }}
|
</div>{{! /example }}
|
||||||
|
|
||||||
|
|
||||||
<hr class="bs-docs-separator">
|
<hr class="bs-docs-separator">
|
||||||
|
|
||||||
|
|
||||||
<h2>{{_i}}Usage{{/i}}</h2>
|
<h2>{{_i}}Usage{{/i}}</h2>
|
||||||
<p>{{_i}}Enable dismissal of an alert via javascript:{{/i}}</p>
|
<p>{{_i}}Enable dismissal of an alert via javascript:{{/i}}</p>
|
||||||
<pre class="prettyprint linenums">$(".alert").alert()</pre>
|
<pre class="prettyprint linenums">$(".alert").alert()</pre>
|
||||||
|
|
||||||
<h3>{{_i}}Markup{{/i}}</h3>
|
<h3>{{_i}}Markup{{/i}}</h3>
|
||||||
<p>{{_i}}Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality.{{/i}}</p>
|
<p>{{_i}}Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality.{{/i}}</p>
|
||||||
<pre class="prettyprint linenums"><a class="close" data-dismiss="alert" href="#">&times;</a></pre>
|
<pre class="prettyprint linenums"><a class="close" data-dismiss="alert" href="#">&times;</a></pre>
|
||||||
|
|
||||||
<h3>{{_i}}Methods{{/i}}</h3>
|
<h3>{{_i}}Methods{{/i}}</h3>
|
||||||
<h4>$().alert()</h4>
|
<h4>$().alert()</h4>
|
||||||
<p>{{_i}}Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the <code>.fade</code> and <code>.in</code> class already applied to them.{{/i}}</p>
|
<p>{{_i}}Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the <code>.fade</code> and <code>.in</code> class already applied to them.{{/i}}</p>
|
||||||
<h4>.alert('close')</h4>
|
<h4>.alert('close')</h4>
|
||||||
<p>{{_i}}Closes an alert.{{/i}}</p>
|
<p>{{_i}}Closes an alert.{{/i}}</p>
|
||||||
<pre class="prettyprint linenums">$(".alert").alert('close')</pre>
|
<pre class="prettyprint linenums">$(".alert").alert('close')</pre>
|
||||||
|
|
||||||
|
|
||||||
<h3>{{_i}}Events{{/i}}</h3>
|
<h3>{{_i}}Events{{/i}}</h3>
|
||||||
<p>{{_i}}Bootstrap's alert class exposes a few events for hooking into alert functionality.{{/i}}</p>
|
<p>{{_i}}Bootstrap's alert class exposes a few events for hooking into alert functionality.{{/i}}</p>
|
||||||
<table class="table table-bordered table-striped">
|
<table class="table table-bordered table-striped">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th style="width: 150px;">{{_i}}Event{{/i}}</th>
|
<th style="width: 150px;">{{_i}}Event{{/i}}</th>
|
||||||
<th>{{_i}}Description{{/i}}</th>
|
<th>{{_i}}Description{{/i}}</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>{{_i}}close{{/i}}</td>
|
<td>{{_i}}close{{/i}}</td>
|
||||||
<td>{{_i}}This event fires immediately when the <code>close</code> instance method is called.{{/i}}</td>
|
<td>{{_i}}This event fires immediately when the <code>close</code> instance method is called.{{/i}}</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>{{_i}}closed{{/i}}</td>
|
<td>{{_i}}closed{{/i}}</td>
|
||||||
<td>{{_i}}This event is fired when the alert has been closed (will wait for css transitions to complete).{{/i}}</td>
|
<td>{{_i}}This event is fired when the alert has been closed (will wait for css transitions to complete).{{/i}}</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
$('#my-alert').bind('closed', function () {
|
$('#my-alert').bind('closed', function () {
|
||||||
// {{_i}}do something…{{/i}}
|
// {{_i}}do something…{{/i}}
|
||||||
})
|
})
|
||||||
</pre>
|
</pre>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user