HTML-statuswijzigingen in realtime met CSS tellen
Tellen is een alomtegenwoordige taak in webapplicaties. Hoeveel ongelezen e-mails heb je? Hoeveel taken worden niet aangevinkt in uw takenlijst? Hoeveel soorten donut zijn in de winkelwagen ingepakt? Dit zijn allemaal cruciale vragen waarvoor gebruikers antwoorden verdienen.
Dus dit bericht zal je laten zien hoe tel bi-vermelde elementen, die de meerderheid van gebruikersbedieningen vormen, zoals selectievakjes en tekstinvoer, CSS-tellers gebruiken.
Je moet target die staten eerst met CSS, wat mogelijk is door middel van pseudo-klassen en HTML-kenmerken die ons in staat stellen om precies dat te doen. Ga je gang en experimenteer met het idee en verken de verschillende pseudo-klassen die de verandering in een staat van een element kunnen aangeven, dynamisch.
We beginnen met de eenvoudigste selectievakjes.
1. Selectievakjes
Checkboxes gaan naar binnen “gecontroleerd” aangeven wanneer ze zijn aangevinkt. De : aangevinkt pseudo-class geeft de gecontroleerde status aan.
selectievakje # 1
selectievakje # 2
selectievakje # 3
gecontroleerd:
Niet aangevinkt:
:: root counter-reset: tickedBoxCount, unTickedBoxCount; invoer [type = 'checkbox'] counter-increment: unTickedBoxCount; input [type = 'checkbox']: checked counter-increment: tickedBoxCount; #tickedBoxCount :: before content: counter (tickedBoxCount); #unTickedBoxCount :: before content: counter (unTickedBoxCount);
Zoals ik al eerder zei, deze zaak is heel eenvoudig. Wij stel twee tellers in op het root-element en verhoog elk voor elk selectievakje voor de twee bijbehorende statussen. De tellerwaarden zijn dan weergegeven op een aangewezen plaats met inhoud eigendom.
Als je beter wilt begrijpen hoe CSS-tellers werken, bekijk onze vorige post.
Hieronder ziet u het eindresultaat. Wanneer u de selectievakjes inschakelt en uitschakelt, worden de waarden van de “gecontroleerd” en “ongehinderd” tellers zijn gewijzigde real-time.
2. Tekstinvoer
We kunnen ook tellen hoeveel tekstinvoer zijn gevuld en hoeveel zijn leeg gelaten door de gebruiker. Deze oplossing zal niet zo eenvoudig zijn als de vorige, omdat, in tegenstelling tot selectievakjes, tekstinvoer heeft geen pseudo-klassen markeren wanneer ze zijn gevuld.
We moeten dus een alternatieve route vinden. Er is een pseudo-klasse die geeft aan wanneer een element tijdelijke tekst heeft; het heet :-Placeholder weergegeven.
Als we tijdelijke aanduidingen gebruiken in onze tekstinvoer, kunnen we weten wanneer het invoerveld leeg is. Dit gebeurt wanneer de gebruiker heeft er nog niets in getypt omdat de tijdelijke aanduiding zal verdwijnen wanneer dat gebeurt.
gevuld:
Leeg:
:: root counter-reset: filledInputCount, emptyInputCount; invoer [type = 'tekst'] counter-increment: filledInputCount; invoer [type = 'tekst']: placeholder-shown counter-increment: emptyInputCount; #filledInputCount :: before content: counter (filledInputCount); #emptyInputCount :: before content: counter (emptyInputCount);
Het resultaat is vergelijkbaar met de vorige - de twee tellers zijn automatisch verhoogd en verlaagd als we tekst toevoegen aan of verwijderen uit de invoervelden.
3. Details
Alternatieve toestanden van een element hoeven niet altijd alleen door pseudo-klassen te worden aangegeven. Er zou kunnen zijn HTML-attributen voor die taak, zoals in het geval van de
De
Zo, Open HTML-kenmerk in het element. Dit kenmerk kan worden getarget in CSS uzing zijn attribuutselector.
Q1: vraag # 1
Antwoord 1
Vraag 2: vraag # 2
antwoord # 2
Vraag 3: vraag # 3
antwoord # 3
Open:
Gesloten:
:: root counter-reset: openDetailCount, closedDetailCount; details counter-increment: closedDetailCount; details [open] counter-increment: openDetailCount; #closedDetailCount :: before content: counter (closedDetailCount); #openDetailCount :: before content: counter (openDetailCount);
Het resultaat is twee real-time CSS-tellers nogmaals: open en gesloten.
4. Keuzerondjes
Het tellen van keuzerondjes vereist een andere techniek. We kunnen de. Zeker gebruiken : aangevinkt pseudo-klasse die we hebben gebruikt voor selectievakjes. Echter, radioknoppen zijn anders gebruikt dan selectievakjes.
Keuzerondjes zijn bedoeld om in groepen te zijn. De gebruiker kan slechts één binnen een groep selecteren. Elke groep fungeert als een enkele eenheid. De twee toestanden die een groep keuzerondjes kan hebben is ook een van de knoppen is geselecteerd of geen van hen is geselecteerd.
We moeten dus geen keuzerondjes tellen per afzonderlijke knop, maar door knopgroepen. Om dat te bereiken, wij gebruik maken van de : N-of-type keuzeschakelaar. Ik zal het later uitleggen; laten we eerst de code zien.
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
Gekozen:
Niet-geselecteerd:
We moeten wijs dezelfde naam toe naar de keuzerondjes in dezelfde groep. Elke groep in de bovenstaande code heeft drie keuzerondjes binnenin.
:: root counter-reset: selectedRadioCount, unSelectedRadioCount; invoer [type = 'radio']: nth-van-type (3n) counter-increment: unSelectedRadioCount; invoer [type = 'radio']: nth-type (3n): aangevinkt counter-increment: selectedRadioCount; input [type = 'radio']: not (: nth-of-type (3n)): checked counter-increment: unSelectedRadioCount -1 selectedRadioCount; #selectedRadioCount :: before content: counter (selectedRadioCount); #unSelectedRadioCount :: before content: counter (unSelectedRadioCount);
De eerste drie stijlregels in het bovenstaande fragment zijn dezelfde als die we hebben toegepast op selectievakjes, behalve in plaats van targeting elk Radio knop, we richten ons op het laatste keuzerondje in elke groep, welke de derde is in ons geval (: N-of-type (3n)). We tellen dus niet alle keuzerondjes, maar slechts één per groep.
Dit geeft ons echter niet het juiste realtime resultaat, net als wij heb nog geen regel gegeven voor het tellen van de andere twee keuzerondjes in de groep. Als een van deze is aangevinkt, moet deze worden geteld en moet het niet-gecontroleerde resultaat op hetzelfde moment worden verlaagd.
Dit is waarom wij Voeg een ... toe -1 waarde na unSelectedRadioCount in de laatste stijlregel die de andere twee keuzerondjes in een groep target. Wanneer een van hen is aangevinkt, -1 zullen verlaag het niet-gecontroleerde resultaat.
De plaatsing van graven
U kunt alleen het juiste resultaat zien nadat het tellen is voltooid, dat wil zeggen nadat alle elementen die moeten worden geteld, zijn verwerkt. Daarom moeten we het element plaatsen waarbinnen de tellers worden weergegeven alleen na de elementen die moeten worden geteld in de HTML-broncode.
Mogelijk wilt u de tellers niet onder de elementen weergeven, maar ergens anders op de pagina. In dit geval, jij moeten de tellers verplaatsen met CSS-eigenschappen zoals vertalen, marge, of positie.
Maar mijn suggestie zou zijn om gebruik het CSS-raster zodat je de layout van je pagina kunt maken onafhankelijk van de volgorde van de elementen in de HTML-broncode. U kunt bijvoorbeeld eenvoudig een raster maken dat de tellers boven of naast de invoervelden plaatst.
