Jetzt hätte ich doch nochmal ne Frage zu dem ganzen...
Der Link, den Du oben gepostet hast bringt mich schon ein ganzes Stück weiter.
Könnte mir aber jedem helfen, den code etwas zu optimieren?
Im Aktuellen Code muss man in jeder Zeile eine leere Zelle lassen, in die eine Grafik eingefügt wird.
Jetzt hätte ich es gerne so, dass das Wort, dass in der jeweils ersten Zelle steht in einen Link umgewandelt wird (oder ich kann es jeweils gleich als Link schreiben, nur mit welchem "a href"?
Und wie kann es dauerhaft aktivieren, dass jeweils nur eine Zeile geöffnet wird, also alle geöffneten geschlossen werden, sobald man etwas anklickt?
Code:
function KlappTabelle(t) {
var obj = t;
var rows = [];
var self = this;
self.doCloseAll = false;
self.onopen = self.onclose = function() {};
self.hideAll = function() {
for(var i = 0; i < rows.length;i++) rows[i].hide();
};
self.showAll = function() {
var tmp = self.doCloseAll;
for(var i = 0; i < rows.length;i++) {
rows[i].show();
self.doCloseAll = false;
}
self.doCloseAll = tmp;
};
function init() {
var r = obj.getElementsByTagName('tr');
var akt = null;
for(var i = 0; i < r.length; i++) {
if( (r[i].className || '') == KlappTabelle.className) {
if(akt && !akt.rows()) akt.disable();
// Eine neue Hauptreihe initialisieren
akt = new Part(r[i], self);
rows.push( akt );
} else if(akt) akt.addRow( r[i] );
}
self.hideAll()
}
if(obj) init();
////////////////////////////////////////////
/*
privates Objekt: Part(row, parent)
Parameter:
row: Die Reihe unter der ausgeblendet werden soll
parent: Das Objekt/Tabelle das die Reihe erzeugt
Funktionen:
addRow()
rows()
show()
hide()
disable()
*/
////////////////////////////////////////////
function Part(row, parent) {
var self = this; // Zeiger auf das Objekt
var open = true; // Flag
var rows = []; // Die Reihen die "ein- und ausgeklappt" werden
// anklickbare Grafik zum klappen erzeugen und in die erste Spalte einfügen
var m = new Image(); //document.createElement('img');
m.src = KlappTabelle.marker;
row.cells[0].insertBefore(m, row.cells[0].firstChild);
m.style.cursor = 'pointer';
m.onmouseover = function() {
var i = this.src.lastIndexOf('.');
this.src = this.src.substring(0, i) +
'-invers' + this.src.substring(i);
};
m.onmouseout = function() {
this.src = this.src.replace(/-invers/, '');
};
m.onclick = function() {
if(open) self.hide(); else self.show();
};
// Funktionen
this.addRow = function(r) { rows[rows.length] = r;};
this.rows = function() {return rows.length;};
this.show = function() {
if(parent.doCloseAll) parent.hideAll();
if(parent.onopen(parent, row) == false) return false;
for(var i = 0; i < rows.length; i++) rows[i].style.display = '';
m.src = m.src.replace(/-auf/, '-zu');
open = true;
return true;
};
this.hide = function() {
if(!parent.onclose(parent, row) == false) return false;
for(var i = 0; i < rows.length; i++) rows[i].style.display = 'none';
m.src = m.src.replace(/-zu/, '-auf');
open = false;
return true;
};
this.disable = function() {
m.onmouseover = m.onmouseout =
m.onclick = function() {};
var tmp = m.src.replace(/-zu/, '-grey')
m.src = tmp;
m.style.cursor = '';
};
}
}
KlappTabelle.init = function(callback) {
// prüfen ob die Bilder vorhanden sind.
var img = new Image();
img.onerror = function() {
alert('Die Bilder fehlen!\n\nEntweder sind sie an der falschen Stelle oder sie wurden vergessen.\n\nEs wurde versucht:' + this.src + ' zu laden.');
}
img.onload = function() {
// Bilder vorladen?
if(KlappTabelle.preload) {
var tmp_1 = new Image();
var i = this.src.lastIndexOf('.');
tmp_1.src = this.src.substring(0, i) + '-invers' + this.src.substring(i);
var tmp_2 = new Image();
tmp_2.src = this.src.replace(/-zu/, '-auf');
var tmp_3 = new Image();
tmp_3.src = this.src.replace(/-zu/, '-grey');
}
}
img.src = KlappTabelle.marker;
// Alle Tabellen des Dokuments
var t = document.getElementsByTagName('table');
var r = /\bklapptabelle\b/i;
for(var i = 0; i < t.length; i++) if(t[i].className && r.test(t[i].className)) {
var tmp = new KlappTabelle(t[i]);
if(callback) callback(tmp);
}
};
KlappTabelle.className = 'main';
KlappTabelle.preload = true;
KlappTabelle.marker = 'bilder/pfeil-zu.gif';
Es wird in meiner Tabelle keine Zeile sein ohne Zusatzinfos... dadurch kann ein großer Teil des Codes wegfallen.
Eine nette Zusatzfunktion wäre, dass der Link, der gerade aktiv ist, farblich geändert wird.
Sorry dass ich mir nicht mehr selbst helfen kann... danke schonmal im voraus.
Gruß
Freak
LinkBack URL
About LinkBacks
Zitieren
Zitat von ein schlauer
Lesezeichen