0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-03-13 13:29:25 +01:00

v4 without jquery: updated button, carousel, collapse docs (#27173)

This commit is contained in:
aTable 2018-09-15 21:44:23 +10:00 committed by XhmikosR
parent a2f1d79045
commit e866b1ae43
3 changed files with 49 additions and 52 deletions

View File

@ -157,7 +157,24 @@ Note that pre-checked buttons require you to manually add the `.active` class to
### Methods
| Method | Description |
| --- | --- |
| `$().button('toggle')` | Toggles push state. Gives the button the appearance that it has been activated. |
| `$().button('dispose')` | Destroys an element's button. |
You can create a button instance with the button constructor, for example:
{% highlight js %}
var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)
{% endhighlight %}
| Method | Description |
| --------- | ------------------------------------------------------------------------------- |
| `toggle` | Toggles push state. Gives the button the appearance that it has been activated. |
| `dispose` | Destroys an element's button. |
For example, to toggle all buttons
{% highlight js %}
var buttons = document.querySelectorAll('.btn')
buttons.forEach(function (button) {
var button = new bootstrap.Button(button)
button.toggle()
})
{% endhighlight %}

View File

@ -228,7 +228,8 @@ The `data-ride="carousel"` attribute is used to mark a carousel as animating sta
Call carousel manually with:
{% highlight js %}
$('.carousel').carousel()
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
{% endhighlight %}
### Options
@ -265,8 +266,8 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
<p>On touch-enabled devices, when set to <code>"hover"</code>, cycling will pause on <code>touchend</code> (once the user finished interacting with the carousel) for two intervals, before automatically resuming. Note that this is in addition to the above mouse behavior.</p></td>
</tr>
<tr>
<td>ride</td>
<td>string</td>
<td>slide</td>
<td>string | boolean</td>
<td>false</td>
<td>Autoplays the carousel after the user manually cycles the first item. If "carousel", autoplays the carousel on load.</td>
</tr>
@ -289,39 +290,26 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
{% include callout-danger-async-methods.md %}
#### `.carousel(options)`
Initializes the carousel with an optional options `object` and starts cycling through items.
You can create a carousel instance with the carousel constructor, for example, to initialize with additional options and start cycling through items:
{% highlight js %}
$('.carousel').carousel({
interval: 2000
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: false
})
{% endhighlight %}
#### `.carousel('cycle')`
Cycles through the carousel items from left to right.
#### `.carousel('pause')`
Stops the carousel from cycling through items.
#### `.carousel(number)`
Cycles the carousel to a particular frame (0 based, similar to an array). **Returns to the caller before the target item has been shown** (i.e. before the `slid.bs.carousel` event occurs).
#### `.carousel('prev')`
Cycles to the previous item. **Returns to the caller before the previous item has been shown** (i.e. before the `slid.bs.carousel` event occurs).
#### `.carousel('next')`
Cycles to the next item. **Returns to the caller before the next item has been shown** (i.e. before the `slid.bs.carousel` event occurs).
#### `.carousel('dispose')`
Destroys an element's carousel.
| Method | Description |
| --- | --- |
| `cycle` | Cycles through the carousel items from left to right. |
| `pause` | Stops the carousel from cycling through items. |
| `prev` | Cycles to the previous item. **Returns to the caller before the previous item has been shown** (i.e. before the `slid.bs.carousel` event occurs). |
| `next` | Cycles to the next item. **Returns to the caller before the next item has been shown** (i.e. before the `slid.bs.carousel` event occurs). |
| `nextWhenVisible` | Only go to the next slide when the page, carousel and the carousel parent is visible. |
| `to` | Cycles the carousel to a particular frame (0 based, similar to an array). **Returns to the caller before the target item has been shown** (i.e. before the `slid.bs.carousel` event occurs). |
| `dispose` | Destroys an element's carousel. |
### Events

View File

@ -187,31 +187,23 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
{% include callout-danger-async-methods.md %}
#### `.collapse(options)`
Activates your content as a collapsible element. Accepts an optional options `object`.
You can create a collapse instance with the constructor, for example:
{% highlight js %}
$('#myCollapsible').collapse({
var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false
})
{% endhighlight %}
#### `.collapse('toggle')`
Toggles a collapsible element to shown or hidden. **Returns to the caller before the collapsible element has actually been shown or hidden** (i.e. before the `shown.bs.collapse` or `hidden.bs.collapse` event occurs).
#### `.collapse('show')`
Shows a collapsible element. **Returns to the caller before the collapsible element has actually been shown** (i.e. before the `shown.bs.collapse` event occurs).
#### `.collapse('hide')`
Hides a collapsible element. **Returns to the caller before the collapsible element has actually been hidden** (i.e. before the `hidden.bs.collapse` event occurs).
#### `.collapse('dispose')`
Destroys an element's collapse.
| Method | Description |
| --- | --- |
| `toggle` | Toggles a collapsible element to shown or hidden. **Returns to the caller before the collapsible element has actually been shown or hidden** (i.e. before the `shown.bs.collapse` or `hidden.bs.collapse` event occurs). |
| `show` | Shows a collapsible element. **Returns to the caller before the collapsible element has actually been shown** (i.e. before the `shown.bs.collapse` event occurs).|
| `hide` | Hides a collapsible element. **Returns to the caller before the collapsible element has actually been hidden** (i.e. before the `hidden.bs.collapse` event occurs).|
| `dispose` | Destroys an element's collapse. |
### Events