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 )

bild yin_yang
bild 1
bild 2
bild 3
bild 4
bild 5
bild 6
bild 7
bild 8
bild 9
bild 10
bild 11
bild 12
bild 13
bild 14
bild 15
bild 16
Code Snippet: Registerkarten mit dl-Liste
  1. var dt_registerkarten = (function (win) {
  2.  
  3.   var doc = win.document, dd_visu = 'block',
  4.   dt_aktiv = 'dt_aktiv', dt_inakt = 'dt_inakt';
  5.  
  6.   function get_dl_dt_dd(id_dl) {
  7.     var dl = doc.getElementById(id_dl);
  8.     return { id_dl: id_dl, dl: dl,
  9.              dt: dl.getElementsByTagName('dt'),
  10.              dd: dl.getElementsByTagName('dd')
  11.            };
  12.   }
  13.   function hide_all_dd(id_dl) {
  14.     var i, o = get_dl_dt_dd(id_dl);
  15.     if (!(o && o.dt.length === o.dd.length)) {
  16.        win.alert('dt.length !== dd.length');
  17.     }
  18.     for (i = 0; i < o.dd.length; i += 1) {
  19.       o.dd[i].style.display = 'none';
  20.       o.dt[i].className = dt_inakt;
  21.     } return o;
  22.   }
  23.   function show_idx(id_dl, idx) {
  24.     var o = get_dl_dt_dd(id_dl);
  25.     o.dd[idx].style.display = dd_visu;
  26.     o.dt[idx].className = dt_aktiv; return o;
  27.   }
  28.   function click_ausfuehrung(id_dl, idx) {  
  29.     hide_all_dd(id_dl); show_idx(id_dl, idx);
  30.   }
  31.   function init(id_dl, idx) { idx = idx || 0;
  32.     var i, o = get_dl_dt_dd(id_dl);
  33.     for (i = 0; i < o.dt.length; i += 1) {
  34.       o.dt[i].onclick = (function (id_dl, i) {
  35.         return function () { click_ausfuehrung(id_dl, i); };
  36.       } (id_dl, i));
  37.     } hide_all_dd(id_dl);show_idx(id_dl, idx);
  38.   }
  39.   return { init: init };
  40. } (window));
  41.  
  42. window.onload = function () {
  43.   dt_registerkarten.init('DL1');
  44. };