Ich werde mit einem kleinen Hintergrundbericht beginnen, der hoffentlich dazu beiträgt, dass meine Frage mehr Sinn ergibt.
Ich entwickle eine Anwendung für ein Fernsehgerät. Das Konzept ist einfach und funktioniert im Grunde so, dass ein Browser über die Videoebene des Fernsehers gelegt wird. Da es sich um einen Fernseher handelt, gibt es keine Maus oder ein zusätzliches Zeigegerät. Die gesamte Interaktion erfolgt über eine Fernbedienung. Daher muss der Benutzer in der Lage sein, visuell zu erkennen, auf welches Element er sich gerade konzentriert. Um anzuzeigen, dass ein Element fokussiert ist, füge ich derzeit ein farbiges transparentes Bild über dem Element an, um den Fokus anzuzeigen.
Wenn nun ein Benutzer die Pfeiltasten drückt, muss ich darauf reagieren, indem ich die richtigen Elemente entsprechend der gedrückten Taste in den Mittelpunkt stelle. Also, wenn der Pfeil nach unten gedrückt wird, muss ich den Fokus auf das nächste fokussierbare Element im DOM-Baum (die ein Kind oder Geschwister sein kann), und wenn sie den Pfeil nach oben drücken, muss ich auf das vorherige Element zu reagieren. Dies würde im Wesentlichen die räumliche Navigation in einem Browser simulieren.
Ich setze derzeit ein Attribut (focusable=true) auf alle DOM-Elemente, die in der Lage sein sollten, den Fokus zu erhalten. Was ich tun möchte, ist das vorherige oder nächste fokussierbare Element (d.h. Attribut focusable=true) zu bestimmen und den Fokus auf das Element anzuwenden.
Ich hatte gehofft, den DOM-Baum zu durchlaufen, um die nächsten und zuvor fokussierbaren Elemente zu bestimmen, aber ich bin nicht sicher, wie man dies in JQuery oder im Allgemeinen durchführen.
Ich war geneigt zu versuchen, die JQuery Baum travesal Methoden wie next(), prev(), etc. Welchen Ansatz würden Sie nehmen, um diese Art von Problem zu lösen?
Gracias
