rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-19 11:52:21 +01:00
Code Issues Actions Packages Releases Activity

remove jquery references from list group

Browse Source
This commit is contained in:
Johann-S 2019-08-04 11:55:37 +02:00
parent 2be5f03bfc
commit 8468f4a37e
1 changed files with 38 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
site/content/docs/4.3/components/list-group.md
View File

@ -281,19 +281,25 @@ You can activate a list group navigation without writing any JavaScript by simpl
Enable tabbable list item via JavaScript (each list item needs to be activated individually): Enable tabbable list item via JavaScript (each list item needs to be activated individually):
{{< highlight js >}} {{< highlight js >}}
$('#myList a').on('click', function (e) { var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach(function (triggerEl) {
var tabTrigger = new bootstrap.Tab(triggerEl)
triggerEl.addEventListener('click', function (e) {
e.preventDefault() e.preventDefault()
$(this).tab('show') tabTrigger.show()
})
}) })
{{< /highlight >}} {{< /highlight >}}
You can activate individual list item in several ways: You can activate individual list item in several ways:
{{< highlight js >}} {{< highlight js >}}
$('#myList a[href="#profile"]').tab('show') // Select tab by name var triggerEl = document.querySelector('#myTab a[href="#profile"]')
$('#myList a:first-child').tab('show') // Select first tab bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
$('#myList a:last-child').tab('show') // Select last tab
$('#myList a:nth-child(3)').tab('show') // Select third tab var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab
{{< /highlight >}} {{< /highlight >}}
### Fade effect ### Fade effect
@ -311,7 +317,7 @@ To make tabs panel fade in, add `.fade` to each `.tab-pane`. The first tab pane
### Methods ### Methods
#### $().tab #### constructor
Activates a list item element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the DOM. Activates a list item element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the DOM.
@ -331,18 +337,35 @@ Activates a list item element and content container. Tab should have either a `d
</div> </div>
<script> <script>
$(function () { var firstTabEl = document.querySelector('#myTab a:last-child')
$('#myList a:last-child').tab('show') var firstTab = new bootstrap.Tab(firstTabEl)
})
firstTab.show()
</script> </script>
{{< /highlight >}} {{< /highlight >}}
#### .tab('show') #### show
Selects the given list item and shows its associated pane. Any other list item that was previously selected becomes unselected and its associated pane is hidden. **Returns to the caller before the tab pane has actually been shown** (for example, before the `shown.bs.tab` event occurs). Selects the given list item and shows its associated pane. Any other list item that was previously selected becomes unselected and its associated pane is hidden. **Returns to the caller before the tab pane has actually been shown** (for example, before the `shown.bs.tab` event occurs).
{{< highlight js >}} {{< highlight js >}}
$('#someListItem').tab('show') var someListItemEl = document.querySelector('#someListItem')
var tab = new bootstrap.Tab(someListItemEl)
tab.show()
{{< /highlight >}}
#### dispose
Destroys an element's tab.
#### getInstance
*Static* method which allows you to get the tab instance associated with a DOM element
{{< highlight js >}}
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
{{< /highlight >}} {{< /highlight >}}
### Events ### Events
@ -384,7 +407,8 @@ If no tab was already active, the `hide.bs.tab` and `hidden.bs.tab` events will
</table> </table>
{{< highlight js >}} {{< highlight js >}}
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) { var tabEl = document.querySelector('a[data-toggle="list"]')
tabEl.addEventListener('shown.bs.tab', function (e) {
e.target // newly activated tab e.target // newly activated tab
e.relatedTarget // previous active tab e.relatedTarget // previous active tab
}) })