Registerkarten (DOM-Beispiel)
Bilder präsentieren
Registerkarten sind Sortier- und Navigationshilfen,
die betrachtet werden können ähnlich
wie Aktenbeständen, die Aktenordnern und Aktenschränken
untergebracht sind ("Karteikarten", "Karteireiter", "Tabs").
Siehe z.B.
de.wikipedia: Registerkarte
Beispiel Fraktale, der Quelltext steht im HTML-Quelltext.
Fraktale
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- Code
-
Yin und Yang ( altes asiatisches Symbol )
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Code Snippet: Registerkarten mit dl-Liste
- var dt_registerkarten = (function (win) {
-
- var doc = win.document, dd_visu = 'block',
- dt_aktiv = 'dt_aktiv', dt_inakt = 'dt_inakt';
-
- function get_dl_dt_dd(id_dl) {
- var dl = doc.getElementById(id_dl);
- return { id_dl: id_dl, dl: dl,
- dt: dl.getElementsByTagName('dt'),
- dd: dl.getElementsByTagName('dd')
- };
- }
- function hide_all_dd(id_dl) {
- var i, o = get_dl_dt_dd(id_dl);
- if (!(o && o.dt.length === o.dd.length)) {
- win.alert('dt.length !== dd.length');
- }
- for (i = 0; i < o.dd.length; i += 1) {
- o.dd[i].style.display = 'none';
- o.dt[i].className = dt_inakt;
- } return o;
- }
- function show_idx(id_dl, idx) {
- var o = get_dl_dt_dd(id_dl);
- o.dd[idx].style.display = dd_visu;
- o.dt[idx].className = dt_aktiv; return o;
- }
- function click_ausfuehrung(id_dl, idx) {
- hide_all_dd(id_dl); show_idx(id_dl, idx);
- }
- function init(id_dl, idx) { idx = idx || 0;
- var i, o = get_dl_dt_dd(id_dl);
- for (i = 0; i < o.dt.length; i += 1) {
- o.dt[i].onclick = (function (id_dl, i) {
- return function () { click_ausfuehrung(id_dl, i); };
- } (id_dl, i));
- } hide_all_dd(id_dl);show_idx(id_dl, idx);
- }
- return { init: init };
- } (window));
-
- window.onload = function () {
- dt_registerkarten.init('DL1');
- };