diff options
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/assets/css/docs.css | 9 | ||||
| -rw-r--r-- | docs/assets/js/application.js | 83 | ||||
| -rw-r--r-- | docs/components.html | 18 | ||||
| -rw-r--r-- | docs/javascript.html | 159 | ||||
| -rw-r--r-- | docs/scaffolding.html | 18 |
5 files changed, 203 insertions, 84 deletions
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index f37067203..134224e56 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -466,7 +466,7 @@ form.well { /* Icons ------------------------- */ .the-icons { - + } .the-icons i { display: block; @@ -481,6 +481,13 @@ form.well { width: 100px; } +#javascript input[type='checkbox'] { +display: inline; +margin-left: 6px; +position: relative; +top: -1px; +} + /* Responsive Docs -------------------------------------------------- */ diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js index c31fc97a0..0e14a5350 100644 --- a/docs/assets/js/application.js +++ b/docs/assets/js/application.js @@ -48,18 +48,18 @@ $(function(){ setTimeout(function () { $(el).select() }, 0) }) - if ($.fn.twipsy) { + if ($.fn.tooltip) { // position static twipsies for components page if ($(".twipsies a").length) { $(window).on('load resize', function () { $(".twipsies a").each(function () { $(this) - .twipsy({ + .tooltip({ placement: $(this).attr('title') , trigger: 'manual' }) - .twipsy('show') + .tooltip('show') }) }) } @@ -67,7 +67,7 @@ $(function(){ // add tipsies to grid for scaffolding if ($('#grid-system').length) { - $('#grid-system').twipsy({ + $('#grid-system').tooltip({ selector: '.show-grid > div' , title: function () { return $(this).width() + 'px' } }) @@ -75,4 +75,79 @@ $(function(){ } } + // javascript build logic + + var inputs = $("#javascript input") + + // toggle all plugin checkboxes + $('#selectAll').on('click', function (e) { + e.preventDefault() + inputs.attr('checked', !inputs.is(':checked')) + }) + + // handle build button dropdown + var buildTypes = $('#javascriptBuilder .dropdown-menu li').on('click', function () { + buildTypes.removeClass('active') + $(this).addClass('active') + }) + + // request built javascript + $('#javascriptBuild').on('click', function () { + + var names = $("#javascript input:checked") + .map(function () { return this.value }) + .toArray() + + if (names[names.length - 1] == 'bootstrap-transition.js') { + names.unshift(names.pop()) + } + + $.ajax({ + type: 'POST' + , dataType: 'jsonpi' + , params: { + branch: '2.0-wip' + , dir: 'js' + , filenames: names + , compress: buildTypes.first().hasClass('active') + } + , url: "http://bootstrap.herokuapp.com" + }) + }) + }) + + +// Modified from the original jsonpi https://github.com/benvinegar/jquery-jsonpi +// by the talented Ben Vinegar +!function($) { + $.ajaxTransport('jsonpi', function(opts, originalOptions, jqXHR) { + var url = opts.url; + + return { + send: function(_, completeCallback) { + var name = 'jQuery_iframe_' + jQuery.now(), + iframe, form; + + iframe = $('<iframe>') + .attr('name', name) + .appendTo('head'); + + form = $('<form>') + .attr('method', opts.type) // GET or POST + .attr('action', url) + .attr('target', name); + + $.each(opts.params, function(k, v) { + $('<input>') + .attr('type', 'hidden') + .attr('name', k) + .attr('value', v) + .appendTo(form); + }); + + form.appendTo('body').submit(); + } + }; + }); +}(jQuery);
\ No newline at end of file diff --git a/docs/components.html b/docs/components.html index ee1634cca..873bbf682 100644 --- a/docs/components.html +++ b/docs/components.html @@ -147,7 +147,7 @@ <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> - </div><!-- /btn-group --> + </div><!-- /btn-group --> <div class="btn-group"> <a class="btn primary" href="#">Action</a> <a class="btn primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> @@ -158,7 +158,7 @@ <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> - </div><!-- /btn-group --> + </div><!-- /btn-group --> <div class="btn-group"> <a class="btn danger" href="#">Danger</a> <a class="btn danger dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> @@ -214,7 +214,7 @@ </div> </div> </section> - + <!-- Nav, Tabs, & Pills @@ -331,7 +331,7 @@ <pre class="prettyprint linenums"> <ul class="nav tabs"> <li class="dropdown"> - <a class="dropdown-toggle" + <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown @@ -363,7 +363,7 @@ <pre class="prettyprint linenums"> <ul class="nav pills"> <li class="dropdown"> - <a class="dropdown-toggle" + <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown @@ -483,7 +483,7 @@ <p><a class="btn" href="./javascript.html/#tabs">Get the javascript →</a></p> </div> </div> - + <h3>Straightforward markup</h3> <p>Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.</p> <pre class="prettyprint linenums"> @@ -509,7 +509,7 @@ <div class="span4"> <p>Swap the order of your HTML—placing <code>.tabs</code> after <code>.tab-content</code>—for tabs on the bottom.</p> </div> ---> +--> <div class="span4"> <h4>Tabs on the bottom</h4> <p>Flip the order of the HTML and add a class to put tabs on the bottom.</p> @@ -1035,7 +1035,7 @@ </pre> </div> </div><!-- /row --> - + <br> <!-- Block messages --> @@ -1195,7 +1195,7 @@ <script src="../js/bootstrap-dropdown.js"></script> <script src="../js/bootstrap-tab.js"></script> <script src="../js/bootstrap-scrollspy.js"></script> - <script src="../js/bootstrap-twipsy.js"></script> + <script src="../js/bootstrap-tooltip.js"></script> <script src="assets/js/application.js"></script> </body> </html> diff --git a/docs/javascript.html b/docs/javascript.html index 119066895..51f3d691e 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -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]") diff --git a/docs/scaffolding.html b/docs/scaffolding.html index 895eaa19d..b868fd215 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -399,15 +399,15 @@ </dl> <dl class="span2"> <dt>Javascript plugins</dt> - <dd><a href="./javascript.html#transitions">Transitions</a></dd> - <dd><a href="./javascript.html#modals">Modals</a></dd> - <dd><a href="./javascript.html#dropdowns">Dropdowns</a></dd> + <dd><a href="./javascript.html#transition">Transition</a></dd> + <dd><a href="./javascript.html#modal">Modal</a></dd> + <dd><a href="./javascript.html#dropdown">Dropdown</a></dd> <dd><a href="./javascript.html#scrollspy">Scrollspy</a></dd> - <dd><a href="./javascript.html#tabs">Tabs</a></dd> - <dd><a href="./javascript.html#twipsy">Twipsy tooltips</a></dd> - <dd><a href="./javascript.html#popovers">Popovers</a></dd> - <dd><a href="./javascript.html#alerts">Alerts</a></dd> - <dd><a href="./javascript.html#buttons">Buttons</a></dd> + <dd><a href="./javascript.html#tab">Tab</a></dd> + <dd><a href="./javascript.html#tooltip">Tooltip</a></dd> + <dd><a href="./javascript.html#popover">Popover</a></dd> + <dd><a href="./javascript.html#alerts">Alert</a></dd> + <dd><a href="./javascript.html#buttons">Button</a></dd> <dd><a href="./javascript.html#collapse">Collapse</a></dd> <dd><a href="./javascript.html#carousel">Carousel</a></dd> <dd><a href="./javascript.html#typeahead">Typeahead</a></dd> @@ -433,7 +433,7 @@ <script src="http://code.jquery.com/jquery-1.7.min.js"></script> <script src="assets/js/google-code-prettify/prettify.js"></script> <script src="../js/bootstrap-transition.js"></script> - <script src="../js/bootstrap-twipsy.js"></script> + <script src="../js/bootstrap-tooltip.js"></script> <script src="assets/js/application.js"></script> </body> |