Paradies Für Designer Und Entwickler

Zählen HTML-Statusänderungen in Echtzeit mit CSS

Das Zählen ist eine allgegenwärtige Aufgabe in Webanwendungen. Wie viele ungelesene E-Mails haben Sie? Wie viele Aufgaben sind in Ihrer To-Do-Liste nicht aktiviert? Wie viele Donutaromen sind im Warenkorb verpackt? All dies sind entscheidende Fragen, für die Benutzer Antworten verdienen.

In diesem Beitrag erfahren Sie, wie Sie mit CSS-Zählern zweistufige Elemente zählen, die die meisten Benutzersteuerelemente wie Kontrollkästchen und Texteingaben ausmachen .

Sie müssen diese Zustände zuerst mit CSS adressieren, was mittels Pseudo-Klassen und HTML-Attributen möglich ist, die uns erlauben, genau das zu tun. Gehen Sie voran und experimentieren Sie mit der Idee und erforschen Sie die verschiedenen Pseudoklassen, die die Veränderung eines Zustands eines Elements dynamisch anzeigen können.

Wir beginnen mit den einfachsten Checkboxen.

1. Checkboxen

Checkboxen gehen in den Status "Checked", wenn sie angekreuzt sind. Die Pseudo-Klasse :checked gibt den aktivierten Status an .

 Kontrollkästchen # 1 
 Kontrollkästchen # 2 
 Kontrollkästchen # 3 

Geprüft: 
Deaktiviert:

 :: root {counter-reset: tickedBoxCount, unTickedBoxCount; } input [type = 'checkbox'] {counter-increment: unTickedBoxCount; } input [type = 'checkbox']: checked {counter-increment: tickedBoxCount; } #tickedBoxCount :: before {content: counter (tickedBoxCount); } #unTickedBoxCount :: before {content: counter (unTickedBoxCount); }

Wie ich schon sagte, ist dieser Fall sehr einfach. Wir setzen zwei Zähler am Wurzelelement und erhöhen jedes für jedes Kontrollkästchen für seine zwei Zustände. Die Zählerwerte werden dann an einer bestimmten Stelle unter Verwendung der content angezeigt .

Wenn Sie besser verstehen möchten, wie CSS-Zähler funktionieren, werfen Sie einen Blick auf unseren vorherigen Beitrag.

Unten sehen Sie das Endergebnis. Wenn Sie die Kontrollkästchen aktivieren und deaktivieren, werden die Werte der Zähler "Checked" und "Unchecked" in Echtzeit geändert .

2. Texteingaben

Wir können auch zählen, wie viele Texteingaben ausgefüllt wurden und wie viele vom Benutzer leer gelassen wurden. Diese Lösung wird nicht so einfach wie die vorherige sein, da Texteingaben im Gegensatz zu Kontrollkästchen keine Pseudoklassen aufweisen, die beim Füllen markiert werden.

Also müssen wir eine alternative Route finden. Es gibt eine Pseudo-Klasse, die anzeigt, wenn ein Element Platzhaltertext hat ; es heißt :placeholder-shown .

Wenn wir in unserer Texteingabe Platzhalter verwenden, wissen wir, wann das Eingabefeld leer ist. Dies geschieht, wenn der Benutzer noch nichts eingegeben hat, weil der Platzhalter verschwindet, wenn das passiert.





Gefüllt: 
Leer:

 :: root {counter-reset: filledInputCount, emptyInputCount; } input [type = 'text'] {counter-increment: filledInputCount; } input [type = 'text']: Platzhalter-Darstellung {counter-increment: emptyInputCount; } #filledInputCount :: before {content: counter (filledInputCount); } #emptyInputCount :: vor {content: counter (emptyInputCount); }

Das Ergebnis ist ähnlich dem vorherigen - die beiden Zähler werden automatisch erhöht und erniedrigt, wenn wir Text zu den Eingabefeldern hinzufügen oder daraus entfernen.

3. Details

Alternative Zustände eines Elements müssen nicht immer nur durch Pseudoklassen angegeben werden. Es könnte HTML-Attribute geben, die diesen Job ausführen, wie im Falle der

Element.

Das

element zeigt den Inhalt seiner

Kindelement . Wenn der Benutzer darauf klickt, werden andere Inhalte der

Element wird sichtbar . Beachten Sie, dass

Element muss immer unter den Kindern von

Damit,

hat zwei Zustände : offen und geschlossen. Der offene Status wird durch das Vorhandensein des open HTML-Attributs im Element angezeigt. Dieses Attribut kann in CSS mit seinem Attributselektor gezielt eingesetzt werden.

 Q1: Frage # 1 
Antwort 1
 Q2: Frage # 2 
antwort # 2
 Q3: Frage # 3 
Antwort # 3


Öffnen: 
Geschlossen:

 :: root {counter-reset: openDetailCount, closedDetailCount; } Details {counter-increment: closedDetailCount; } Details [öffnen] {counter-increment: openDetailCount; } #closedDetailCount :: before {content: counter (closedDetailCount); } #openDetailCount :: before {content: counter (openDetailCount); }

Das Ergebnis sind wieder zwei Echtzeit-CSS-Zähler : Open und Closed.

4. Optionsfelder

Das Zählen von Radio-Buttons erfordert eine andere Technik. Wir könnten sicherlich die Pseudo-Klasse :checked verwenden, die wir für Checkboxen verwendet haben. Die Optionsschaltflächen werden jedoch anders als die Kontrollkästchen verwendet .

Optionsfelder sollen in Gruppen sein . Der Benutzer kann nur einen innerhalb einer Gruppe auswählen. Jede Gruppe agiert als eine Einheit. Die zwei Zustände, die eine Optionsfeldgruppe haben kann, ist entweder eine der ausgewählten Schaltflächen oder keine von ihnen ausgewählt sind .

Daher sollten wir Radio-Buttons nicht nach einzelnen Buttons, sondern nach Button-Gruppen zählen . Um dies zu erreichen, verwenden wir den :nth-of-type Selektor . Ich werde es später erklären; Lass uns zuerst den Code sehen.

 Radio-1.1  Radio-1.2  Radio-1.3 
 Radio 2.1  Radio-2.2  Radio-2.3 
 Radio 2.1  Radio-2.2  Radio-2.3 

Ausgewählt: 
Nicht ausgewählt:

Wir müssen den Optionsfeldern derselben Gruppe denselben Namen zuweisen . Jede Gruppe im obigen Code enthält drei Optionsfelder.

 :: root {counter-reset: selectedRadioCount, unSelectedRadioCount; } input [type = 'radio']: nth-of-type (3n) {Zähler-Inkrement: unSelectedRadioCount; } input [type = 'radio']: nth-of-type (3n): geprüft {counter-increment: selectedRadioCount; } input [type = 'radio']: nicht (: nth-of-type (3n)): überprüft {counter-increment: unSelectedRadioCount -1 selectedRadioCount; } #selectedRadioCount :: before {content: counter (selectedRadioCount); } #unSelectedRadioCount :: before {content: counter (unSelectedRadioCount); }

Die ersten drei Stilregeln in dem obigen Snippet sind die gleichen wie die, die wir auf die Checkboxen angewendet haben, außer dass wir nicht auf jeden Radio Button zielen, sondern auf den letzten Radio Button in jeder Gruppe, den dritten in unserem Fall ( :nth-of-type(3n) ). Wir zählen also nicht alle Radiobuttons, sondern nur einen pro Gruppe .

Dies gibt uns jedoch kein korrektes Echtzeitergebnis, da wir noch keine Regel zum Zählen der anderen zwei Radiobuttons in der Gruppe angegeben haben . Wenn einer von ihnen aktiviert ist, sollte er gezählt werden und das ungeprüfte Ergebnis sollte gleichzeitig sinken.

Deshalb fügen wir in der letzten unSelectedRadioCount, die auf die anderen zwei Optionsfelder in einer Gruppe unSelectedRadioCount , einen Wert -1 nach unSelectedRadioCount . Wenn einer von ihnen aktiviert ist, verringert -1 das ungeprüfte Ergebnis .

Die Platzierung von Grafen

Sie können nur dann das korrekte Ergebnis sehen, nachdem die Zählung beendet wurde, dh nachdem alle Elemente, die gezählt werden sollen, verarbeitet wurden. Deshalb müssen wir das Element, in dem wir die Zähler anzeigen, erst nach den Elementen platzieren, die im HTML-Quellcode gezählt werden sollen.

Sie möchten die Zähler möglicherweise nicht unter den Elementen, sondern irgendwo auf der Seite anzeigen. In diesem Fall müssen Sie die Zähler mithilfe von CSS-Eigenschaften wie " translate, " margin oder " position .

Aber mein Vorschlag wäre, das CSS-Grid zu verwenden, damit Sie das Layout Ihrer Seite unabhängig von der Reihenfolge ihrer Elemente im HTML-Quellcode erstellen können . Sie können beispielsweise einfach ein Raster erstellen, bei dem die Zähler über oder neben den Eingabefeldern platziert werden.

Wie man einen animierten SVG Tacho macht

Ein Messgerät ist ein Werkzeug, das visuell einen Wert innerhalb eines bestimmten Bereichs anzeigt. In Computern verwendet ein "Speicherplatzanzeiger" ein Messgerät, um zu zeigen, wie viel Speicherplatz vom verfügbaren Speicherplatz belegt ist. Messgeräte haben Zonen oder Regionen über ihre Reichweite hinweg, die jeweils durch ihre eigene Farbe unterschieden werden. In

(Tech- und Design-Tipps)

JUMP Cable: Ein intelligentes Ladekabel, das gleichzeitig als Batterie dient

Einer der größten Nachteile von Smartphones ist ihre Akkulaufzeit. Das ist das einzige Hindernis für ständige Konnektivität, und während die vielen schweren Batteriegehäuse und sperrigen Powerbanks Ihnen helfen können, Ihr Smartphone mit Strom zu versorgen, gibt es manchmal mehr Kopfschmerzen (denken Sie daran, dass sie separat aufgeladen werden müssen), als wenn Sie Ihr Smartphone behalten in Betrieb.Wenn Sie

(Tech- und Design-Tipps)

Interessante Artikel

Wie Amazons neues Fire-OS-Smartphone die Art und Weise ändert, wie wir einkaufen

Supercharge Siri zur Steuerung von Drittanbieter-Apps mit GoogolPlex

Fintech: 7 Möglichkeiten, die Finanzen mit Tech eine Umgestaltung bekommt

Sideload iOS Apps mit iEmulatoren [No Jailbreak]