2

What's the best way to detect switching between tabs inside a tabbox? In particular, I need to detect when a certain tab is opened, and when the user leaves it (switches to another tab).

I'm using onclick now but that feels hackish.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Andrei Sch.
  • 381
  • 1
  • 3
  • 10

2 Answers2

2

I admit it could be in a more prominent place near the top of the page, but the documentation says:

selectedPanel

Type: element

Holds a reference to the currently selected panel within a element. Assigning a value to this > property will modify the selected panel. A select event will be sent when the selected panel is changed.

It's not totally clear whether the event target is the tabbox or the individual panel, so you may have to experiment a little bit.

Tyler
  • 21,762
  • 11
  • 61
  • 90
1

Listen for the select event on the tabpanels element:

var panels = document.getElementById("tabpanels"); // whatever your ID is
panels.addEventListener("select", function(e) {
    var el = e.target;
    alert(e.target.tagName); // tabpanels
    alert(e.target.selectedPanel) // [object XULElement] (the selected tab)
}, false);
Wayne
  • 59,728
  • 15
  • 131
  • 126
  • In fact both the `tabs` and `tabpanels` generate select events, although it's possible for more than one tab to display the same tabpanel, in which case you wouldn't get a second select event. – Neil Apr 23 '11 at 22:45
  • Thanks it works. It's a pity though that Tabpanels also captures all "select" events of its children, so additional check is necessary to determine whether user actually changed tabs or simply clicked something inside tabpanel. – Andrei Sch. May 22 '11 at 11:34