0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00

update js docs

This commit is contained in:
fat 2013-05-16 20:42:31 -07:00
parent 2433a076ac
commit abc49c729b
3 changed files with 75 additions and 65 deletions

View File

@ -92,14 +92,14 @@
$parent = $this.hasClass('alert') ? $this : $this.parent()
}
$parent.trigger(e = $.Event('bs:alert:close'))
$parent.trigger(e = $.Event('close.bs.alert'))
if (e.isDefaultPrevented()) return
$parent.removeClass('in')
function removeElement() {
$parent.trigger('bs-closed').remove()
$parent.trigger('closed.bs.alert').remove()
}
$.support.transition && $parent.hasClass('fade') ?
@ -116,9 +116,9 @@
$.fn.alert = function (option) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs-alert')
var data = $this.data('bs.alert')
if (!data) $this.data('bs-alert', (data = new Alert(this)))
if (!data) $this.data('bs.alert', (data = new Alert(this)))
if (typeof option == 'string') data[option].call($this)
})
}
@ -138,7 +138,7 @@
// ALERT DATA-API
// ==============
$(document).on('click.bs-alert.bs-data-api', dismiss, Alert.prototype.close)
$(document).on('click.bs.alert.data-api', dismiss, Alert.prototype.close)
}(window.jQuery);
/* ============================================================
@ -217,7 +217,7 @@
var data = $this.data('button')
var options = typeof option == 'object' && option
if (!data) $this.data('bs-button', (data = new Button(this, options)))
if (!data) $this.data('bs.button', (data = new Button(this, options)))
if (option == 'toggle') data.toggle()
else if (option) data.setState(option)
@ -239,7 +239,7 @@
// BUTTON DATA-API
// ===============
$(document).on('click.bs-button.bs-data-api', '[data-toggle^=button]', function (e) {
$(document).on('click.bs.button.data-api', '[data-toggle^=button]', function (e) {
var $btn = $(e.target)
if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn')
$btn.button('toggle')
@ -359,7 +359,7 @@
$next = $next.length ? $next : this.$element.find('.item')[fallback]()
var e = $.Event('bs:carousel:slide', { relatedTarget: $next[0], direction: direction })
var e = $.Event('slide.bs.carousel', { relatedTarget: $next[0], direction: direction })
if ($next.hasClass('active')) return
@ -407,11 +407,11 @@
$.fn.carousel = function (option) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs-carousel')
var data = $this.data('bs.carousel')
var options = $.extend({}, Carousel.DEFAULTS, typeof option == 'object' && option)
var action = typeof option == 'string' ? option : options.slide
if (!data) $this.data('bs-carousel', (data = new Carousel(this, options)))
if (!data) $this.data('bs.carousel', (data = new Carousel(this, options)))
if (typeof option == 'number') data.to(option)
else if (action) data[action]()
else if (options.interval) data.pause().cycle()
@ -507,7 +507,7 @@
}
this.$element[dimension](0)
this.transition('addClass', $.Event('bs:collapse:show'), 'bs:collapse:shown')
this.transition('addClass', $.Event('show.bs.collapse'), 'shown.bs.collapse')
if ($.support.transition) this.$element[dimension](this.$element[0][scroll])
}
@ -516,7 +516,7 @@
if (this.transitioning || !this.$element.hasClass('in')) return
var dimension = this.dimension()
this.reset(this.$element[dimension]())
this.transition('removeClass', $.Event('bs:collapse:hide'), 'hidden')
this.transition('removeClass', $.Event('hide.bs.collapse'), 'hidden')
this.$element[dimension](0)
}
@ -536,7 +536,7 @@
Collapse.prototype.transition = function (method, startEvent, completeEvent) {
var that = this
var complete = function () {
if (startEvent.type == 'bs:collapse:show') that.reset()
if (startEvent.type == 'show') that.reset()
that.transitioning = 0
that.$element.trigger(completeEvent)
}
@ -793,7 +793,7 @@
Modal.prototype.show = function () {
var that = this
var e = $.Event('bs:modal:show')
var e = $.Event('show.bs.modal')
this.$element.trigger(e)
@ -823,8 +823,8 @@
that.enforceFocus()
transition ?
that.$element.one($.support.transition.end, function () { that.$element.focus().trigger('bs:modal:shown') }) :
that.$element.focus().trigger('bs:modal:shown')
that.$element.one($.support.transition.end, function () { that.$element.focus().trigger('shown.bs.modal') }) :
that.$element.focus().trigger('shown.bs.modal')
})
}
@ -832,7 +832,7 @@
Modal.prototype.hide = function (e) {
if (e) e.preventDefault()
e = $.Event('bs:modal:hide')
e = $.Event('hide.bs.modal')
this.$element.trigger(e)
@ -842,7 +842,7 @@
this.escape()
$(document).off('focusin.modal')
$(document).off('focusin.bs.modal')
this.$element
.removeClass('in')
@ -854,7 +854,7 @@
}
Modal.prototype.enforceFocus = function () {
$(document).on('focusin.modal', function (e) {
$(document).on('focusin.bs.modal', function (e) {
if (this.$element[0] !== e.target && !this.$element.has(e.target).length) {
this.$element.focus()
}
@ -863,11 +863,11 @@
Modal.prototype.escape = function () {
if (this.isShown && this.options.keyboard) {
this.$element.on('keyup.dismiss.modal', function ( e ) {
this.$element.on('keyup.dismiss.bs.modal', function ( e ) {
e.which == 27 && this.hide()
}, this)
} else if (!this.isShown) {
this.$element.off('keyup.dismiss.modal')
this.$element.off('keyup.dismiss.bs.modal')
}
}
@ -889,7 +889,7 @@
this.$element.hide()
this.backdrop(function () {
that.removeBackdrop()
that.$element.trigger('bs:modal:hidden')
that.$element.trigger('hidden.bs.modal')
})
}
@ -945,10 +945,10 @@
$.fn.modal = function (option) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs-modal')
var data = $this.data('bs.modal')
var options = $.extend({}, Modal.DEFAULTS, $this.data(), typeof option == 'object' && option)
if (!data) $this.data('bs-modal', (data = new Modal(this, options)))
if (!data) $this.data('bs.modal', (data = new Modal(this, options)))
if (typeof option == 'string') data[option]()
else if (options.show) data.show()
})
@ -969,7 +969,7 @@
// MODAL DATA-API
// ==============
$(document).on('click.modal.data-api', '[data-toggle="modal"]', function (e) {
$(document).on('click.bs.modal.data-api', '[data-toggle="modal"]', function (e) {
var $this = $(this)
var href = $this.attr('href')
var $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) //strip for ie7
@ -985,8 +985,8 @@
})
var $body = $(document.body)
.on('bs:modal:shown', '.modal', function () { $body.addClass('modal-open') })
.on('bs:modal:hidden', '.modal', function () { $body.removeClass('modal-open') })
.on('bs.modal.shown', '.modal', function () { $body.addClass('modal-open') })
.on('bs.modal.hidden', '.modal', function () { $body.removeClass('modal-open') })
}(window.jQuery);
/* ===========================================================
@ -1090,7 +1090,7 @@
if (defaults[key] != value) options[key] = value
}, this)
var self = $(e.currentTarget)[this.type](options).data('bs-' + this.type)
var self = $(e.currentTarget)[this.type](options).data('bs.' + this.type)
if (!self.options.delay || !self.options.delay.show) return self.show()
@ -1103,7 +1103,7 @@
}
Tooltip.prototype.leave = function (e) {
var self = $(e.currentTarget)[this.type](this._options).data('bs-' + this.type)
var self = $(e.currentTarget)[this.type](this._options).data('bs.' + this.type)
if (this.timeout) clearTimeout(this.timeout)
if (!self.options.delay || !self.options.delay.hide) return self.hide()
@ -1115,7 +1115,7 @@
}
Tooltip.prototype.show = function () {
var e = $.Event('bs:'+ this.type + ':show')
var e = $.Event('show.bs.'+ this.type)
if (this.hasContent() && this.enabled) {
this.$element.trigger(e)
@ -1159,7 +1159,7 @@
}
this.applyPlacement(tp, placement)
this.$element.trigger('bs:' + this.type + ':shown')
this.$element.trigger('shown.bs.' + this.type)
}
}
@ -1218,7 +1218,7 @@
Tooltip.prototype.hide = function () {
var that = this
var $tip = this.tip()
var e = $.Event('bs:' + this.type + ':hide')
var e = $.Event('hide.bs.' + this.type)
this.$element.trigger(e)
@ -1241,7 +1241,7 @@
removeWithAnimation() :
$tip.detach()
this.$element.trigger('bs:' + this.type + ':hidden')
this.$element.trigger('hidden.bs.' + this.type)
return this
}
@ -1305,12 +1305,12 @@
}
Tooltip.prototype.toggle = function (e) {
var self = e ? $(e.currentTarget)[this.type](this._options).data('bs-' + this.type) : this
var self = e ? $(e.currentTarget)[this.type](this._options).data('bs.' + this.type) : this
self.tip().hasClass('in') ? self.hide() : self.show()
}
Tooltip.prototype.destroy = function () {
this.hide().$element.off('.' + this.type).removeData('bs-' + this.type)
this.hide().$element.off('.' + this.type).removeData('bs.' + this.type)
}
@ -1322,10 +1322,10 @@
$.fn.tooltip = function (option) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs-tooltip')
var data = $this.data('bs.tooltip')
var options = typeof option == 'object' && option
if (!data) $this.data('bs-tooltip', (data = new Tooltip(this, options)))
if (!data) $this.data('bs.tooltip', (data = new Tooltip(this, options)))
if (typeof option == 'string') data[option]()
})
}
@ -1431,10 +1431,10 @@
$.fn.popover = function (option) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs-popover')
var data = $this.data('bs.popover')
var options = typeof option == 'object' && option
if (!data) $this.data('bs-popover', (data = new Popover(this, options)))
if (!data) $this.data('bs.popover', (data = new Popover(this, options)))
if (typeof option == 'string') data[option]()
})
}
@ -1576,10 +1576,10 @@
$.fn.scrollspy = function (option) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs-scrollspy')
var data = $this.data('bs.scrollspy')
var options = typeof option == 'object' && option
if (!data) $this.data('bs-scrollspy', (data = new ScrollSpy(this, options)))
if (!data) $this.data('bs.scrollspy', (data = new ScrollSpy(this, options)))
if (typeof option == 'string') data[option]()
})
}
@ -1649,7 +1649,7 @@
if ($this.parent('li').hasClass('active')) return
var previous = $ul.find('.active:last a')[0]
var e = $.Event('bs:tab:show', {
var e = $.Event('show.bs.tab', {
relatedTarget: previous
})
@ -1662,7 +1662,7 @@
this.activate($this.parent('li'), $ul)
this.activate($target, $target.parent(), function () {
$this.trigger({
type: 'bs:tab:shown'
type: 'shown.bs.tab'
, relatedTarget: previous
})
})
@ -1712,9 +1712,9 @@
$.fn.tab = function ( option ) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs-tab')
var data = $this.data('bs.tab')
if (!data) $this.data('bs-tab', (data = new Tab(this)))
if (!data) $this.data('bs.tab', (data = new Tab(this)))
if (typeof option == 'string') data[option]()
})
}
@ -1734,7 +1734,7 @@
// TAB DATA-API
// ============
$(document).on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
$(document).on('click.bs.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
e.preventDefault()
$(this).tab('show')
})
@ -1768,8 +1768,8 @@
var Affix = function (element, options) {
this.options = $.extend({}, Affix.DEFAULTS, options)
this.$window = $(window)
.on('scroll.bs-affix.bs-data-api', $.proxy(this.checkPosition, this))
.on('click.bs-affix.bs-data-api', $.proxy(this.checkPositionWithEventLoop, this))
.on('scroll.bs.affix.data-api', $.proxy(this.checkPosition, this))
.on('click.bs.affix.data-api', $.proxy(this.checkPositionWithEventLoop, this))
this.$element = $(element)
this.affixed =
@ -1822,10 +1822,10 @@
$.fn.affix = function (option) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs-affix')
var data = $this.data('bs.affix')
var options = typeof option == 'object' && option
if (!data) $this.data('bs-affix', (data = new Affix(this, options)))
if (!data) $this.data('bs.affix', (data = new Affix(this, options)))
if (typeof option == 'string') data[option]()
})
}

File diff suppressed because one or more lines are too long

View File

@ -57,9 +57,10 @@ $.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the boot
<h3 id="js-events">Events</h3>
<p>Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and its past participle form (ex. <code>shown</code>) is trigger on the completion of an action.</p>
<p>As of 3.0.0, all bootstrap events are namespaced.</p>
<p>All infinitive events provide <code>preventDefault</code> functionality. This provides the ability to stop the execution of an action before it starts.</p>
{% highlight js %}
$('#myModal').on('show', function (e) {
$('#myModal').on('show.bs.modal', function (e) {
if (!data) return e.preventDefault() // stops modal from being shown
})
{% endhighlight %}
@ -71,10 +72,10 @@ $('#myModal').on('show', function (e) {
================================================== -->
<div class="bs-docs-section" id="transitions">
<div class="page-header">
<h1>Transitions <small>bootstrap-transition.js</small></h1>
<h1>Transitions <small>transition.js</small></h1>
</div>
<h3>About transitions</h3>
<p>For simple transition effects, include bootstrap-transition.js once alongside the other JS files. If you're using the compiled (or minified) bootstrap.js, there is no need to include this&mdash;it's already there.</p>
<p>For simple transition effects, include transition.js once alongside the other JS files. If you're using the compiled (or minified) bootstrap.js, there is no need to include this&mdash;it's already there.</p>
<h3>Use cases</h3>
<p>A few examples of the transition plugin:</p>
<ul>
@ -293,7 +294,7 @@ $('#myModal').modal({
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 150px;">Event</th>
<th style="width: 150px;">Event Type</th>
<th>Description</th>
</tr>
</thead>
@ -317,7 +318,7 @@ $('#myModal').modal({
</tbody>
</table>
{% highlight js %}
$('#myModal').on('hidden', function () {
$('#myModal').on('hidden.bs.modal', function () {
// do something…
})
{% endhighlight %}
@ -566,7 +567,7 @@ $('[data-spy="scroll"]').each(function () {
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 150px;">Event</th>
<th style="width: 150px;">Event Type</th>
<th>Description</th>
</tr>
</thead>
@ -577,6 +578,11 @@ $('[data-spy="scroll"]').each(function () {
</tr>
</tbody>
</table>
{% highlight js %}
$('#myScrollspy').on('activate.bs.scrollspy', function () {
// do something…
})
{% endhighlight %}
</section>
@ -684,7 +690,7 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 150px;">Event</th>
<th style="width: 150px;">Event Type</th>
<th>Description</th>
</tr>
</thead>
@ -700,7 +706,7 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
</tbody>
</table>
{% highlight js %}
$('a[data-toggle="tab"]').on('shown', function (e) {
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.target // activated tab
e.relatedTarget // previous tab
})
@ -715,7 +721,6 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<h1>Tooltips <small>bootstrap-tooltip.js</small></h1>
</div>
<h2>Examples</h2>
<p>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.</p>
<p>Hover over the links below to see tooltips:</p>
@ -1085,7 +1090,7 @@ $('#example').tooltip(options)
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 150px;">Event</th>
<th style="width: 150px;">Event Type</th>
<th>Description</th>
</tr>
</thead>
@ -1101,7 +1106,7 @@ $('#example').tooltip(options)
</tbody>
</table>
{% highlight js %}
$('#my-alert').bind('closed', function () {
$('#my-alert').bind('closed.bs.alert', function () {
// do something…
})
{% endhighlight %}
@ -1430,7 +1435,7 @@ $('#myCollapsible').collapse({
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 150px;">Event</th>
<th style="width: 150px;">Event Type</th>
<th>Description</th>
</tr>
</thead>
@ -1456,7 +1461,7 @@ $('#myCollapsible').collapse({
</tbody>
</table>
{% highlight js %}
$('#myCollapsible').on('hidden', function () {
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something…
})
{% endhighlight %}
@ -1657,7 +1662,7 @@ $('.carousel').carousel({
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 150px;">Event</th>
<th style="width: 150px;">Event Type</th>
<th>Description</th>
</tr>
</thead>
@ -1672,6 +1677,11 @@ $('.carousel').carousel({
</tr>
</tbody>
</table>
{% highlight js %}
$('#myCarousel').on('slide.bs.carousel', function () {
// do something…
})
{% endhighlight %}
</section>