diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js index 57d20b3f86f82ea0522c16bb410afae59a73f28b..614b0e3456ac1d0f46ec4dc61673bdd5993c3e73 100644 --- a/docs/assets/js/application.js +++ b/docs/assets/js/application.js @@ -51,7 +51,7 @@ $(document).ready(function(){ , trigger: 'manual' , offset: 2 }) - .trigger('twipsy:show') + .twipsy('show') }) }) }); diff --git a/docs/index.html b/docs/index.html index ccd972b090a9b80cd017e382832958cf4075b56b..29ffa80bddb782009cb59e967d9a343ccd007c02 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1331,7 +1331,7 @@ <li><a href="#">Messages</a></li> <li><a href="#">Settings</a></li> <li><a href="#">Contact</a></li> - <li class="dropdown"> + <li class="dropdown" data-dropdown> <a href="#" class="dropdown-toggle">Dropdown</a> <ul class="dropdown-menu"> <li><a href="#">Secondary link</a></li> diff --git a/docs/javascript.html b/docs/javascript.html index e18784b911bbf705a281358e3b82e0e27ffad0e8..c7f31961d4f1dc80c99e28245dd84fbd4770337c 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -142,8 +142,8 @@ $('#my-modal').modal({ <p>Manually hides a modal.</p> <pre class="prettyprint linenums">$('#my-modal').modal('hide')</pre> <h4>.modal(true)</h4> - <p>Returns a modals modal class instance.</p> - <pre class="prettyprint linenums">$('#my-modal').modal('hide')</pre> + <p>Returns an elements modal class instance.</p> + <pre class="prettyprint linenums">$('#my-modal').modal(true)</pre> <p><span class="label notice">Notice</span> Alternatively, this can be retrieved with <code>$().data('modal')</code>.</p> <h3>Events</h3> <p>Bootstrap's modal class exposes a few events for hooking into modal functionality. The include:</p> @@ -357,7 +357,13 @@ $('#my-modal').bind('hidden', function () { <div id="profile">...</div> <div id="messages">...</div> <div id="settings">...</div> -</ul></pre> +</ul> + +<script> + $(function () { + $('.tabs').tabs() + }) +</script></pre> </p> <h3>Demo</h3> <ul class="tabs" data-tabs > @@ -461,7 +467,7 @@ Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seita <tr> <td>title</td> <td>string | function</td> - <td>''</td> + <td>'title'</td> <td>attribute or method for retrieving title text</td> </tr> <tr> @@ -473,16 +479,18 @@ Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seita </tbody> </table> <h3>Methods</h3> - <h4>$().twipsy</h4> + <h4>$().twipsy(options)</h4> <p>Attaches a twipsy handler to an element collection.</p> - <h3>Events</h3> - <p>You can manually control twipsies by firing events on the controlling element.</p> - <h4>twipsy:show</h4> + <h4>.twipsy('show')</h4> <p>Reveals an elements twipsy.</p> - <pre class="prettyprint linenums">$('#element').trigger('twipsy:show')</pre> - <h4>twipsy:hide</h4> + <pre class="prettyprint linenums">$('#element').twipsy('show')</pre> + <h4>.twipsy('hide')</h4> <p>Hides an elements twipsy.</p> - <pre class="prettyprint linenums">$('#element').trigger('twipsy:hide')</pre> + <pre class="prettyprint linenums">$('#element').twipsy('hide')</pre> + <h4>.twipsy(true)</h4> + <p>Returns an elements twipsy class instance.</p> + <pre class="prettyprint linenums">$('#element').twipsy(true)</pre> + <p><span class="label notice">Notice</span> Alternatively, this can be retrieved with <code>$().data('twipsy')</code>.</p> <h3>Demo</h3> <div class="well"> <p class="muted">Tight pants next level keffiyeh <a href="#" rel='twipsy' title='Some title text'>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. @@ -515,32 +523,95 @@ Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seita <h3>Using boostrap-popover.js</h3> <pre class="prettyprint linenums">$('#example').popover(options)</pre> <h3>Options</h3> - <ul> - <li><strong>animate</strong> (<code>boolean</code>) - apply a css fade transition to the popover.</li> - <li><strong>delayIn</strong> (<code>number</code>) - delay before showing tooltip (ms).</li> - <li><strong>delayOut</strong> (<code>number</code>) - delay before hiding tooltip (ms).</li> - <li><strong>fallback</strong> (<code>string</code>) - fallback text to use when no tooltip text.</li> - <li><strong>placement</strong> (<code>string</code>) - position of tooltip - above | below | left | right.</li> - <li><strong>html</strong> (<code>boolean</code>) - is tooltip content HTML?</li> - <li><strong>live</strong> (<code>boolean</code>) - use live event support?</li> - <li><strong>offset</strong> (<code>number</code>) - pixel offset of tooltip from element.</li> - <li><strong>title</strong> (<code>string|function</code>) - text for title in popover. Alternatively you can specify a <code>data-title</code> attribute.</li> - <li><strong>content</strong> (<code>string|function</code>) - text for content in popover. Also you can specify a <code>data-content</code> attibute.</li> - <li><strong>trigger</strong> (<code>string</code>) - how tooltip is triggered - hover | focus | manual.</li> - </ul> + <table class="zebra-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>animate</td> + <td>boolean</td> + <td>true</td> + <td>apply a css fade transition to the tooltip</td> + </tr> + <tr> + <td>delayIn</td> + <td>number</td> + <td>0</td> + <td>delay before showing tooltip (ms)</td> + </tr> + <tr> + <td>delayOut</td> + <td>number</td> + <td>0</td> + <td>delay before hiding tooltip (ms)</td> + </tr> + <tr> + <td>fallback</td> + <td>string</td> + <td>''</td> + <td>text to use when no tooltip title is present</td> + </tr> + <tr> + <td>placement</td> + <td>string</td> + <td>'right'</td> + <td>how to position the tooltip - above | below | left | right</td> + </tr> + <tr> + <td>html</td> + <td>boolean</td> + <td>false</td> + <td>allows html content within tooltip</td> + </tr> + <tr> + <td>live</td> + <td>boolean</td> + <td>false</td> + <td>use event delegation instead of individual event handlers</td> + </tr> + <tr> + <td>offset</td> + <td>number</td> + <td>0</td> + <td>pixel offset of tooltip from target element</td> + </tr> + <tr> + <td>title</td> + <td>string | function</td> + <td>'title'</td> + <td>attribute or method for retrieving title text</td> + </tr> + <tr> + <td>content</td> + <td>string | function</td> + <td>'data-content'</td> + <td>attribute or method for retrieving content text</td> + </tr> + <tr> + <td>trigger</td> + <td>string</td> + <td>'hover'</td> + <td>how tooltip is triggered - hover | focus | manual</td> + </tr> + </tbody> + </table> <h3>Methods</h3> - <h4>$().popover</h4> + <h4>$().popover(options)</h4> <p>Initializes popovers for an element collection.</p> - <h3>Events</h3> - <p>You can manually control popovers by firing events on the controlling element.</p> - <h4>popover:show</h4> + <h4>.popover('show')</h4> <p>Reveals an elements popover.</p> - <pre class="prettyprint linenums">$('#element').trigger('popover:show')</pre> - <h4>popover:hide</h4> + <pre class="prettyprint linenums">$('#element').popover('show')</pre> + <h4>.popover('hide')</h4> <p>Hides an elements popover.</p> - <pre class="prettyprint linenums">$('#element').trigger('popover:hide')</pre> + <pre class="prettyprint linenums">$('#element').popover('hide')</pre> <h3>Demo</h3> - <a href="#" class="btn danger" rel="popover" data-title="A Title" data-content="And here's some amazing content. It's very engaging. right?">hover for popover</a> + <a href="#" class="btn danger" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">hover for popover</a> <script> $(function () { $("a[rel=popover]").popover({ @@ -568,31 +639,26 @@ Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seita <div class="span12 columns"> <h3>Using bootstrap-alerts.js</h3> <pre class="prettyprint linenums">$(".alert-message").alert()</pre> + <h3>Markup</h3> + <p>Just add a <code>data-alert</code> attribute to your alert messages to automatically give them close functionality.</p> <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> - <h3>Events</h3> - <p>You can manually control alerts by firing events on them.</p> - <h4>alert:close</h4> + <h4>.alert('close')</h4> <p>Closes an alert.</p> - <pre class="prettyprint linenums">$(".alert-message").trigger('alert:close')</pre> + <pre class="prettyprint linenums">$(".alert-message").alert('close')</pre> <h3>Demo</h3> - <div class="alert-message warning fade in"> + <div class="alert-message warning fade in" data-alert > <a class="close" href="#">×</a> <p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p> </div> - <div class="alert-message block-message error fade in"> + <div class="alert-message block-message error fade in" data-alert > <a class="close" href="#">×</a> <p><strong>Oh snap! You got an error!</strong> 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> <div class="alert-actions"> <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a> </div> </div> - <script> - $(function () { - $(".alert-message").alert() - }) - </script> </div> </div> </section> diff --git a/js/bootstrap-alerts.js b/js/bootstrap-alerts.js index dbce13466f96532d83711a3789d2274adcf61c86..9e8b307123258dbe91967106633cfd4d43cf814a 100644 --- a/js/bootstrap-alerts.js +++ b/js/bootstrap-alerts.js @@ -51,30 +51,25 @@ /* ALERT CLASS DEFINITION * ====================== */ - var Alert = function ( content ) { - var that = this + var Alert = function ( content, selector ) { this.$element = $(content) - .bind('alert:hide', $.proxy(this.close, this)) - .delegate('.close', 'click', function (e) { - e.preventDefault() - that.close() - }) + .delegate(selector || '.close', 'click', this.close) } Alert.prototype = { - close: function () { - var that = this + close: function (e) { + var $element = $(this).parent('.alert-message') - this.$element.removeClass('in') + e && e.preventDefault() + $element.removeClass('in') function removeElement () { - that.$element.remove() - that.$element = null + $element.remove() } - $.support.transition && this.$element.hasClass('fade') ? - this.$element.bind(transitionEnd, removeElement) : + $.support.transition && $element.hasClass('fade') ? + $element.bind(transitionEnd, removeElement) : removeElement() } @@ -85,9 +80,25 @@ * ======================= */ $.fn.alert = function ( options ) { + + if ( options === true ) { + return this.data('alert') + } + return this.each(function () { - new Alert(this) + var $this = $(this) + + if ( typeof options == 'string' ) { + return $this.data('alert')[options]() + } + + $(this).data('alert', new Alert( this )) + }) } + $(function () { + new Alert($('body'), '.alert-message[data-alert] .close') + }) + })( jQuery || ender ) \ No newline at end of file diff --git a/js/bootstrap-popover.js b/js/bootstrap-popover.js index 4995fe5d89fc2f104fcfbb71d4d0395cdb04b176..bf1278325f06781b28c645dfc077214181760bb4 100644 --- a/js/bootstrap-popover.js +++ b/js/bootstrap-popover.js @@ -24,6 +24,7 @@ this.$element = $(element) this.options = options this.enabled = true + this.fixTitle() } /* NOTE: POPOVER EXTENDS BOOTSTRAP-TWIPSY.js @@ -38,22 +39,13 @@ $tip[0].className = 'popover' } - , fixTitle: function () {} + , getContent: function () { + var contentvar + , $e = this.$element + , o = this.options - , getTitle: function () { - var title - if (typeof this.options.title == 'string') { - title = this.$element.attr('data-title') || this.options.title - } else if (typeof this.options.title == 'function') { - title = this.options.title.call(this.$element[0]) - } - return title - } - - , getContent: function () {content - var content if (typeof this.options.content == 'string') { - content = this.$element.attr('data-content') || this.options.content + content = $e.attr(o.content) } else if (typeof this.options.content == 'function') { content = this.options.content.call(this.$element[0]) } @@ -80,6 +72,6 @@ return this } - $.fn.popover.defaults = $.extend({} , $.fn.twipsy.defaults, { content: 'content', placement: 'right'}) + $.fn.popover.defaults = $.extend({} , $.fn.twipsy.defaults, { content: 'data-content', placement: 'right'}) })( jQuery || ender ) \ No newline at end of file diff --git a/js/bootstrap-twipsy.js b/js/bootstrap-twipsy.js index a227af4d28b4d8e794834919f1ca2408d43758bd..977c2beb5f2360a9001ae9f51c6cd024dd9b95ed 100644 --- a/js/bootstrap-twipsy.js +++ b/js/bootstrap-twipsy.js @@ -282,9 +282,6 @@ this[binder](eventIn, enter)[binder](eventOut, leave) } - this.bind(name + ':show', enter) - this.bind(name + ':hide', leave) - return this }