Web API Kochbuch

Kapitel 13. UI-Elemente

Diese Arbeit wurde mithilfe von KI übersetzt. Wir freuen uns über dein Feedback und deine Kommentare: [e-mail]

Einführung

Moderne Browser haben einige leistungsstarke integrierte UI-Elemente, die du in deiner App verwenden kannst. Diese UI-Komponenten erforderten früher Bibliotheken von Drittanbietern (oder du konntest deine eigenen erstellen).

Dialoge

Pop-up-Dialoge sind eine wichtige Stütze vieler Apps, denn sie geben Feedback und fordern zur Eingabe auf. Es gibt unzählige Dialogbibliotheken, und du kannst auch deine eigenen erstellen. Moderne Browser haben dies mit dem Element <dialog> bereits für dich getan. Das ist ein Pop-up-Dialog mit einem Hintergrund, der den Rest der Seite verdeckt. Mit ein wenig CSS kannst du sowohl den Hintergrund als auch den Dialog mit Stilen versehen. Standardmäßig ist das Dialogfeld nur eine Box, die sich öffnet und den Hintergrund verdeckt. Es liegt an dir, einen Titel, Schaltflächen und andere Inhalte hinzuzufügen.

Manche Dialoge enthalten mehrere Schaltflächen, und du möchtest je nach gewählter Option unterschiedlichen Code ausführen. Ein Bestätigungsdialog könnte zum Beispiel die Schaltflächen Bestätigen und Abbrechen enthalten. Auch das musst du selbst regeln, indem du den Schaltflächen Click-Event-Listener hinzufügst. In jedem Ereignis-Listener kannst du den Dialog schließen, indem du close aufrufst. Die Methode close ist eine integrierte Methode des Dialogs, die ein optionales Argument akzeptiert, ...