Benutzer:JürgenB
Informationen zum Autor
- Name:
- Jürgen Berkemeier
- E-Mail:
- juergen@berkemeier.eu
- Homepage:
- https://www.j-berkemeier.de
Inhaltsverzeichnis
- 1 Custom-Element mit Min-Max-Schieberegler
- 2 Custom-Element mit synchronisierten Range- und Number-Inputs
- 3 Vergleich der Farbmodelle RGB, HSL und OKLAB
- 4 Komfort-Bildwechsler
- 5 Bubbling, Capturing und stopPropagation
- 6 Tutorial Drag 'n Drop
- 7 Tutorial Tabellen dynamisch sortieren
- 8 Tutorial Mouse and More
- 9 Testseite für Maus-, Touch- und Pointerevents
- 10 Testseite Multipointerevents
- 11 Blog-Artikel Einstieg in Leaflet
- 12 Blog-Artikel Einbinden einer OSM-Karte als Beispiel für Custom Elements
Custom-Element mit Min-Max-Schieberegler
Für die Eingabe von zwei Zahlen, z.B. einem oberen und einem unteren Wert, gibt es im HTML kein Element. In diesem Beispiel wird ein Custom Element für einen Min-Max-Schieberegler angelegt.
Das HTML
Das HTML besteht aus zwei Inputs mit type="range" mit Labeln, und einem Output zur Anzeige der aktuellen Werte. Die Elemente werden noch in ein Wrapper-Div gelegt.
Das CSS
Per CSS wird das Wrapper-Div relativ und das Output-Element absolut positioniert. So kann das Output dann oben mittig positioniert werden. Um die Inputs übereinander zu legen, werden sie zu Grid-Elemente im Wrapper gemacht und mit "grid-area: 1 / 1 / 1 / 1;" angeordnet. Das weitere CSS hat die Aufgabe, Teile der Range-Inputs auszublenden bzw. nach eigenen Vorgabe zu gestalten. Da die Label für die Inputs nur für auf assistive Techniken angewiesene Besucher benötigt werden, werden sie visuell ausgeblendet. Die Label erhalten Default-Texte.
Das Custom Element
Das Custom Element erhält den Namen "double-range-input". In der Definitionsklasse werden HTML und CSS ins Schatten-DOM gelegt. Die Attribute min, max und step werden an die beiden Inputs übergeben. Das value-Attribut enthält zwei durch Komma getrennte Zahlen, den Min- und den Max-Wert. Diese Werte werden bei dem jeweiligen Input als value gesetzt. Als weiteres Attribut gibt es showvalues, das die Werte ever, active und never haben darf. Damit wird gesteuert, wann die Eingestellte Werte im Output-Element angezeigt werden. Die Attribute können mit setAttribute gesetzt und mit getAttribute ausgelesen werden. Zusätzlich gibt es für alle Attribute Setter und Getter. Die Default-Texte der unsichtbaren Label können über Slot-Elemente geändert werden. Beim Bewegen der Schieber wird darauf geachtet, das der Min-Regler immer links vom Max-Reger liegt. Das Custom-Element unterstützt das Input- und das Change-Event. Das Aussehen des Custom-Elements kann über Custom Properties verändert werden, siehe hierzu das Beispiel.
Custom-Element mit synchronisierten Range- und Number-Inputs
Formulare/Eingabe_von_Zahlen#Custom-Element_mit_synchronisierten_Range-_und_Number-Inputs
Vergleich der Farbmodelle RGB, HSL und OKLAB
Vergleich der Farbmodelle
Komfort-Bildwechsler
JavaScript/Tutorials/Web_Animations/Komfort-Bildwechsler
Bubbling, Capturing und stopPropagation
JavaScript/Tutorials/DOM/Ereignisverarbeitung#Bubbling.2C_Capturing_und_stopPropagation
Tutorial Drag 'n Drop
JavaScript/Tutorials/Drag_and_Drop
Tutorial Tabellen dynamisch sortieren
JavaScript/Tutorials/Tabellen_dynamisch_sortieren
Tutorial Mouse and More
JavaScript/Tutorials/Mouse and More
Testseite für Maus-, Touch- und Pointerevents
Testseite für Maus-, Touch- und Pointerevents
Testseite für Maus-, Touch- und Pointerevents
Testseite Multipointerevents
Testseite Multipointerevents
Blog-Artikel Einstieg in Leaflet
https://blog.selfhtml.org/2019/jan/13/einstieg-in-leaflet
Blog-Artikel Einbinden einer OSM-Karte als Beispiel für Custom Elements
https://blog.selfhtml.org/2020/dec/03/einbinden-einer-osm-karte-als-beispiel-fuer-custom-elements
