Nachschlageliste mit Highlight-Balken
Tom
- dhtml
Mahlzeit ForumerInnen,
mit fehlen im Moment sämtliche Ideen, dabei wollte ich meine Aufgabe heute erledigen...
Es muss eine Nachschlageliste mittels MySQL erzeugt werden, in der man blättern kann. Innerhalb der Liste soll man mit der Dn-Arrow- und der Up-Arrow-Taste den aktuellen Datensatz auswählen können. Die Zeile dieses Datensatzes soll dann in einer anderen Farbe erscheinen. Außerdem muss man Zugriff z.B. auf die ID des Satzes haben, um dann eine Detailanzeige einleiten zu können.
Wie kann ich nun mit CSS, JavaScript &Co. sowas realisieren. Ist das überhaupt möglich?
Ich habe da an ein Grid von input-feldern gedacht (readonly), durch die man irgendwie den Highlightbalken bewegen kann.
Ich hoffe, irgend jemand von Euch hat ne Idee.
LG
Tom
hallo
mit fehlen im Moment sämtliche Ideen, dabei wollte ich meine Aufgabe heute erledigen...
[...]
Ich hoffe, irgend jemand von Euch hat ne Idee.
die erste idee wäre schon mal, den source zu posten, den du schon hast.
und die zweite, deine ansätze zur keyboard-navigation zu zeigen.
was heist "durchblättern"? mehrere mit dhtml simulierte "seiten"?
ansonsten klingt das ganze eher nach einem auftrag und da kann ich dich an fastix verweisen.
freundl. grüsse raik
Hi Raik,
bisher stochere ich noch mit dem Finger in ...
Naja, Auftrag von mir selbst. Ich will das auch selber lösen. Bisher weiß ich aber nicht, wie ich eine _Bildschirmliste_ erzeugen kann, in der der ich dann durch die Cursor-Dn und Curor-Up Tasten einen einzelnen Datensatz highlighten kann.
Ums nochmal anders zu sagen: Eine Liste bekomme ich schon hin und blättern kann ich auch (also 1.Liste = Sätze von 0 bis 10, 2. Liste = Sätze von 10 bis 20, also immer 11 Datensätze...) Und bisher kann ich einen Satz auswählen, indem ich ihn als Link darstelle, oder ein Radio-Elemt davor anklicke oder so.
Ich möchte aber mit der Tastatur durch die Liste browsen und den farblich markierten Satz dann mit Return auswählen können.
mir fehlen im Moment sämtliche Ideen, dabei wollte ich meine Aufgabe heute erledigen...
Und natürlich soll es bei verschiedenen Browsern möglichst einheitlich funktionieren.
Ich denke, mein Problem liegt bei der Bewegung des Focus durch die Objekte und festzustellen, welches Objekt den Focus hat und das dann farblich zu kennzeichnen und das ganze auch noch mit zwei bestimmten Tasten. Und wenn man dann mit der Maus draufclickt, sollte es auch noch funktionieren.
Grüße
Tom
hallo
Ich denke, mein Problem liegt bei der Bewegung des Focus durch die Objekte und festzustellen, welches Objekt den Focus hat und das dann farblich zu kennzeichnen und das ganze auch noch mit zwei bestimmten Tasten. Und wenn man dann mit der Maus draufclickt, sollte es auch noch funktionieren.
1. eine zeile farblich zu markieren entspricht der änderung der hintergrundfarbe der tabellenzeile.
2. das navigieren per keyboard lässt sich mit eventhandlern (z.b. "onKeyUp()" ) umsetzen. die überwachung dieser ereignisse kannst du mit "captureEvents()" aktivieren.
3. auch das clicken mit der maus in ein element (z.b. "tr") lässt sich über diese handler abfragen.
4. den jeweils ausgewählten datensatz würde ich in einer variable speichern und beim drücken der enter-taste als parameter an den server übertragen.
5. den einzelnen datensätzen = zeilen würde ich z.b. die id des datensatzes in der datenbank als eindeutige id mit auf den weg geben. darüber lassen sich dann auch die einzelnen zeilen ansprechen.
all das steht in selfhtml. ich habe leider nicht die zeit, dir das alles herauszusuchen aber das wirst du ja auch selber schaffen, oder? ;-)
achte darauf, dass deine seite auch ohne javascript benutzbar bleibt, wenn du sie öffentlich zugänglich machen willst.
freundl. grüsse, raik
ps: als kleine anregung vielleicht noch http://dhtmlgrid.sourceforge.net (heisser tip!)
Hi Raik,
- eine zeile farblich zu markieren entspricht der änderung der hintergrundfarbe der tabellenzeile.
Ja, das ist klar und das krieg ich irgendwie hin. Sinnvollerweise werde ich dann wohl mit DIVs oder Listen arbeiten.
- das navigieren per keyboard lässt sich mit eventhandlern (z.b. "onKeyUp()" ) umsetzen. die überwachung dieser ereignisse kannst du mit "captureEvents()" aktivieren.
Gehjt denn captureEvents() auch bei MSIE?
- auch das clicken mit der maus in ein element (z.b. "tr") lässt sich über diese handler abfragen.
Aber wie bekomme ich raus, in welchen geklickt wurde. Muss ich für jeden einen eigenen Eventhandler generieren lassen?
- den jeweils ausgewählten datensatz würde ich in einer variable speichern und beim drücken der enter-taste als parameter an den server übertragen.
Ja, das würde ich als (hidden-)Postvariable an den Server senden
- den einzelnen datensätzen = zeilen würde ich z.b. die id des datensatzes in der datenbank als eindeutige id mit auf den weg geben. darüber lassen sich dann auch die einzelnen zeilen ansprechen.
Das habe ich schon durchdacht und bin auf die Idee gekommen, das die Postitionsnummer in der Liste mit Hilfe der Session umgesetzt wird in die ID. Für Datenmanipulation leite ich kleine Daten aus dem Browser direkt in die Abfrage weiter. Alternativ könnte man allerdings auch das Set der in der Liste befindlichen IDs in der Session speichern und inSet() (pseudo) abfragen.
all das steht in selfhtml. ich habe leider nicht die zeit, dir das alles herauszusuchen aber das wirst du ja auch selber schaffen, oder? ;-)
Das solltest Du auch gar nicht. Irgendwie war ich heute früh nur ziemlich leer im Kopf und hoffte auf eine Antwort wie diese (roter Faden) Dabei habe ich gestern gar nix getrunken (Allo mein ich). Muss wohl am Wetter liegen.
achte darauf, dass deine seite auch ohne javascript benutzbar bleibt, wenn du sie öffentlich zugänglich machen willst.
In diesem Fall darf si sogar nur von autorisierten Usern benutzt werden und die haben dann eine definierte Systemumgeben.
Erstmal herzlichen Dank.
Bleibt jetzt die Frage mit onKeyPress() und captureEvents(). Das pack ich mal als erstes an.
Grüße
Tom
hallo
Gehjt denn captureEvents() auch bei MSIE?
ja, das gehjt. ;-)
schau dir dazu das beispiel an.
Bleibt jetzt die Frage mit onKeyPress() und captureEvents(). Das pack ich mal als erstes an.
http://dhtmlgrid.sourceforge.net
grüsse, raik
Hallo Raik,
vielen Dank, Du bist ein Schatz. Danach habe ich gesucht.
Tom