@@ -588,7 +589,13 @@ $('#myDropdown').on('show.bs.dropdown', function () {

Via data attributes

To easily add scrollspy behavior to your topbar navigation, add data-spy="scroll" to the element you want to spy on (most typically this would be the <body>). Then add the data-target attribute with the ID or class of the parent element of any Bootstrap .nav component.

{% highlight html %} - + + ... + ... {% endhighlight %} @@ -596,7 +603,7 @@ $('#myDropdown').on('show.bs.dropdown', function () {

Via JavaScript

Call the scrollspy via JavaScript:

{% highlight js %} -$('body').scrollspy({ target: '#navbar-example' }) +$('body').scrollspy({ target: '.navbar-example' }) {% endhighlight %}

-- cgit v1.2.3 From 1e6c95cd5d04ae5750d46195d652e21e9a461647 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 29 Nov 2013 20:39:00 -0800 Subject: improve affix docs with step-by-step walk through of plugin behavior and required CSS --- javascript.html | 25 +++++++++++++++---------- 1 file changed, 15 insertions(+), 10 deletions(-) (limited to 'javascript.html') diff --git a/javascript.html b/javascript.html index 9b808c364..b424f46f6 100644 --- a/javascript.html +++ b/javascript.html @@ -1933,22 +1933,27 @@ $('#myCarousel').on('slide.bs.carousel', function () {

Usage

Use the affix plugin via data attributes or manually with your own JavaScript. In both situations, you must provide CSS for the positioning of your content.

+ +

Positioning via CSS

The affix plugin toggles between three classes, each representing a particular state: .affix, .affix-top, and .affix-bottom. You must provide the styles for these classes yourself (independent of this plugin) to handle the actual positions.

Here's how the affix plugin works:

To start, the plugin adds .affix-top to indicate the element is in it's top-most position. At this point no CSS positioning is required.
Scrolling past the element you want affixed should trigger the actual affixing. This is where .affix replaces .affix-top and sets position: fixed; (provided by Bootstrap's code CSS).
If a bottom offset is defined, scrolling past that should replace .affix with .affix-bottom. Since offsets are optional, setting one requires you to set the appropriate CSS. In this case, add position: absolute; when necessary. The plugin uses the data attribute or JavaScript option to determine where to position the elemtn from there.

Follow the above steps to set your CSS for either of the usage options below.

Via data attributes

To easily add affix behavior to any element, just add data-spy="affix" to the element you want to spy on. Then use offsets to define when to toggle the pinning of an element on and off.

To easily add affix behavior to any element, just add data-spy="affix" to the element you want to spy on. Use offsets to define when to toggle the pinning of an element.

{% highlight html %} -

...

+ ... +

{% endhighlight %} -

Requires independent styling ;)

- Affix toggles between three states/classes: .affix, .affix-top, and .affix-bottom. You must provide the styles for these classes yourself (independent of this plugin). - The .affix-top class should be in the regular flow of the document. The .affix class should be position: fixed. And .affix-bottom should be position: absolute. Note: .affix-bottom is special in that the plugin will place the element with JS relative to the offset: { bottom: number } option you've provided. -

Via JavaScript

Call the affix plugin via JavaScript:

{% highlight js %} -- cgit v1.2.3 From ab73ff182820954a644a5648f11f51d0704f9390 Mon Sep 17 00:00:00 2001 From: Rakhat Jabagin Date: Mon, 2 Dec 2013 10:39:53 +0600 Subject: replace double quotation marks with single in code examples --- javascript.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'javascript.html') diff --git a/javascript.html b/javascript.html index f0be59da8..dcc2a1e84 100644 --- a/javascript.html +++ b/javascript.html @@ -43,14 +43,14 @@ $(document).off('.alert.data-api')

Programmatic API

We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon.

{% highlight js %} -$(".btn.danger").button("toggle").addClass("fat") +$('.btn.danger').button('toggle').addClass('fat') {% endhighlight %}

All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):

{% highlight js %} -$("#myModal").modal() // initialized with defaults -$("#myModal").modal({ keyboard: false }) // initialized with no keyboard -$("#myModal").modal('show') // initializes and invokes show immediately

+$('#myModal').modal() // initialized with defaults +$('#myModal').modal({ keyboard: false }) // initialized with no keyboard +$('#myModal').modal('show') // initializes and invokes show immediately

{% endhighlight %}

Each plugin also exposes its raw constructor on a Constructor property: $.fn.popover.Constructor. If you'd like to get a particular plugin instance, retrieve it directly from an element: $('[rel=popover]').data('popover').

@@ -1600,7 +1600,7 @@ $('.btn').button()

Via JavaScript

Enable manually with:

{% highlight js %} -$(".collapse").collapse() +$('.collapse').collapse() {% endhighlight %}

Options

-- cgit v1.2.3 From 4ec13704d27a0138a90a59e766ce72702c5491c0 Mon Sep 17 00:00:00 2001 From: kostyatretyak Date: Fri, 6 Dec 2013 02:03:35 +0200 Subject: Fixed another small error --- javascript.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'javascript.html') diff --git a/javascript.html b/javascript.html index dcc2a1e84..9557ca623 100644 --- a/javascript.html +++ b/javascript.html @@ -1941,7 +1941,7 @@ $('#myCarousel').on('slide.bs.carousel', function () {

To start, the plugin adds .affix-top to indicate the element is in it's top-most position. At this point no CSS positioning is required.
Scrolling past the element you want affixed should trigger the actual affixing. This is where .affix replaces .affix-top and sets position: fixed; (provided by Bootstrap's code CSS).
If a bottom offset is defined, scrolling past that should replace .affix with .affix-bottom. Since offsets are optional, setting one requires you to set the appropriate CSS. In this case, add position: absolute; when necessary. The plugin uses the data attribute or JavaScript option to determine where to position the elemtn from there.
If a bottom offset is defined, scrolling past that should replace .affix with .affix-bottom. Since offsets are optional, setting one requires you to set the appropriate CSS. In this case, add position: absolute; when necessary. The plugin uses the data attribute or JavaScript option to determine where to position the element from there.

Follow the above steps to set your CSS for either of the usage options below.

-- cgit v1.2.3 From dde53a56e0a5b1e9a8c66dcccf904fd422fe5b91 Mon Sep 17 00:00:00 2001 From: kostyatretyak Date: Fri, 6 Dec 2013 02:28:42 +0200 Subject: This is error? --- javascript.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'javascript.html') diff --git a/javascript.html b/javascript.html index 9557ca623..f0d50fcdd 100644 --- a/javascript.html +++ b/javascript.html @@ -1123,7 +1123,7 @@ $('#myTooltip').on('hidden.bs.tooltip', function () { animation boolean true - apply a CSS fade transition to the tooltip + apply a CSS fade transition to the popover html @@ -1141,7 +1141,7 @@ $('#myTooltip').on('hidden.bs.tooltip', function () { selector string false - if a selector is provided, tooltip objects will be delegated to the specified targets. in practice, this is used to enable dynamic HTML content to have popovers added. See this and an informative example. + if a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See this and an informative example. trigger -- cgit v1.2.3 From 6145cc026d5344c61ea6b517b396f490dac5e90b Mon Sep 17 00:00:00 2001 From: kostyatretyak Date: Sun, 8 Dec 2013 09:11:43 +0200 Subject: Fixed some errors in the docs javascript.html --- javascript.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'javascript.html') diff --git a/javascript.html b/javascript.html index f0d50fcdd..71bbf6823 100644 --- a/javascript.html +++ b/javascript.html @@ -30,7 +30,7 @@ base_url: "../"

Data attributes

You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first-class API and should be your first consideration when using a plugin.

That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the document namespaced with data-api. This looks like this: +

{% highlight js %} $(document).off('.data-api') {% endhighlight %} @@ -50,7 +50,7 @@ $('.btn.danger').button('toggle').addClass('fat') {% highlight js %} $('#myModal').modal() // initialized with defaults $('#myModal').modal({ keyboard: false }) // initialized with no keyboard -$('#myModal').modal('show') // initializes and invokes show immediately

+$('#myModal').modal('show') // initializes and invokes show immediately {% endhighlight %}

@@ -415,7 +415,7 @@ $('#myModal').on('hidden.bs.modal', function (e) {

Within tabs

Within pills

Regular link
Separated link

- +

-- cgit v1.2.3 From 1f35b6ec5c3ff4801048e8a8c051d8af618e71de Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Sun, 8 Dec 2013 17:15:26 -0800 Subject: fix

Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute data-loading-text.

Usage

Positioning via CSS

Via data attributes

Requires independent styling ;)

Via JavaScript

Programmatic API

Via JavaScript

Options

Data attributes

Within tabs

Within pills

Usage

Markup

First slide label

Second slide label

Third slide label

.modal('toggle')

.modal('show')

.modal('hide')

Events

Via data attributes

Via JavaScript

$().button('loading')

$().button(string)

Stateful

Single toggle