diff --git a/examples/accessible-tabs/README.md b/examples/accessible-tabs/README.md index 0a310c1..fcb9804 100644 --- a/examples/accessible-tabs/README.md +++ b/examples/accessible-tabs/README.md @@ -81,8 +81,9 @@ Tabs.initFromPreset(); ### Options -| name | type | default | description | -|--------------------|---------|------------------------|----------------------------------------------------------------------------| -| `auto` | boolean | `false` | Determines if you have to press Enter button on a tab to reveal the panel. | -| `tabListSelector` | string | `button[role="tab"]` | The selector of the tab list. | -| `tabPanelSelector` | string | `div[role="tabpanel"]` | The selector of the panel(s). | +| name | type | default | description | +|--------------------|----------|------------------------|----------------------------------------------------------------------------| +| `auto` | boolean | `false` | Determines if you have to press Enter button on a tab to reveal the panel. | +| `onTabChange` | Function | `() => {}` | Callback on tab change. | +| `tabListSelector` | string | `button[role="tab"]` | The selector of the tab list. | +| `tabPanelSelector` | string | `div[role="tabpanel"]` | The selector of the panel(s). | diff --git a/examples/accessible-tabs/index.html b/examples/accessible-tabs/index.html index 354102b..a94ab3d 100644 --- a/examples/accessible-tabs/index.html +++ b/examples/accessible-tabs/index.html @@ -81,6 +81,39 @@

Suggestion

Lay the pineapple flat and slice it. Remove the core from the slices. Reconstitute the pineapple by stacking the slices on top of each other. Then style the pineapple with its plume of sheets. Squeeze a lime and sprinkle the pineapple with the lemon juice to prevent the flesh from oxidizing.

+ +

With events

+ +
+
+ + + + +
+ +
+

Steps

+
    +
  1. Cut the two ends of the fruit so that it can be placed vertically on the worktop.
  2. +
  3. Slice the skin from top to bottom going around the fruit.
  4. +
  5. Retirez les “yeux” avec la pointe du couteau d’office.
  6. +
  7. Tranchez l’ananas en quartier puis, au besoin, ôtez la partie centrale dure.
  8. +
+
+ + + +

Code

@@ -102,6 +135,11 @@

Code

'#tab-demo-2': { auto: true, }, + '#tab-demo-3': { + onTabChange: function() { + alert('Tab changed!') + } + } } Tabs.initFromPreset() diff --git a/src/classes/Tabs.js b/src/classes/Tabs.js index cec184b..6411ee0 100644 --- a/src/classes/Tabs.js +++ b/src/classes/Tabs.js @@ -86,6 +86,7 @@ class Tabs extends AbstractDomElement { */ open(button) { const buttons = this._element.querySelectorAll(this._settings.tabListSelector) + const { onTabChange } = this._settings const panel = document.getElementById(button.getAttribute('aria-controls')) buttons.forEach((button) => this.close(button)) @@ -94,6 +95,10 @@ class Tabs extends AbstractDomElement { button.setAttribute('aria-selected', 'true') button.removeAttribute('tabindex') panel.removeAttribute('hidden') + + if (onTabChange) { + onTabChange.bind(this)() + } } /** @@ -272,6 +277,7 @@ function handleKeydown(e) { Tabs.defaults = { auto: false, + onTabChange: () => {}, tabListSelector: 'button[role="tab"]', tabPanelSelector: 'div[role="tabpanel"]', }