diff --git a/docs/javascript.html b/docs/javascript.html
index 160c897efe..74660dbee5 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -57,9 +57,10 @@ $.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the boot
Events
Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. show
) is triggered at the start of an event, and its past participle form (ex. shown
) is trigger on the completion of an action.
+ As of 3.0.0, all bootstrap events are namespaced.
All infinitive events provide preventDefault
functionality. This provides the ability to stop the execution of an action before it starts.
{% 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) {
================================================== -->
About transitions
-
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—it's already there.
+
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—it's already there.
Use cases
A few examples of the transition plugin:
@@ -293,7 +294,7 @@ $('#myModal').modal({
- Event |
+ Event Type |
Description |
@@ -317,7 +318,7 @@ $('#myModal').modal({
{% highlight js %}
-$('#myModal').on('hidden', function () {
+$('#myModal').on('hidden.bs.modal', function () {
// do something…
})
{% endhighlight %}
@@ -566,7 +567,7 @@ $('[data-spy="scroll"]').each(function () {
- Event |
+ Event Type |
Description |
@@ -577,6 +578,11 @@ $('[data-spy="scroll"]').each(function () {
+{% highlight js %}
+$('#myScrollspy').on('activate.bs.scrollspy', function () {
+ // do something…
+})
+{% endhighlight %}
@@ -684,7 +690,7 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
- Event |
+ Event Type |
Description |
@@ -700,7 +706,7 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
{% 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) {
Tooltips bootstrap-tooltip.js
-
Examples
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.
Hover over the links below to see tooltips:
@@ -1085,7 +1090,7 @@ $('#example').tooltip(options)
- Event |
+ Event Type |
Description |
@@ -1101,7 +1106,7 @@ $('#example').tooltip(options)
{% highlight js %}
-$('#my-alert').bind('closed', function () {
+$('#my-alert').bind('closed.bs.alert', function () {
// do something…
})
{% endhighlight %}
@@ -1430,7 +1435,7 @@ $('#myCollapsible').collapse({
- Event |
+ Event Type |
Description |
@@ -1456,7 +1461,7 @@ $('#myCollapsible').collapse({
{% highlight js %}
-$('#myCollapsible').on('hidden', function () {
+$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something…
})
{% endhighlight %}
@@ -1657,7 +1662,7 @@ $('.carousel').carousel({
- Event |
+ Event Type |
Description |
@@ -1672,6 +1677,11 @@ $('.carousel').carousel({
+ {% highlight js %}
+$('#myCarousel').on('slide.bs.carousel', function () {
+ // do something…
+})
+{% endhighlight %}