Tabbed Panels

Code listing for tp.js

1. /*
2. * date: 2002-10-11
3. * info: http://inspire.server101.com/js/tp/
4. */
6. var tp = [];
7. var tpl = [];
9. function tpSet(i, c) {
10. if (document.createElement) {
11. var e = document.getElementById(i);
12. var l = document.createElement('ul');
13. var p = document.createElement('div');
14. e.className = l.className = p.className = c;
16. var a, j;
17. for (j = 2; j < arguments.length; j++) {
18. c = document.getElementById(arguments[j]);
19. tp[arguments[j]] = c.parentNode.removeChild(c);
21. a = l.appendChild(document.createElement('li'));
22. a.className = c.className;
23. tpl[arguments[j]] = a = a.appendChild(document.createElement('a'));
24. a.setAttribute('href', 'javascript:tpShow(\''+i+'\', \''+arguments[j]+'\');');
25. a.appendChild(document.createTextNode(c.getAttribute('title')));
26. }
28. p.appendChild(tp[arguments[2]]);
29. tpl[arguments[2]].className = 'active';
31. while (e.firstChild) e.removeChild(e.firstChild);
32. e.appendChild(l);
33. e.appendChild(p);
34. }}
37. function tpShow(e, p) {
38. e = document.getElementById(e).lastChild;
39. tpl[e.replaceChild(tp[p], e.firstChild).getAttribute('id')].className = null;
40. tpl[p].className = 'active';
41. }

---

function tpSet(i, c)

Sets elements as tabbed panels.

i

String: id of element to contain tabs and panels (tab control).

c

String: class name to be used.

[arguments]

Optional strings: id of each element to create a tabbed panel from.

---

function tpShow(e, p)

Show (swap) a tabbed panel.

e

String: id of element to contain tabs and panels (tab control).

p

String: id of tab to show.

Code in the javascript library is free to use. Enjoy! Feedback welcome.
© Ben Boyle 2003.