mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-25 14:30:46 +02:00
remove jquery references in toast docs
This commit is contained in:
@@ -12,7 +12,6 @@ Toasts are lightweight notifications designed to mimic the push notifications th
|
|||||||
|
|
||||||
Things to know when using the toast plugin:
|
Things to know when using the toast plugin:
|
||||||
|
|
||||||
- If you're building our JavaScript from source, it [requires `util.js`]({{< docsref "/getting-started/javascript#util" >}}).
|
|
||||||
- Toasts are opt-in for performance reasons, so **you must initialize them yourself**.
|
- Toasts are opt-in for performance reasons, so **you must initialize them yourself**.
|
||||||
- **Please note that you are responsible for positioning toasts.**
|
- **Please note that you are responsible for positioning toasts.**
|
||||||
- Toasts will automatically hide if you do not specify `autohide: false`.
|
- Toasts will automatically hide if you do not specify `autohide: false`.
|
||||||
@@ -220,7 +219,10 @@ When using `autohide: false`, you must add a close button to allow users to dism
|
|||||||
Initialize toasts via JavaScript:
|
Initialize toasts via JavaScript:
|
||||||
|
|
||||||
{{< highlight js >}}
|
{{< highlight js >}}
|
||||||
$('.toast').toast(option)
|
var toastElList = [].slice.call(document.querySelectorAll('.toast'))
|
||||||
|
var toastList = toastElList.map(function (toastEl) {
|
||||||
|
return new bootstrap.Toast(toastEl, option)
|
||||||
|
})
|
||||||
{{< /highlight >}}
|
{{< /highlight >}}
|
||||||
|
|
||||||
### Options
|
### Options
|
||||||
@@ -266,28 +268,24 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
|
|||||||
{{< partial "callout-danger-async-methods.md" >}}
|
{{< partial "callout-danger-async-methods.md" >}}
|
||||||
{{< /callout >}}
|
{{< /callout >}}
|
||||||
|
|
||||||
#### `$().toast(options)`
|
#### show
|
||||||
|
|
||||||
Attaches a toast handler to an element collection.
|
|
||||||
|
|
||||||
#### `.toast('show')`
|
|
||||||
|
|
||||||
Reveals an element's toast. **Returns to the caller before the toast has actually been shown** (i.e. before the `shown.bs.toast` event occurs).
|
Reveals an element's toast. **Returns to the caller before the toast has actually been shown** (i.e. before the `shown.bs.toast` event occurs).
|
||||||
You have to manually call this method, instead your toast won't show.
|
You have to manually call this method, instead your toast won't show.
|
||||||
|
|
||||||
{{< highlight js >}}$('#element').toast('show'){{< /highlight >}}
|
{{< highlight js >}}toast.show(){{< /highlight >}}
|
||||||
|
|
||||||
#### `.toast('hide')`
|
#### hide
|
||||||
|
|
||||||
Hides an element's toast. **Returns to the caller before the toast has actually been hidden** (i.e. before the `hidden.bs.toast` event occurs). You have to manually call this method if you made `autohide` to `false`.
|
Hides an element's toast. **Returns to the caller before the toast has actually been hidden** (i.e. before the `hidden.bs.toast` event occurs). You have to manually call this method if you made `autohide` to `false`.
|
||||||
|
|
||||||
{{< highlight js >}}$('#element').toast('hide'){{< /highlight >}}
|
{{< highlight js >}}toast.hide(){{< /highlight >}}
|
||||||
|
|
||||||
#### `.toast('dispose')`
|
#### dispose
|
||||||
|
|
||||||
Hides an element's toast. Your toast will remain on the DOM but won't show anymore.
|
Hides an element's toast. Your toast will remain on the DOM but won't show anymore.
|
||||||
|
|
||||||
{{< highlight js >}}$('#element').toast('dispose'){{< /highlight >}}
|
{{< highlight js >}}toast.dispose(){{< /highlight >}}
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
@@ -319,7 +317,8 @@ Hides an element's toast. Your toast will remain on the DOM but won't show anymo
|
|||||||
</table>
|
</table>
|
||||||
|
|
||||||
{{< highlight js >}}
|
{{< highlight js >}}
|
||||||
$('#myToast').on('hidden.bs.toast', function () {
|
var myToastEl = document.getElementById('myToast')
|
||||||
|
myToastEl.addEventListener('hidden.bs.toast', function () {
|
||||||
// do something...
|
// do something...
|
||||||
})
|
})
|
||||||
{{< /highlight >}}
|
{{< /highlight >}}
|
||||||
|
Reference in New Issue
Block a user