Skip to content
GitLab
Commit 79067721 authored by Mark Otto's avatar Mark Otto
Browse files

fix js docs formatting

parent 4bb2a137
Hide whitespace changes
Inline Side-by-side
Showing
with 375 additions and 649 deletions
+375 -649
docs/javascript.html
+ 186
- 323
View file @ 79067721
...@@ -894,351 +894,214 @@ $('a[data-toggle="tab"]').on('shown', function (e) { ...@@ -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 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>
</div>
<div class="popover left"> <div class="popover bottom">
<div class="arrow"></div> <div class="arrow"></div>
<h3 class="popover-title">Popover left</h3> <h3 class="popover-title">Popover bottom</h3>
<div class="popover-content"> <div class="popover-content">
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
</div> </div>
<div class="clearfix"></div>
</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="popover left">
<div class="bs-docs-example" style="padding-bottom: 24px;"> <div class="arrow"></div>
<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> <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>
<div class="clearfix"></div>
</div>
<p>No markup shown as popovers are generated from javascript and content within a <code>data</code> attribute.</p>
<hr class="bs-docs-separator"> <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>
<h2>Usage</h2> </div>
<p>Enable popovers via javascript:</p>
<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>
<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>
<h3>Methods</h3> <hr class="bs-docs-separator">
<h4>$().popover(options)</h4>
<p>Initializes popovers for an element collection.</p>
<h4>.popover('show')</h4> <h2>Usage</h2>
<p>Reveals an elements popover.</p> <p>Enable popovers via javascript:</p>
<pre class="prettyprint linenums">$('#element').popover('show')</pre> <pre class="prettyprint linenums">$('#example').popover(options)</pre>
<h4>.popover('hide')</h4>
<p>Hides an elements popover.</p> <h3>Options</h3>
<pre class="prettyprint linenums">$('#element').popover('hide')</pre> <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>
<h4>.popover('toggle')</h4> <table class="table table-bordered table-striped">
<p>Toggles an elements popover.</p> <thead>
<pre class="prettyprint linenums">$('#element').popover('toggle')</pre> <tr>
<h4>.popover('destroy')</h4> <th style="width: 100px;">Name</th>
<p>Hides and destroys an element's popover.</p> <th style="width: 100px;">type</th>
<pre class="prettyprint linenums">$('#element').popover('destroy')</pre> <th style="width: 50px;">default</th>
</section> <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>
<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>
<h3>Methods</h3>
<h4>$().popover(options)</h4>
<p>Initializes popovers for an element collection.</p>
<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>
<!-- Alert <h2>Example alerts</h2>
================================================== --> <p>Add dismiss functionality to all alerge messages with this plugin.</p>
<section id="alerts"> <div class="bs-docs-example">
<div class="page-header"> <div class="alert fade in">
<h1>Alert messages <small>bootstrap-alert.js</small></h1> <button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
</div> </div>
</div>
<div class="bs-docs-example">
<h2>Example alerts</h2> <div class="alert alert-block alert-error fade in">
<p>Add dismiss functionality to all alerge messages with this plugin.</p> <button type="button" class="close" data-dismiss="alert">&times;</button>
<div class="bs-docs-example"> <h4 class="alert-heading">Oh snap! You got an error!</h4>
<div class="alert fade in"> <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>
<button type="button" class="close" data-dismiss="alert">&times;</button> <p>
<strong>Holy guacamole!</strong> Best check yo self, you're not looking too good. <a class="btn btn-danger" href="#">Take this action</a> <a class="btn" href="#">Or do this</a>
</div> </p>
<p>No markup shown as popovers are generated from javascript and content within a <code>data</code> attribute.</p> </div>
</div>
<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">
<h2>Usage</h2>
<p>Enable popovers via javascript:</p>
<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>
<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>
<h3>Methods</h3>
<h4>$().popover(options)</h4>
<p>Initializes popovers for an element collection.</p>
<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>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>
<h2>Example alerts</h2>
<p>Add dismiss functionality to all alerge messages with this plugin.</p>
<div class="bs-docs-example">
<div class="alert fade in">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
</div>
</div>
<div class="bs-docs-example">
<div class="alert alert-block alert-error fade in">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<h4 class="alert-heading">Oh snap! You got an error!</h4>
<p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
<p>
<a class="btn btn-danger" href="#">Take this action</a> <a class="btn" href="#">Or do this</a>
</p>
</div>
</div>
<hr class="bs-docs-separator">
<h2>Usage</h2>
<p>Enable dismissal of an alert via javascript:</p>
<pre class="prettyprint linenums">$(".alert").alert()</pre>
<h3>Markup</h3>
<p>Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality.</p>
<pre class="prettyprint linenums">&lt;a class="close" data-dismiss="alert" href="#"&gt;&amp;times;&lt;/a&gt;</pre>
<h3>Methods</h3>
<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>
<h4>.alert('close')</h4>
<p>Closes an alert.</p>
<pre class="prettyprint linenums">$(".alert").alert('close')</pre>
<h3>Events</h3> <hr class="bs-docs-separator">
<p>Bootstrap's alert class exposes a few events for hooking into alert functionality.</p>
<table class="table table-bordered table-striped">
<thead> <h2>Usage</h2>
<tr> <p>Enable dismissal of an alert via javascript:</p>
<th style="width: 150px;">Event</th> <pre class="prettyprint linenums">$(".alert").alert()</pre>
<th>Description</th>
</tr> <h3>Markup</h3>
</thead> <p>Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality.</p>
<tbody> <pre class="prettyprint linenums">&lt;a class="close" data-dismiss="alert" href="#"&gt;&amp;times;&lt;/a&gt;</pre>
<tr>
<td>close</td> <h3>Methods</h3>
<td>This event fires immediately when the <code>close</code> instance method is called.</td> <h4>$().alert()</h4>
</tr> <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>
<tr> <h4>.alert('close')</h4>
<td>closed</td> <p>Closes an alert.</p>
<td>This event is fired when the alert has been closed (will wait for css transitions to complete).</td> <pre class="prettyprint linenums">$(".alert").alert('close')</pre>
</tr>
</tbody>
</table> <h3>Events</h3>
<p>Bootstrap's alert class exposes a few events for hooking into alert functionality.</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 150px;">Event</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>close</td>
<td>This event fires immediately when the <code>close</code> instance method is called.</td>
</tr>
<tr>
<td>closed</td>
<td>This event is fired when the alert has been closed (will wait for css transitions to complete).</td>
</tr>
</tbody>
</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>
......
docs/templates/pages/javascript.mustache
+ 189
- 326
View file @ 79067721
...@@ -824,351 +824,214 @@ $('a[data-toggle="tab"]').on('shown', function (e) { ...@@ -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 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>
</div>
<div class="popover left"> <div class="popover bottom">
<div class="arrow"></div> <div class="arrow"></div>
<h3 class="popover-title">Popover left</h3> <h3 class="popover-title">Popover bottom</h3>
<div class="popover-content"> <div class="popover-content">
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
</div> </div>
<div class="clearfix"></div>
</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="popover left">
<div class="bs-docs-example" style="padding-bottom: 24px;"> <div class="arrow"></div>
<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> <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>
<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>
<hr class="bs-docs-separator"> <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>
<h2>{{_i}}Usage{{/i}}</h2> </div>
<p>{{_i}}Enable popovers via javascript:{{/i}}</p>
<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>
<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>
<h3>{{_i}}Methods{{/i}}</h3> <hr class="bs-docs-separator">
<h4>$().popover({{_i}}options{{/i}})</h4>
<p>{{_i}}Initializes popovers for an element collection.{{/i}}</p>
<h4>.popover('show')</h4> <h2>{{_i}}Usage{{/i}}</h2>
<p>{{_i}}Reveals an elements popover.{{/i}}</p> <p>{{_i}}Enable popovers via javascript:{{/i}}</p>
<pre class="prettyprint linenums">$('#element').popover('show')</pre> <pre class="prettyprint linenums">$('#example').popover({{_i}}options{{/i}})</pre>
<h4>.popover('hide')</h4>
<p>{{_i}}Hides an elements popover.{{/i}}</p> <h3>{{_i}}Options{{/i}}</h3>
<pre class="prettyprint linenums">$('#element').popover('hide')</pre> <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>
<h4>.popover('toggle')</h4> <table class="table table-bordered table-striped">
<p>{{_i}}Toggles an elements popover.{{/i}}</p> <thead>
<pre class="prettyprint linenums">$('#element').popover('toggle')</pre> <tr>
<h4>.popover('destroy')</h4> <th style="width: 100px;">{{_i}}Name{{/i}}</th>
<p>{{_i}}Hides and destroys an element's popover.{{/i}}</p> <th style="width: 100px;">{{_i}}type{{/i}}</th>
<pre class="prettyprint linenums">$('#element').popover('destroy')</pre> <th style="width: 50px;">{{_i}}default{{/i}}</th>
</section> <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>
<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>
<h3>{{_i}}Methods{{/i}}</h3>
<h4>$().popover({{_i}}options{{/i}})</h4>
<p>{{_i}}Initializes popovers for an element collection.{{/i}}</p>
<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>
<!-- Alert <h2>{{_i}}Example alerts{{/i}}</h2>
================================================== --> <p>{{_i}}Add dismiss functionality to all alerge messages with this plugin.{{/i}}</p>
<section id="alerts"> <div class="bs-docs-example">
<div class="page-header"> <div class="alert fade in">
<h1>{{_i}}Alert messages{{/i}} <small>bootstrap-alert.js</small></h1> <button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>{{_i}}Holy guacamole!{{/i}}</strong> {{_i}}Best check yo self, you're not looking too good.{{/i}}
</div> </div>
</div>{{! /example }}
<h2>{{_i}}Example alerts{{/i}}</h2> <div class="bs-docs-example">
<p>{{_i}}Add dismiss functionality to all alerge messages with this plugin.{{/i}}</p> <div class="alert alert-block alert-error fade in">
<div class="bs-docs-example"> <button type="button" class="close" data-dismiss="alert">&times;</button>
<div class="alert fade in"> <h4 class="alert-heading">{{_i}}Oh snap! You got an error!{{/i}}</h4>
<button type="button" class="close" data-dismiss="alert">&times;</button> <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>
<strong>{{_i}}Holy guacamole!{{/i}}</strong> {{_i}}Best check yo self, you're not looking too good.{{/i}} <p>
</div> <a class="btn btn-danger" href="#">{{_i}}Take this action{{/i}}</a> <a class="btn" href="#">{{_i}}Or do this{{/i}}</a>
<p>{{_i}}No markup shown as popovers are generated from javascript and content within a <code>data</code> attribute.{{/i}}</p> </p>
</div>
<h3>Live demo</h3> </div>{{! /example }}
<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>
<p>{{_i}}Enable dismissal of an alert via javascript:{{/i}}</p>
<pre class="prettyprint linenums">$(".alert").alert()</pre>
<h2>{{_i}}Usage{{/i}}</h2>
<p>{{_i}}Enable popovers via javascript:{{/i}}</p> <h3>{{_i}}Markup{{/i}}</h3>
<pre class="prettyprint linenums">$('#example').popover({{_i}}options{{/i}})</pre> <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">&lt;a class="close" data-dismiss="alert" href="#"&gt;&amp;times;&lt;/a&gt;</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> <h3>{{_i}}Methods{{/i}}</h3>
<table class="table table-bordered table-striped"> <h4>$().alert()</h4>
<thead> <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>
<tr> <h4>.alert('close')</h4>
<th style="width: 100px;">{{_i}}Name{{/i}}</th> <p>{{_i}}Closes an alert.{{/i}}</p>
<th style="width: 100px;">{{_i}}type{{/i}}</th> <pre class="prettyprint linenums">$(".alert").alert('close')</pre>
<th style="width: 50px;">{{_i}}default{{/i}}</th>
<th>{{_i}}description{{/i}}</th>
</tr> <h3>{{_i}}Events{{/i}}</h3>
</thead> <p>{{_i}}Bootstrap's alert class exposes a few events for hooking into alert functionality.{{/i}}</p>
<tbody> <table class="table table-bordered table-striped">
<tr> <thead>
<td>{{_i}}animation{{/i}}</td> <tr>
<td>{{_i}}boolean{{/i}}</td> <th style="width: 150px;">{{_i}}Event{{/i}}</th>
<td>true</td> <th>{{_i}}Description{{/i}}</th>
<td>{{_i}}apply a css fade transition to the tooltip{{/i}}</td> </tr>
</tr> </thead>
<tr> <tbody>
<td>{{_i}}html{{/i}}</td> <tr>
<td>{{_i}}boolean{{/i}}</td> <td>{{_i}}close{{/i}}</td>
<td>true</td> <td>{{_i}}This event fires immediately when the <code>close</code> instance method is called.{{/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}}closed{{/i}}</td>
<td>{{_i}}placement{{/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}}string|function{{/i}}</td> </tr>
<td>'right'</td> </tbody>
<td>{{_i}}how to position the popover{{/i}} - top | bottom | left | right</td> </table>
</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>
<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>
<h3>{{_i}}Methods{{/i}}</h3>
<h4>$().popover({{_i}}options{{/i}})</h4>
<p>{{_i}}Initializes popovers for an element collection.{{/i}}</p>
<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}}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>
<h2>{{_i}}Example alerts{{/i}}</h2>
<p>{{_i}}Add dismiss functionality to all alerge messages with this plugin.{{/i}}</p>
<div class="bs-docs-example">
<div class="alert fade in">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>{{_i}}Holy guacamole!{{/i}}</strong> {{_i}}Best check yo self, you're not looking too good.{{/i}}
</div>
</div>{{! /example }}
<div class="bs-docs-example">
<div class="alert alert-block alert-error fade in">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<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>
<a class="btn btn-danger" href="#">{{_i}}Take this action{{/i}}</a> <a class="btn" href="#">{{_i}}Or do this{{/i}}</a>
</p>
</div>
</div>{{! /example }}
<hr class="bs-docs-separator">
<h2>{{_i}}Usage{{/i}}</h2>
<p>{{_i}}Enable dismissal of an alert via javascript:{{/i}}</p>
<pre class="prettyprint linenums">$(".alert").alert()</pre>
<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>
<pre class="prettyprint linenums">&lt;a class="close" data-dismiss="alert" href="#"&gt;&amp;times;&lt;/a&gt;</pre>
<h3>{{_i}}Methods{{/i}}</h3>
<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>
<h4>.alert('close')</h4>
<p>{{_i}}Closes an alert.{{/i}}</p>
<pre class="prettyprint linenums">$(".alert").alert('close')</pre>
<h3>{{_i}}Events{{/i}}</h3>
<p>{{_i}}Bootstrap's alert class exposes a few events for hooking into alert functionality.{{/i}}</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 150px;">{{_i}}Event{{/i}}</th>
<th>{{_i}}Description{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{_i}}close{{/i}}</td>
<td>{{_i}}This event fires immediately when the <code>close</code> instance method is called.{{/i}}</td>
</tr>
<tr>
<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>
</tr>
</tbody>
</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>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment