rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-30 22:52:24 +01:00
Code Issues Actions Packages Releases Activity

method invocation jqueryui style

Browse Source
This commit is contained in:
Jacob Thornton 2011-09-11 21:03:17 -07:00
parent e255b4f51d
commit 200f5817ba
6 changed files with 145 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/assets/js/application.js
View File

@ -51,7 +51,7 @@ $(document).ready(function(){
, trigger: 'manual' , trigger: 'manual'
, offset: 2 , offset: 2
}) })
.trigger('twipsy:show') .twipsy('show')
}) })
}) })
}); });

2
docs/index.html
View File

@ -1324,7 +1324,7 @@
<li><a href="#">Messages</a></li> <li><a href="#">Messages</a></li>
<li><a href="#">Settings</a></li> <li><a href="#">Settings</a></li>
<li><a href="#">Contact</a></li> <li><a href="#">Contact</a></li>
<li class="dropdown"> <li class="dropdown" data-dropdown>
<a href="#" class="dropdown-toggle">Dropdown</a> <a href="#" class="dropdown-toggle">Dropdown</a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a href="#">Secondary link</a></li> <li><a href="#">Secondary link</a></li>

154
docs/javascript.html
View File

@ -142,8 +142,8 @@ $('#my-modal').modal({
<p>Manually hides a modal.</p> <p>Manually hides a modal.</p>
<pre class="prettyprint linenums">$('#my-modal').modal('hide')</pre> <pre class="prettyprint linenums">$('#my-modal').modal('hide')</pre>
<h4>.modal(true)</h4> <h4>.modal(true)</h4>
<p>Returns a modals modal class instance.</p> <p>Returns an elements modal class instance.</p>
<pre class="prettyprint linenums">$('#my-modal').modal('hide')</pre> <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> <p><span class="label notice">Notice</span> Alternatively, this can be retrieved with <code>$().data('modal')</code>.</p>
<h3>Events</h3> <h3>Events</h3>
<p>Bootstrap's modal class exposes a few events for hooking into modal functionality. The include:</p> <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 () {
&lt;div id="profile"&gt;...&lt;/div&gt; &lt;div id="profile"&gt;...&lt;/div&gt;
&lt;div id="messages"&gt;...&lt;/div&gt; &lt;div id="messages"&gt;...&lt;/div&gt;
&lt;div id="settings"&gt;...&lt;/div&gt; &lt;div id="settings"&gt;...&lt;/div&gt;
&lt;/ul&gt;</pre> &lt;/ul&gt;
&lt;script&gt;
$(function () {
$('.tabs').tabs()
})
&lt;/script&gt;</pre>
</p> </p>
<h3>Demo</h3> <h3>Demo</h3>
<ul class="tabs" data-tabs > <ul class="tabs" data-tabs >
@ -461,7 +467,7 @@ Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seita
<tr> <tr>
<td>title</td> <td>title</td>
<td>string | function</td> <td>string | function</td>
<td>''</td> <td>'title'</td>
<td>attribute or method for retrieving title text</td> <td>attribute or method for retrieving title text</td>
</tr> </tr>
<tr> <tr>
@ -473,16 +479,18 @@ Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seita
</tbody> </tbody>
</table> </table>
<h3>Methods</h3> <h3>Methods</h3>
<h4>$().twipsy</h4> <h4>$().twipsy(options)</h4>
<p>Attaches a twipsy handler to an element collection.</p> <p>Attaches a twipsy handler to an element collection.</p>
<h3>Events</h3> <h4>.twipsy('show')</h4>
<p>You can manually control twipsies by firing events on the controlling element.</p>
<h4>twipsy:show</h4>
<p>Reveals an elements twipsy.</p> <p>Reveals an elements twipsy.</p>
<pre class="prettyprint linenums">$('#element').trigger('twipsy:show')</pre> <pre class="prettyprint linenums">$('#element').twipsy('show')</pre>
<h4>twipsy:hide</h4> <h4>.twipsy('hide')</h4>
<p>Hides an elements twipsy.</p> <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> <h3>Demo</h3>
<div class="well"> <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. <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> <h3>Using boostrap-popover.js</h3>
<pre class="prettyprint linenums">$('#example').popover(options)</pre> <pre class="prettyprint linenums">$('#example').popover(options)</pre>
<h3>Options</h3> <h3>Options</h3>
<ul> <table class="zebra-striped">
<li><strong>animate</strong> (<code>boolean</code>) - apply a css fade transition to the popover.</li> <thead>
<li><strong>delayIn</strong> (<code>number</code>) - delay before showing tooltip (ms).</li> <tr>
<li><strong>delayOut</strong> (<code>number</code>) - delay before hiding tooltip (ms).</li> <th style="width: 100px;">Name</th>
<li><strong>fallback</strong> (<code>string</code>) - fallback text to use when no tooltip text.</li> <th style="width: 100px;">type</th>
<li><strong>placement</strong> (<code>string</code>) - position of tooltip - above | below | left | right.</li> <th style="width: 50px;">default</th>
<li><strong>html</strong> (<code>boolean</code>) - is tooltip content HTML?</li> <th>description</th>
<li><strong>live</strong> (<code>boolean</code>) - use live event support?</li> </tr>
<li><strong>offset</strong> (<code>number</code>) - pixel offset of tooltip from element.</li> </thead>
<li><strong>title</strong> (<code>string|function</code>) - text for title in popover. Alternatively you can specify a <code>data-title</code> attribute.</li> <tbody>
<li><strong>content</strong> (<code>string|function</code>) - text for content in popover. Also you can specify a <code>data-content</code> attibute.</li> <tr>
<li><strong>trigger</strong> (<code>string</code>) - how tooltip is triggered - hover | focus | manual.</li> <td>animate</td>
</ul> <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> <h3>Methods</h3>
<h4>$().popover</h4> <h4>$().popover(options)</h4>
<p>Initializes popovers for an element collection.</p> <p>Initializes popovers for an element collection.</p>
<h3>Events</h3> <h4>.popover('show')</h4>
<p>You can manually control popovers by firing events on the controlling element.</p>
<h4>popover:show</h4>
<p>Reveals an elements popover.</p> <p>Reveals an elements popover.</p>
<pre class="prettyprint linenums">$('#element').trigger('popover:show')</pre> <pre class="prettyprint linenums">$('#element').popover('show')</pre>
<h4>popover:hide</h4> <h4>.popover('hide')</h4>
<p>Hides an elements popover.</p> <p>Hides an elements popover.</p>
<pre class="prettyprint linenums">$('#element').trigger('popover:hide')</pre> <pre class="prettyprint linenums">$('#element').popover('hide')</pre>
<h3>Demo</h3> <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> <script>
$(function () { $(function () {
$("a[rel=popover]").popover({ $("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"> <div class="span12 columns">
<h3>Using bootstrap-alerts.js</h3> <h3>Using bootstrap-alerts.js</h3>
<pre class="prettyprint linenums">$(".alert-message").alert()</pre> <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> <h3>Methods</h3>
<h4>$().alert</h4> <h4>$().alert()</h4>
<p>Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the <code>.fade</code> and <code>.in</code> class already applied to them.</p> <p>Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the <code>.fade</code> and <code>.in</code> class already applied to them.</p>
<h3>Events</h3> <h4>.alert('close')</h4>
<p>You can manually control alerts by firing events on them.</p>
<h4>alert:close</h4>
<p>Closes an alert.</p> <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> <h3>Demo</h3>
<div class="alert-message warning fade in"> <div class="alert-message warning fade in" data-alert >
<a class="close" href="#">&times;</a> <a class="close" href="#">&times;</a>
<p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p> <p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p>
</div> </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="#">&times;</a> <a class="close" href="#">&times;</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> <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"> <div class="alert-actions">
<a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a> <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
</div> </div>
</div> </div>
<script>
$(function () {
$(".alert-message").alert()
})
</script>
</div> </div>
</div> </div>
</section> </section>

41
js/bootstrap-alerts.js vendored
View File

@ -51,30 +51,25 @@
/* ALERT CLASS DEFINITION /* ALERT CLASS DEFINITION
* ====================== */ * ====================== */
var Alert = function ( content ) { var Alert = function ( content, selector ) {
var that = this
this.$element = $(content) this.$element = $(content)
.bind('alert:hide', $.proxy(this.close, this)) .delegate(selector || '.close', 'click', this.close)
.delegate('.close', 'click', function (e) {
e.preventDefault()
that.close()
})
} }
Alert.prototype = { Alert.prototype = {
close: function () { close: function (e) {
var that = this var $element = $(this).parent('.alert-message')
this.$element.removeClass('in') e && e.preventDefault()
$element.removeClass('in')
function removeElement () { function removeElement () {
that.$element.remove() $element.remove()
that.$element = null
} }
$.support.transition && this.$element.hasClass('fade') ? $.support.transition && $element.hasClass('fade') ?
this.$element.bind(transitionEnd, removeElement) : $element.bind(transitionEnd, removeElement) :
removeElement() removeElement()
} }
@ -85,9 +80,25 @@
* ======================= */ * ======================= */
$.fn.alert = function ( options ) { $.fn.alert = function ( options ) {
if ( options === true ) {
return this.data('alert')
}
return this.each(function () { 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 ) })( jQuery || ender )

22
js/bootstrap-popover.js vendored
View File

@ -24,6 +24,7 @@
this.$element = $(element) this.$element = $(element)
this.options = options this.options = options
this.enabled = true this.enabled = true
this.fixTitle()
} }
/* NOTE: POPOVER EXTENDS BOOTSTRAP-TWIPSY.js /* NOTE: POPOVER EXTENDS BOOTSTRAP-TWIPSY.js
@ -38,22 +39,13 @@
$tip[0].className = 'popover' $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') { 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') { } else if (typeof this.options.content == 'function') {
content = this.options.content.call(this.$element[0]) content = this.options.content.call(this.$element[0])
} }
@ -80,6 +72,6 @@
return this 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 ) })( jQuery || ender )

3
js/bootstrap-twipsy.js vendored
View File

@ -282,9 +282,6 @@
this[binder](eventIn, enter)[binder](eventOut, leave) this[binder](eventIn, enter)[binder](eventOut, leave)
} }
this.bind(name + ':show', enter)
this.bind(name + ':hide', leave)
return this return this
} }