From d52ad3ee3ba5a0fc51e1f06abeebd888846856eb Mon Sep 17 00:00:00 2001 From: Julian Thilo Date: Mon, 17 Mar 2014 15:58:03 +0100 Subject: Separate JS includes for alerts and popovers /cc @mdo --- docs/_includes/js/alerts.html | 71 ++++++++++++++++++++++++++++++++++++++ docs/_includes/js/popovers.html | 76 ----------------------------------------- 2 files changed, 71 insertions(+), 76 deletions(-) create mode 100644 docs/_includes/js/alerts.html (limited to 'docs/_includes/js') diff --git a/docs/_includes/js/alerts.html b/docs/_includes/js/alerts.html new file mode 100644 index 000000000..04bbd43cf --- /dev/null +++ b/docs/_includes/js/alerts.html @@ -0,0 +1,71 @@ +
+

Alert messages alert.js

+ +

Example alerts

+

Add dismiss functionality to all alert messages with this plugin.

+
+ +
+ +
+ +
+ + +

Usage

+

Enable dismissal of an alert via JavaScript:

+ {% highlight js %}$(".alert").alert(){% endhighlight %} + +

Markup

+

Just add data-dismiss="alert" to your close button to automatically give an alert close functionality.

+ {% highlight html %}{% endhighlight %} + +

Methods

+ +

$().alert()

+

Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the .fade and .in class already applied to them.

+ +

.alert('close')

+

Closes an alert.

+ {% highlight js %}$(".alert").alert('close'){% endhighlight %} + + +

Events

+

Bootstrap's alert class exposes a few events for hooking into alert functionality.

+
+ + + + + + + + + + + + + + + + + +
Event TypeDescription
close.bs.alertThis event fires immediately when the close instance method is called.
closed.bs.alertThis event is fired when the alert has been closed (will wait for CSS transitions to complete).
+
+{% highlight js %} +$('#my-alert').bind('closed.bs.alert', function () { + // do something… +}) +{% endhighlight %} +
diff --git a/docs/_includes/js/popovers.html b/docs/_includes/js/popovers.html index 7bf515ad4..56e3600aa 100644 --- a/docs/_includes/js/popovers.html +++ b/docs/_includes/js/popovers.html @@ -263,79 +263,3 @@ $('#myPopover').on('hidden.bs.popover', function () { }) {% endhighlight %} - - - - -
-

Alert messages alert.js

- -

Example alerts

-

Add dismiss functionality to all alert messages with this plugin.

-
- -
- -
- -
- - -

Usage

-

Enable dismissal of an alert via JavaScript:

- {% highlight js %}$(".alert").alert(){% endhighlight %} - -

Markup

-

Just add data-dismiss="alert" to your close button to automatically give an alert close functionality.

- {% highlight html %}{% endhighlight %} - -

Methods

- -

$().alert()

-

Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the .fade and .in class already applied to them.

- -

.alert('close')

-

Closes an alert.

- {% highlight js %}$(".alert").alert('close'){% endhighlight %} - - -

Events

-

Bootstrap's alert class exposes a few events for hooking into alert functionality.

-
- - - - - - - - - - - - - - - - - -
Event TypeDescription
close.bs.alertThis event fires immediately when the close instance method is called.
closed.bs.alertThis event is fired when the alert has been closed (will wait for CSS transitions to complete).
-
-{% highlight js %} -$('#my-alert').bind('closed.bs.alert', function () { - // do something… -}) -{% endhighlight %} -
-- cgit v1.2.3 From 8534e12523c7156b53e76393cc8d016ffdcf5b4f Mon Sep 17 00:00:00 2001 From: Ben Ogle Date: Mon, 20 Jan 2014 11:54:22 -0800 Subject: Add tooltip `viewport` option, respect bounds of the viewport --- docs/_includes/js/tooltips.html | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'docs/_includes/js') diff --git a/docs/_includes/js/tooltips.html b/docs/_includes/js/tooltips.html index 2656556be..b952e8504 100644 --- a/docs/_includes/js/tooltips.html +++ b/docs/_includes/js/tooltips.html @@ -134,6 +134,14 @@ $('#example').tooltip(options)

Appends the tooltip to a specific element. Example: container: 'body'

+ + viewport + string | object + { selector: 'body', padding: 0 } + +

Keeps the tooltip within the bounds of this element. Example: viewport: '#viewport' or { selector: '#viewport', padding: 0 }

+ + -- cgit v1.2.3 From 7c50859e9338512dfb70e5b512e67c95725f0f1a Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Tue, 25 Mar 2014 19:12:16 -0700 Subject: Document `template` option of tooltip & popover; fixes #13088 Also capitalize column titles and descriptions. --- docs/_includes/js/popovers.html | 32 ++++++++++++++++++++++---------- docs/_includes/js/tooltips.html | 27 +++++++++++++++++++-------- 2 files changed, 41 insertions(+), 18 deletions(-) (limited to 'docs/_includes/js') diff --git a/docs/_includes/js/popovers.html b/docs/_includes/js/popovers.html index 56e3600aa..739d86bce 100644 --- a/docs/_includes/js/popovers.html +++ b/docs/_includes/js/popovers.html @@ -135,9 +135,9 @@ $('.popover-dismiss').popover({ Name - type - default - description + Type + Default + Description @@ -145,7 +145,7 @@ $('.popover-dismiss').popover({ animation boolean true - apply a CSS fade transition to the popover + Apply a CSS fade transition to the popover html @@ -157,38 +157,50 @@ $('.popover-dismiss').popover({ placement string | function 'right' - how to position the popover - top | bottom | left | right | auto.
When "auto" is specified, it will dynamically reorient the popover. For example, if placement is "auto left", the popover will display to the left when possible, otherwise it will display right. + How to position the popover - top | bottom | left | right | auto.
When "auto" is specified, it will dynamically reorient the popover. For example, if placement is "auto left", the popover will display to the left when possible, otherwise it will display right. selector string false - if a selector is provided, popover 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, popover 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 string 'click' - how popover is triggered - click | hover | focus | manual + How popover is triggered - click | hover | focus | manual title string | function '' - default title value if title attribute isn't present + Default title value if title attribute isn't present + + + template + string + '<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' + +

Base HTML to use when creating the popover.

+

The popover's title will be injected into the .popover-title.

+

The popover's content will be injected into the .popover-content.

+

.arrow will become the popover's arrow.

+

The outermost wrapper element should have the .popover class.

+ content string | function '' - default content value if data-content attribute isn't present + Default content value if data-content attribute isn't present delay number | object 0 -

delay showing and hiding the popover (ms) - does not apply to manual trigger type

+

Delay showing and hiding the popover (ms) - does not apply to manual trigger type

If a number is supplied, delay is applied to both hide/show

Object structure is: delay: { show: 500, hide: 100 }

diff --git a/docs/_includes/js/tooltips.html b/docs/_includes/js/tooltips.html index b952e8504..83ef82e06 100644 --- a/docs/_includes/js/tooltips.html +++ b/docs/_includes/js/tooltips.html @@ -74,9 +74,9 @@ $('#example').tooltip(options) Name - type - default - description + Type + Default + Description @@ -84,7 +84,7 @@ $('#example').tooltip(options) animation boolean true - apply a CSS fade transition to the tooltip + Apply a CSS fade transition to the tooltip html @@ -96,7 +96,7 @@ $('#example').tooltip(options) placement string | function 'top' - how to position the tooltip - top | bottom | left | right | auto.
When "auto" is specified, it will dynamically reorient the tooltip. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right. + How to position the tooltip - top | bottom | left | right | auto.
When "auto" is specified, it will dynamically reorient the tooltip. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right. selector @@ -104,24 +104,35 @@ $('#example').tooltip(options) false If a selector is provided, tooltip objects will be delegated to the specified targets. + + template + string + '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' + +

Base HTML to use when creating the tooltip.

+

The tooltip's title will be injected into the .tooltip-inner.

+

.tooltip-arrow will become the tooltip's arrow.

+

The outermost wrapper element should have the .tooltip class.

+ + title string | function '' - default title value if title attribute isn't present + Default title value if title attribute isn't present trigger string 'hover focus' - how tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. + How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. delay number | object 0 -

delay showing and hiding the tooltip (ms) - does not apply to manual trigger type

+

Delay showing and hiding the tooltip (ms) - does not apply to manual trigger type

If a number is supplied, delay is applied to both hide/show

Object structure is: delay: { show: 500, hide: 100 }

-- cgit v1.2.3 From 361f452ed42d04c565de41ffca018fff5b35295c Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Wed, 26 Mar 2014 12:49:15 -0700 Subject: doc that popover content() is given the element as an arg; fix #13175 --- docs/_includes/js/popovers.html | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'docs/_includes/js') diff --git a/docs/_includes/js/popovers.html b/docs/_includes/js/popovers.html index 739d86bce..95868af1a 100644 --- a/docs/_includes/js/popovers.html +++ b/docs/_includes/js/popovers.html @@ -193,7 +193,10 @@ $('.popover-dismiss').popover({ content string | function '' - Default content value if data-content attribute isn't present + +

Default content value if data-content attribute isn't present.

+

If a function is given, it will be called with 1 argument, which is the element that the popover is attached to.

+ delay -- cgit v1.2.3 From 640923eb36890eb194799beeb8ec3555e2b379cc Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Tue, 1 Apr 2014 13:03:14 -0700 Subject: help avoid misuse of Carousel's .active when copy-pasting from examples; fix #13252 --- docs/_includes/js/carousel.html | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) (limited to 'docs/_includes/js') diff --git a/docs/_includes/js/carousel.html b/docs/_includes/js/carousel.html index 945910c75..b0665dba8 100644 --- a/docs/_includes/js/carousel.html +++ b/docs/_includes/js/carousel.html @@ -46,6 +46,12 @@ ... +
+ ... +
+ ... +
+
... @@ -105,7 +111,7 @@ {% highlight html %} -
+
...

...

-- cgit v1.2.3 From 2d1d5754f781f0f3fa1bc296c9e69da416043c4a Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Wed, 2 Apr 2014 19:55:05 -0700 Subject: document that you have to add .active yourself on prechecked btn-ized checkboxes+radios; fixes #12651 --- docs/_includes/js/buttons.html | 24 ++++++++++++++++-------- 1 file changed, 16 insertions(+), 8 deletions(-) (limited to 'docs/_includes/js') diff --git a/docs/_includes/js/buttons.html b/docs/_includes/js/buttons.html index 5af374228..154320e48 100644 --- a/docs/_includes/js/buttons.html +++ b/docs/_includes/js/buttons.html @@ -37,10 +37,14 @@

Checkbox

Add data-toggle="buttons" to a group of checkboxes for checkbox style toggling on btn-group.

+
+

Pre-checked options need .active

+

For pre-checked options, you must add the .active class to the input's label yourself.

+
-
{% highlight html %}
-