multiselectbox in html nachbauen
Paul Eppner
bevor ich stundenlang mich dran versuche stell ich lieber hier die
allgemeine frage ob es geht. weil wenn#s nicht geht kann ich mir die zeit
des probierens ersparen. und zwar möchte ich eine selectbox in html
nachbauen - soll heißen wenn ich einen eintrag anklicke, dann wird er
farbig - kein problem. nun sollte aber auch beim klick auf den hoch und
runterpfeil der eintrag oben drüber oder unten drunter markiert werden, geht
das? beim opera habe ich dann festgestellt, das er dann unweigerlich die
ganze webseite scrollen will. geht es vielleicht wenn ich mit einer art
iframe arbeite? bin für jede idee dankbar!
gruß, paul
Daniel Kirsch
Ja, es geht (im Normalfall). Ist aber etwas Arbeit. Die Frage ist, ob Du
es nicht einfacher mit den normalen Elementen haben kannst.
Tabellen bieten sich hier übrigens an, denn diese bieten mit den rows
und cells Collections bereits eine klare Hierarchie an der Du dich
entlang hangeln kannst.
Grüße
Daniel
Paul Eppner
>Die Frage ist, ob Du es nicht einfacher mit den normalen Elementen haben
>kannst.
leider nicht, weil ich hier mit checkboxen arbeiten muß
>Tabellen bieten sich hier übrigens an, denn diese bieten mit den rows und
>cells Collections bereits eine klare Hierarchie an der Du dich entlang
>hangeln kannst.
ich wollte mit einer liste arbeiten. gibt es bei tabellen vorteile gegenüber
einer liste?
gruß, paul
Daniel Kirsch
> geht es auf der seite, oder muß ich über ein iframe gehen?
Es geht auf der Seite. Auf IFrames würde ich soweit wie möglich verzichten.
> ich wollte mit einer liste arbeiten. gibt es bei tabellen vorteile gegenüber
> einer liste?
Ja, die bereits genannten und das Du innerhalb von Tabellen bereits
klare Positionen hast, wenn Du mehrere Elemente in einer Zeile haben willst.
Beim scripten einer Tabelle muss berücksichtigt werden, dass der Browser
immer ein tbody-Element zwischen Tabelle und Tabelleninhalt einbindet.
Also wenn Du folgende Tabelle hast:
table
tr
td
Macht der Browser daraus
table
tbody
tr
td
Ansonsten lassen sich aber Auswahlen, Ausrichtungen etc. einfacher damit
lösen als beispielsweise über divs.
Grüße
Daniel
Paul Eppner
ich habe jetzt mal eine halbe stunde lang (ich weiß, man könnte auch länger
suchen) google beauftragt, mir ergbnisse zu javascript-selectboxen
vorzuzeigen. mein ergebnis ist gleich null.
warum eigentlich? bin ich der erste, der sowas gebrauchen kann? allgemein
scheint es in js immer nur so spielereien zu geben wie uhren und sowas,
dabei ist js doch zu viel mehr fähig *grübel*
ich mein, hier gibt es viele profis unter euch. kennt ihr euch nur mit js
aus und schreibt selber garnicht darin, oder warum gibt es insgesamt nur
sehr wenig gute js-anwendungen? *fragen über fragen*
gruß, paul
Frank Seitz
> ich habe jetzt mal eine halbe stunde lang (ich weiß, man könnte auch länger
> suchen) google beauftragt, mir ergbnisse zu javascript-selectboxen
> vorzuzeigen. mein ergebnis ist gleich null.
Was verstehst Du unter einer Selectbox?
Warum nimmst Du nicht ein herkömmliches Select-Element, das
in HTML/Javascript bereits vorhanden ist?
Grüße
Frank
--
Dipl.-Inform. Frank Seitz; http://www.fseitz.de/
Tel: 04103/180301; Fax: -02; Industriestr. 31, 22880 Wedel
Paul Eppner
>Warum nimmst Du nicht ein herkömmliches Select-Element, das
>in HTML/Javascript bereits vorhanden ist?
beiträge weiter oben geschrieben warum ich es so brauche. aber schade, das
garkeiner von den profis drauf geantwortet hat.
gruß, paul
Frank Seitz
>>Was verstehst Du unter einer Selectbox?
>>Warum nimmst Du nicht ein herkömmliches Select-Element, das
>>in HTML/Javascript bereits vorhanden ist?
>
> muß ich das jetzt wirklich nochmal erklären? ich hab's doch erst drei
> beiträge weiter oben geschrieben warum ich es so brauche.
Wenn ich es verstanden hätte, hätte ich nicht gefragt.
> aber schade, das garkeiner von den profis drauf geantwortet hat.
Die haben Dein Anliegen vielleicht auch nicht verstanden.
Martin Kurz
Ja, ich habe dein Problem bisher nicht verstanden. Du hast ein paar Beiträge
zuvor geschrieben, dass du mit Checkboxen arbeiten musst, nicht, warum du der
Meinung bist, mit Checkboxen arbeiten zu müssen. Was am Ende dabei rauskommen
soll, habe ich aus keinem Beitrag hier erkennen können.
Wenn du dich auf einen anderen thread beziehst - du solltest nicht davon
ausgehen, dass irgendein Profi hier Lust hat, sich erst mal alle relevanten
Informationen zusammenzusuchen, um dir helfen zu können.
HTML bietet Multiselect-Boxen (siehe
http://de.selfhtml.org/html/formulare/auswahl.htm#listen_mehrfach). Diese lassen
sich auch über die Tastatur bedienen und sowohl über Tastaur oder Maus lassen
sich damit bequem Mehrfachauswahlen machen.
Wenn du etwas anderes haben willst, dann erkläre bitte (verständlich) was du
erreichen möchtest, wenn es recht komplex ist, kannst du dies auch gerne mit ein
paar zusätzlichen Ascii-Skizzen verdeutlichen oder einen Link zu ein paar
Grafiken oder Screenshots angeben, die zeigen, was du erreichen möchtest.
Aber wenn du dein Problem nicht beschreiben kannst, sollte es dich nicht
wundern, wenn dir niemand bei der Lösung des Problems helfen kann. Ansonsten
musst du dich an den Hellseher deines Vertrauens wenden ;o)
Viele Grüße,
Martin
Daniel Kirsch
> ich habe jetzt mal eine halbe stunde lang (ich weiß, man könnte auch länger
> suchen) google beauftragt, mir ergbnisse zu javascript-selectboxen
> vorzuzeigen. mein ergebnis ist gleich null.
Vielleicht suchst Du mit den falschen Begriffen oder es gibt niemanden,
der seine Lösungen öffentlich anbietet. Etwas in der Art wird aber
sicher schon einmal realisiert worden sein.
> warum eigentlich? bin ich der erste, der sowas gebrauchen kann? allgemein
> scheint es in js immer nur so spielereien zu geben wie uhren und sowas,
> dabei ist js doch zu viel mehr fähig *grübel*
Jau. Oft sind das aber sehr spezielle Anforderungen, die nicht immer
allgemein gebräuchlich sind, oder innerhalb einer kommerziellen
Anwendung Verwendung finden und deshalb nicht öffentlich gemacht werden.
> ich mein, hier gibt es viele profis unter euch. kennt ihr euch nur mit js
> aus und schreibt selber garnicht darin, oder warum gibt es insgesamt nur
> sehr wenig gute js-anwendungen? *fragen über fragen*
JavaScript beschränkt sich nicht auf HokusPokus im Internet sondern
findet inzwischen in vielen Umgebungen seinen Einsatz.
Ich schreibe fast ausschließlich JavaScript basierte Anwendungen. Als
Unterbau dient mir dabei XUL und weitere Mozilla-Technologien. Die
meisten Lösungen die dabei entstehen sind aber für eine Webseite nicht
verwendbar weil entweder erweiterte Rechte benötigt werden oder weil der
Kram im IE nicht unterstützt wird. Die Lösungen die später auch
innerhalb einer Webanwendung eingesetzt werden, sind dabei in eine
komplexe Struktur eingebettet. Mit den Einzelergebnissen kann man
insofern oft wenig anfangen. In unserem Fall werden viele Sachen
dynamisch aus XML-Vorlagen per Laufzeit zu JavaScript-Objekten die
wiederum HTML-Objekte erzeugen und in das aktuelle Dokument einbinden.
Insofern mag es einige Anwendungen geben, in denen Deine Anforderungen
bereits umgesetzt sind. Die Lösungen sind aber dennoch für Dich nicht
von Nutzen.
Aber weshalb macht Du in der Zeit, in der Du hier die Fragen stellst und
lange unter Google nach Lösungen suchst, nicht Deine eigene Lösung? Und
am besten machst Du diese dann öffentlich, sodass der Nächste auf Deiner
Lösung aufbauen kann.
Grüße
Daniel
Paul Eppner
>Ja, ich habe dein Problem bisher nicht verstanden. Du hast ein paar
>Beiträge
>zuvor geschrieben, dass du mit Checkboxen arbeiten musst, nicht, warum du
>der
>Meinung bist, mit Checkboxen arbeiten zu müssen.
ok, das ist ja wenigstens eine antwort :-) ich dachte das spielt keine
rolle. wenn die aussage steht das man damit arbeiten muß - wäre das damit
auch abgeklärt.
>Was am Ende dabei rauskommen
>soll, habe ich aus keinem Beitrag hier erkennen können.
es soll eine benutzerfreundlichere selectbox entstehen.
>HTML bietet Multiselect-Boxen (siehe
>http://de.selfhtml.org/html/formulare/auswahl.htm#listen_mehrfach). Diese
>lassen
>sich auch über die Tastatur bedienen und sowohl über Tastaur oder Maus
>lassen
>sich damit bequem Mehrfachauswahlen machen.
diese kenne ich sehr wohl - nur sind diese wirklich benutzerfreundlich? wenn
man z.b. mit der maus einen eintrag zusätzlich anklicken möchte und man hat
die shift-taste nicht gedrückt sind alle anderen verschwunden. dies finde
ich nicht deppensicher und würde daher gerne einee benutzerfreundlichere
erstellen.
>Wenn du etwas anderes haben willst, dann erkläre bitte (verständlich) was
>du
>erreichen möchtest, wenn es recht komplex ist, kannst du dies auch gerne
>mit ein
>paar zusätzlichen Ascii-Skizzen verdeutlichen oder einen Link zu ein paar
>Grafiken oder Screenshots angeben, die zeigen, was du erreichen möchtest.
ich hoffe, das dies nicht nötig ist und versuche es mit ein paar worten. als
beispiel nehme ich mal phpmyadmin. dies kennt ihr bestimmt alle. jetzt habe
ich auf der übersichtsseite einer datenbank rechts die ganzen db-tabellen.
aus bestimmten gründen wird hier keine multi-selectbox verwendet, sondern
eine html-tabelle mit checkboxen vorne drann. hier kann man nun mit der maus
auswählen welche tabelleen man auswählen möchte und welche nicht. wenn die
liste größer als die aktuelle seite ist muß man immer zwischen scrolleiste
und tabelle wechseln. also mit der maus die scrolleiste nach unten ziehen
und dann wieder die nächsten auswählen. es wäre um einiges
benutzerfreundlicher wenn man einen punkt auswählen könnte und dann mit den
pfeil tasten einfach hoch und runternavigieren könnte. sobald man aus dem
sichtfeld kommt müsste die seite mitscrollen. wnn man einen eintrag
aktivieren/deaktivieren möchte drückt man z.b. einfach die leertaste. dies
ist meiner meinung nach um einiges benutzerfreundlicher und ist mit einer
selectbox nur schwer umzusetzen - da die anderen informationen in der
tabelle mit weiteren links auch sehr wichtig sind.
>Aber wenn du dein Problem nicht beschreiben kannst, sollte es dich nicht
>wundern, wenn dir niemand bei der Lösung des Problems helfen kann.
>Ansonsten
>musst du dich an den Hellseher deines Vertrauens wenden ;o)
ich hoffe, ich konnte es jetzt etwas deutlicher erklären. und würde mich
über weiteres feedback sehr freuen!
gruß, paul
Paul Eppner
>Vielleicht suchst Du mit den falschen Begriffen oder es gibt niemanden, der
>seine Lösungen öffentlich anbietet.
wahrscheinlich :-/
>Etwas in der Art wird aber sicher schon einmal realisiert worden sein.
das denke ich auch, daher werde ich doch noch ein wenig danach suchen...
>In unserem Fall werden viele Sachen dynamisch aus XML-Vorlagen per Laufzeit
>zu JavaScript-Objekten die wiederum HTML-Objekte erzeugen und in das
>aktuelle Dokument einbinden.
das ist jetzt genau die sache, die du mir jetzt gezeigt hast und die ich
auch so umsetze, oder? nur habe ich das letzte leider nicht hinbekommen,
wird aber bestimmt noch :-)
>Aber weshalb macht Du in der Zeit, in der Du hier die Fragen stellst und
>lange unter Google nach Lösungen suchst, nicht Deine eigene Lösung?
weil man das rad ja nicht unbedingt neu erfinden muß.
>Und am besten machst Du diese dann öffentlich, sodass der Nächste auf
>Deiner Lösung aufbauen kann.
das sowieso ;-) daher habe ich mein cms ja auch unter gpl laufen.
gruß & danke, paul
Paul Eppner
>>lange unter Google nach Lösungen suchst, nicht Deine eigene Lösung?
>weil man das rad ja nicht unbedingt neu erfinden muß.
bin nun endlich fündig geworden :-)
<http://www.activewidgets.com/javascript.forum.2052.5/pre-select-the-last-entry.html>
gruß, paul
Martin Kurz
> hallo,
>
>
>>Ja, ich habe dein Problem bisher nicht verstanden. Du hast ein paar
>>Beiträge
>>zuvor geschrieben, dass du mit Checkboxen arbeiten musst, nicht, warum du
>>der
>>Meinung bist, mit Checkboxen arbeiten zu müssen.
>
>
> ok, das ist ja wenigstens eine antwort :-) ich dachte das spielt keine
> rolle. wenn die aussage steht das man damit arbeiten muß - wäre das damit
> auch abgeklärt.
Das Warum spielt eigentlich auch keine Rolle, du hattest nur geschrieben, dass
da stehen würde, warum :o)
> [...]
> ich hoffe, das dies nicht nötig ist und versuche es mit ein paar worten. als
> beispiel nehme ich mal phpmyadmin. dies kennt ihr bestimmt alle. jetzt habe
> ich auf der übersichtsseite einer datenbank rechts die ganzen db-tabellen.
> aus bestimmten gründen wird hier keine multi-selectbox verwendet, sondern
> eine html-tabelle mit checkboxen vorne drann.
Ah, jetzt habe ich (und wahrscheinlich auch einige andere) verstanden, was am
Ende rauskommen soll. Bei einer langen Liste mit Checkboxen (ob die jetzt in
einer Tabelle oder einer Liste stehen, ist erst mal egal, das würde ich von den
sonstigen Daten, die dabei angezeigt werden sollen, abhängig machen) kann man
einfach mit der Tab-Taste zur nächsten (bzw Shift-Tab zur vorigen) springen.
Markieren geht wieder mit Leertaste.
Bei Auswahl einer Checkbox möchtest du aber (neben dem Springen mit der
Tabtaste) noch mit den Pfeiltasten springen können. Hier mal meine
grundsätzlichen Überlegungen zu einer möglichen Umsetzung:
Wenn eine Checkbox selektiert ist, muss ein Eventhandler für die
Pfeil-Hoch-/Pfeil-Runter-Tasten gesetzt werden, der beim Verlassen des Elements
wieder entfernt wird. Dafür kann man die Eventhandler onFocus und onBlur bei den
jeweiligen Elementen nehmen.
Der Eventhandler muss dann rausfinden, welches Element welches Event ausgelöst
hat und dann das vorige/nächste Element anspringen. Dafür gibt es die Funktion
focus().
Wie das dann konkret aussehen müsste, habe ich mir noch nicht überlegt...
Eine andere (einfachere) Möglichkeit, wäre direkt mit onKeyDown in den
Checkboxen zu arbeiten und auf die gewünschten Pfeiltasten zu testen:
<input type="checkbox" name="nameXXX" id="idXXX" onkeydown="upDown(event,
this);">Text
und etwas in der Art (nur mal schnell hingetippt und ungetestet):
// e: event, el: element
function upDown(e, el) {
if (!e)
e = window.event;
if (e.keyCode == 38) {
// Pfeil-Hoch-Taste
var id = this.getAttribute('id');
var number = parseInt(id.substring(2, id.length));
if (number > 0) {
//(falls das erste Element 0 ist, ansonsten halt größer erstes Element)
var prevNumber = number - 1;
var prevId = "id" + prevNumber;
document.getElementById(prevId).focus();
}
} else if (e.keyCode == 40) {
// Pfeil-Runter-Taste - analog zu oben
}
return true;
}
Grüße,
Martin
Paul Eppner
>Checkboxen zu arbeiten und auf die gewünschten Pfeiltasten zu testen:
vielen dank erstmal für deine hilfe! diese variante hab ich schon
durchprobiert, ist aber nicht einsetzbar, da sie nicht mehr funktioniert,
sobald ich den rahmen (auf den ich es begrenzt habe) mit der maus verlasse.
ich brauch aber einen rahmen, da ich auf einer seite mehrere solcher
selectboxen einsetzen werde.
gruß, paul
Martin Kurz
Hier stehe ich wieder auf dem Schlauch... Was meinst du mit Rahmen, Frames oder
scrollbare Divs? Und bedeutet "mit der Maus verlassen" nur die Maus außerhalb
des Rahmens positionieren oder außerhalb klicken (bzw allgemeiner: ein anderes
Element der Seite fokusieren)?
Grüße,
Martin
Paul Eppner
warum? nimm meine aussage einfach wörtlich *gg*
>Was meinst du mit Rahmen, Frames oder
>scrollbare Divs?
es könnte ein frame sein, aber auch ein scrollbares div - egal.
>Und bedeutet "mit der Maus verlassen" nur die Maus außerhalb
>des Rahmens positionieren oder außerhalb klicken (bzw allgemeiner: ein
>anderes
>Element der Seite fokusieren)?
auch hier kann ich beides bejahen - es ist komplett egal. nicht umsonst habe
ich so einen allgemeinen begriff verwendet :-)
gruß, paul
Martin Kurz
Grübel, grübel...
Eine konkrete Lösung habe ich jetzt nicht parat, nur ein paar Vermutungen, wo
die Probleme liegen könnten und wie sie (falls die Überlegungen richtig waren)
eventuell gelöst werden könnten:
Die Elementbezogenen Eventhandler (wie das vorgeschlagene onkeydown)
funktionieren nur, solange das jeweilige Element den Fokus hat, dies sollte
eigentlich unabhängig von der Positionierung des Mauszeigers sein (solange nicht
irgendwohin geklickt wird). Wenn mich nicht alles täuscht, ist es jedoch
möglich, Windows so zu konfigurieren, dass - wenn der Mauszeiger über ein
anderes Element (bspw ein anderer Frame) bewegt wird, der Fokus darauf gelegt wird.
Eine Möglichkeit könnte sein, in allen beteiligten Dokumenten allgemeine
Eventhandler für onkeydown einzuführen und zusätzlich die zuletzt aktive
Checkbox zu speichern. Dann könnte man analog zum vorigen Beispiel die
entsprechende vorige oder folgende Checkbox fokusieren, wenn diese dann
fokusiert ist, sollte auch das An-/Abwählen über die Leertaste wieder
funktionieren. Die zuletzt aktive Checkbox könnte man einfach durch das
onfocus-Event in den Checkboxen speichern.
Soweit mal meine Idee, ob's so klappt, müsste man testen...
Achso, eine Kleinigkeit aus deiner Anfrage habe ich noch vergessen: Das
Scrollen. Das sollte eigentlich kein Problem sein, wenn die jeweilige Checkbox
mit focus() angewählt wird, sollten eigentlich alle Browser zu diesem Element
springen (zumindest ist mir kein Browser bekannt, der das nicht macht).
Grüße,
Martin
Paul Eppner
>Eine konkrete Lösung habe ich jetzt nicht parat, nur ein paar Vermutungen,
>wo
>die Probleme liegen könnten und wie sie (falls die Überlegungen richtig
>waren)
>eventuell gelöst werden könnten:
danke erstmal für deine mühe! bis montag hab ich erstmal keine zeit, dann
geht's aber munter weiter mit testen und so :-)
gruß, paul