mirror of
https://github.com/twbs/bootstrap.git
synced 2025-09-30 23:36:47 +02:00
add build tool for js + rename twipsy to tooltip + lots of little doc cleanup
This commit is contained in:
Jacob Thornton
@@ -54,7 +54,6 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
<!-- Using Javascript w/ Bootstrap
|
||||
================================================== -->
|
||||
<section id="javascript">
|
||||
@@ -63,61 +62,100 @@
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<h3><a href="./javascript.html#modals">Modals</a></h3>
|
||||
<p>A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.</p>
|
||||
<label>
|
||||
<h3><a href="./javascript.html#modals">Modals</a><input checked="true" value="bootstrap-modal.js" type="checkbox"></h3>
|
||||
<p>A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.</p>
|
||||
</label>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<h3><a href="./javascript.html#dropdowns">Dropdowns</a></h3>
|
||||
<p>Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.</p>
|
||||
<label>
|
||||
<h3><a href="./javascript.html#dropdowns">Dropdowns</a><input checked="true" value="bootstrap-dropdown.js" type="checkbox"></h3>
|
||||
<p>Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.</p>
|
||||
</label>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<h3><a href="./javascript.html#scrollspy">Scrollspy</a></h3>
|
||||
<p>Use scrollspy to automatically update the links in your navbar to show the current active link based on scroll position.</p>
|
||||
<label>
|
||||
<h3><a href="./javascript.html#scrollspy">Scrollspy</a><input checked="true" value="bootstrap-scrollspy.js" type="checkbox"></h3>
|
||||
<p>Use scrollspy to automatically update the links in your navbar to show the current active link based on scroll position.</p>
|
||||
</label>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<h3><a href="./javascript.html#tabs">Togglable tabs</a></h3>
|
||||
<p>Use this plugin to make tabs and pills more useful by allowing them to toggle through tabbable panes of local content.</p>
|
||||
<label>
|
||||
<h3><a href="./javascript.html#tabs">Togglable tabs</a><input checked="true" value="bootstrap-tab.js" type="checkbox"></h3>
|
||||
<p>Use this plugin to make tabs and pills more useful by allowing them to toggle through tabbable panes of local content.</p>
|
||||
</label>
|
||||
</div>
|
||||
</div> <!-- /row -->
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<h3><a href="./javascript.html#twipsy">Twipsy tooltips</a></h3>
|
||||
<p>A new take on the jQuery Tipsy plugin, Twipsy uses CSS3 animations, data attributes for titles, and the new event API in jQuery 1.7.</p>
|
||||
<label>
|
||||
<h3><a href="./javascript.html#tooltips">Tooltips</a><input checked="true" value="bootstrap-tooltip.js" type="checkbox"></h3>
|
||||
<p>A new take on the jQuery Tipsy plugin, Tooltips are an updated version, which don't rely on images, uss css3 for animations, and data-attributes for local title storage.</p>
|
||||
</label>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<h3><a href="./javascript.html#popovers">Popovers</a> <small class="muted">*</small></h3>
|
||||
<p>Add small overlays of content, like those on the iPad, to any element for housing secondary information.</p>
|
||||
<p class="muted"><strong>*</strong> Requires <a href="#twipsy">Twipsy</a> to be included</p>
|
||||
<label>
|
||||
<h3><a href="./javascript.html#popovers">Popovers</a> <small class="muted">*</small><input checked="true" value="bootstrap-popover.js" type="checkbox"></h3>
|
||||
<p>Add small overlays of content, like those on the iPad, to any element for housing secondary information.</p>
|
||||
<p class="muted"><strong>*</strong> Requires <a href="#tooltips">Tooltips</a> to be included</p>
|
||||
</label>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<h3><a href="./javascript.html#alerts">Alert messages</a></h3>
|
||||
<p>The alert plugin is a tiny class for adding close functionality to alerts.</p>
|
||||
<label>
|
||||
<h3><a href="./javascript.html#alerts">Alert messages</a><input checked="true" value="bootstrap-alert.js" type="checkbox"></h3>
|
||||
<p>The alert plugin is a tiny class for adding close functionality to alerts.</p>
|
||||
</label>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<h3><a href="./javascript.html#buttons">Buttons</a></h3>
|
||||
<p>Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p>
|
||||
<label>
|
||||
<h3><a href="./javascript.html#buttons">Buttons</a><input checked="true" value="bootstrap-button.js" type="checkbox"></h3>
|
||||
<p>Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p>
|
||||
</label>
|
||||
</div>
|
||||
</div> <!-- /row -->
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<h3><a href="./javascript.html#collapse">Collapse</a></h3>
|
||||
<p>Get base styles and flexible support for collapsible components like accordions and navigation.</p>
|
||||
<label>
|
||||
<h3><a href="./javascript.html#collapse">Collapse</a><input checked="true" value="bootstrap-collapse.js" type="checkbox"></h3>
|
||||
<p>Get base styles and flexible support for collapsible components like accordions and navigation.</p>
|
||||
</label>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<h3><a href="./javascript.html#carousel">Carousel</a></h3>
|
||||
<p>Create a merry-go-round of any content you wish to provide an interactive slideshow of content.</p>
|
||||
<label>
|
||||
<h3><a href="./javascript.html#carousel">Carousel</a><input checked="true" value="bootstrap-carousel.js" type="checkbox"></h3>
|
||||
<p>Create a merry-go-round of any content you wish to provide an interactive slideshow of content.</p>
|
||||
</label>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<h3><a href="./javascript.html#typeahead">Typeahead</a></h3>
|
||||
<p>A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.</p>
|
||||
<label>
|
||||
<h3><a href="./javascript.html#typeahead">Typeahead</a><input checked="true" value="bootstrap-typeahead.js" type="checkbox"></h3>
|
||||
<p>A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.</p>
|
||||
</label>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<h3><a href="./javascript.html#transitions">Transitions</a> <small class="muted">*</small></h3>
|
||||
<p>For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alert messages.</p>
|
||||
<p class="muted"><strong>*</strong> Required for animation in plugins</p>
|
||||
<label>
|
||||
<h3><a href="./javascript.html#transitions">Transitions</a> <small class="muted">*</small><input value="bootstrap-transition.js" checked="true" type="checkbox"></h3>
|
||||
<p>For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alert messages.</p>
|
||||
<p class="muted"><strong>*</strong> Required for animation in plugins</p>
|
||||
</label>
|
||||
</div>
|
||||
</div> <!-- /row -->
|
||||
<div class="row">
|
||||
<div class="span5">
|
||||
<div class="btn-group" id="javascriptBuilder">
|
||||
<a id="javascriptBuild" class="btn primary large" href="#">Download Source</a>
|
||||
<a class="btn primary large dropdown-toggle" data-toggle="dropdown" href="#">
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
<ul class="dropdown-menu large">
|
||||
<li class="active"><a href="#">Compressed</a></li>
|
||||
<li><a href="#">Uncompressed</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<a id="selectAll" href="#" style="float:right">Select/Unselect All Plugins</a>
|
||||
<p class="muted"><span class="label warning">Note:</span> All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.</p>
|
||||
</section>
|
||||
|
||||
@@ -169,8 +207,8 @@
|
||||
<h4>Popover in a modal</h4>
|
||||
<p>This <a href="#" class="btn" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on hover.</p>
|
||||
|
||||
<h4>Twipsy tooltips in a modal</h4>
|
||||
<p><a href="#" class="twipsy-test" title="Tooltip">This link</a> and <a href="#" class="twipsy-test" title="Tooltip">that link</a> should have Twipsy tooltips on hover.</p>
|
||||
<h4>Tooltips in a modal</h4>
|
||||
<p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="#" class="btn primary">Save changes</a>
|
||||
@@ -596,30 +634,29 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Twipsy
|
||||
<!-- Tooltips
|
||||
================================================== -->
|
||||
<section id="twipsy">
|
||||
<section id="tooltips">
|
||||
<div class="page-header">
|
||||
<h1>Twipsy <small>bootstrap-twipsy.js</small></h1>
|
||||
<h1>Tooltips <small>bootstrap-tooltip.js</small></h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span3 columns">
|
||||
<h3>About Twipsy tooltips</h3>
|
||||
<p>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, data-attributes for local title storage, and now jquery 1.7's new event api!</p>
|
||||
<a href="../js/bootstrap-twipsy.js" target="_blank" class="btn">Download file</a>
|
||||
<h3>About Tooltips</h3>
|
||||
<p>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, uss css3 for animations, and data-attributes for local title storage.</p>
|
||||
<a href="../js/bootstrap-tooltip.js" target="_blank" class="btn">Download file</a>
|
||||
</div>
|
||||
<div class="span9 columns">
|
||||
<h2>Example use of Twipsy</h2>
|
||||
<h2>Example use of Tooltips</h2>
|
||||
<p>Hover over the links below to see tooltips:</p>
|
||||
<div class="twipsy-demo well">
|
||||
<p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" rel='twipsy' title="first twipsy">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel='twipsy' title='Another twipsy'>have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A <a href="#" rel='twipsy' title='Another one here too'>really ironic</a> artisan whatever keytar, scenester farm-to-table banksy Austin <a href="#" rel='twipsy' title='The last tip!'>twitter handle</a> freegan cred raw denim single-origin coffee viral.
|
||||
<div class="tooltip-demo well">
|
||||
<p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" rel='tooltip' title="first tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel='tooltip' title='Another tooltip'>have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A <a href="#" rel='tooltip' title='Another one here too'>really ironic</a> artisan whatever keytar, scenester farm-to-table banksy Austin <a href="#" rel='tooltip' title='The last tip!'>twitter handle</a> freegan cred raw denim single-origin coffee viral.
|
||||
</p>
|
||||
</div>
|
||||
<hr>
|
||||
<h2>Using bootstrap-twipsy.js</h2>
|
||||
<p>Trigger the Twipsy tooltips via javascript:</p>
|
||||
<pre class="prettyprint linenums">$('#example').twipsy(options)</pre>
|
||||
<h2>Using bootstrap-tooltip.js</h2>
|
||||
<p>Trigger the tooltip via javascript:</p>
|
||||
<pre class="prettyprint linenums">$('#example').tooltip(options)</pre>
|
||||
<h3>Options</h3>
|
||||
<table class="bordered-table striped-table">
|
||||
<thead>
|
||||
@@ -647,7 +684,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
<td>selector</td>
|
||||
<td>string</td>
|
||||
<td>false</td>
|
||||
<td>If a selector is provided, twipsy 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>
|
||||
<td>title</td>
|
||||
@@ -673,18 +710,18 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p><span class="label notice">Notice</span> Individual twipsy instance options can alternatively be specified through the use of data attributes.</code></p>
|
||||
<p><span class="label notice">Notice</span> Individual tooltip instance options can alternatively be specified through the use of data attributes.</code></p>
|
||||
<h3>Markup</h3>
|
||||
<p>For performance reasons, the Twipsy 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>
|
||||
<h4>$().twipsy(options)</h4>
|
||||
<p>Attaches a twipsy handler to an element collection.</p>
|
||||
<h4>.twipsy('show')</h4>
|
||||
<p>Reveals an elements twipsy.</p>
|
||||
<pre class="prettyprint linenums">$('#element').twipsy('show')</pre>
|
||||
<h4>.twipsy('hide')</h4>
|
||||
<p>Hides an elements twipsy.</p>
|
||||
<pre class="prettyprint linenums">$('#element').twipsy('hide')</pre>
|
||||
<h4>$().tooltip(options)</h4>
|
||||
<p>Attaches a tooltip handler to an element collection.</p>
|
||||
<h4>.tooltip('show')</h4>
|
||||
<p>Reveals an elements tooltip.</p>
|
||||
<pre class="prettyprint linenums">$('#element').tooltip('show')</pre>
|
||||
<h4>.tooltip('hide')</h4>
|
||||
<p>Hides an elements tooltip.</p>
|
||||
<pre class="prettyprint linenums">$('#element').tooltip('hide')</pre>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -701,7 +738,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
<div class="span3 columns">
|
||||
<h3>About popovers</h3>
|
||||
<p>Add small overlays of content, like those on the iPad, to any element for housing secondary information.</p>
|
||||
<p class="muted"><strong>*</strong> Requires <a href="#twipsy">Twipsy</a> to be included</p>
|
||||
<p class="muted"><strong>*</strong> Requires <a href="#tooltip">Tooltip</a> to be included</p>
|
||||
<a href="../js/bootstrap-popover.js" target="_blank" class="btn">Download file</a>
|
||||
</div>
|
||||
<div class="span9 columns">
|
||||
@@ -741,7 +778,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
<td>selector</td>
|
||||
<td>string</td>
|
||||
<td>false</td>
|
||||
<td>if a selector is provided, twipsy 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>
|
||||
<td>trigger</td>
|
||||
@@ -776,7 +813,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
<p><span class="label notice">Notice</span> Individual popover instance options can alternatively be specified through the use of data attributes.</code></p>
|
||||
<h3>Markup</h3>
|
||||
<p>
|
||||
For performance reasons, the Twipsy and Popover data-apis are opt in. If you would like to use them just specify a the selector option.
|
||||
For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a the selector option.
|
||||
</p>
|
||||
<h3>Methods</h3>
|
||||
<h4>$().popover(options)</h4>
|
||||
@@ -1302,7 +1339,7 @@ $('#myCollapsible').on('hidden', function () {
|
||||
<script src="../js/bootstrap-dropdown.js"></script>
|
||||
<script src="../js/bootstrap-scrollspy.js"></script>
|
||||
<script src="../js/bootstrap-tab.js"></script>
|
||||
<script src="../js/bootstrap-twipsy.js"></script>
|
||||
<script src="../js/bootstrap-tooltip.js"></script>
|
||||
<script src="../js/bootstrap-popover.js"></script>
|
||||
<script src="../js/bootstrap-button.js"></script>
|
||||
<script src="../js/bootstrap-collapse.js"></script>
|
||||
@@ -1311,11 +1348,11 @@ $('#myCollapsible').on('hidden', function () {
|
||||
<script src="assets/js/application.js"></script>
|
||||
<script>
|
||||
$(function () {
|
||||
// twipsy demo
|
||||
$('.twipsy-demo.well').twipsy({
|
||||
selector: "a[rel=twipsy]"
|
||||
// tooltip demo
|
||||
$('.tooltip-demo.well').tooltip({
|
||||
selector: "a[rel=tooltip]"
|
||||
})
|
||||
$('.twipsy-test').twipsy()
|
||||
$('.tooltip-test').tooltip()
|
||||
|
||||
// popover demo
|
||||
$("a[rel=popover]")
|
||||
|
||||
Reference in New Issue
Block a user