Броя HTML състояние на държавата в реално време с CSS
Преброяването е вездесъща задача в уеб приложения. Колко непрочетени имейли имате? Колко задачи са оставени без отметка в списъка със задачи? Колко вкуса на поничка са опаковани в количката за пазаруване? Всички са ключови въпроси, за които потребителите заслужават отговори.
Така че този пост ще ви покаже как да го направите преброяване на двойно посочените елементи, които съставляват по-голямата част от потребителските контроли, като квадратчета за отметка и текстови входове, използване на CSS броячи.
Ти трябва да първо насочете тези държави с CSS, което е възможно чрез псевдокласи и HTML атрибути които ни позволяват да правим точно това. Продължете да експериментирате с идеята и изследвайте различните псевдо-класове, които могат да показват промяната в състоянието на даден елемент, динамично.
Ще започнем с най-простите квадратчета.
1. Отметки
Поставят се отметки “Проверих” състояние, когато те са отметнати. Най- : проверява псевдо-клас показва провереното състояние.
checkbox # 1
checkbox # 2
квадратче # 3
Проверени:
Без отметка:
:: root counter-reset: tickedBoxCount, unTickedBoxCount; input [type = 'checkbox'] counter-increment: unTickedBoxCount; input [type = 'checkbox']: отметнато counter-increment: tickedBoxCount; #tickedBoxCount :: before content: counter (tickedBoxCount); #unTickedBoxCount :: before content: counter (unTickedBoxCount);
Както казах и преди, този случай е много прост. ние задайте два брояча в основния елемент и увеличете всеки за всяко квадратче за съответно две състояния. Стойностите на брояча са след това на определеното място съдържание Имот.
Ако искате да разберете по-добре как работят CSS броячите, погледнете предишния ни пост.
По-долу можете да видите крайния резултат. Когато проверите и махнете отметките от квадратчетата, стойностите на “Проверени” и “непроверен” броячи са променено в реално време.
2. Въвеждане на текст
Можем също да пресметнем колко текстови входа са били попълнени и колко са оставени празни от потребителя. Това решение няма да бъде толкова просто като предишното, защото за разлика от квадратчетата за отметка, въвеждането на текст няма псевдокласове за да маркирате, когато са запълнени.
Така че трябва да намерим алтернативен маршрут. Има псевдоклас показва, когато даден елемент има текст на контейнера; нарича се : Контейнер, показан.
Ако използваме заместители в нашето въвеждане на текст, можем да знаем, когато полето за въвеждане е празно. Това се случва, когато потребителят все още не е въвел нищо в него защото контейнерът ще изчезне, когато това се случи.
Изпълнен:
Empty:
:: root counter-reset: fillInputCount, emptyInputCount; input [type = 'text'] counter-increment: filledInputCount; input [type = 'text']: показан е контейнер counter-increment: emptyInputCount; #filledInputCount :: before content: counter (filledInputCount); #emptyInputCount :: before content: counter (emptyInputCount);
Резултатът е подобен на предишния - двата брояча са автоматично се увеличава и намалява като добавяме или премахваме текст към или от полетата за въвеждане.
3. Подробности
Алтернативните състояния на даден елемент не винаги трябва да се посочват само от псевдокласи. Може да има HTML атрибутите вършат тази работа, както в случая с
Най-
Така, отворен HTML атрибут в елемента. Този атрибут може да бъде насочен към CSS uпеят неговия атрибут селектор.
Q1: въпрос # 1
отговор # 1
В2: въпрос 2
отговор # 2
Q3: въпрос 3
отговор # 3
Отваряне:
Затворен:
:: root counter-reset: openDetailCount, closedDetailCount; детайли counter-increment: closedDetailCount; подробности [open] counter-increment: openDetailCount; #closedDetailCount :: before content: counter (closedDetailCount); #openDetailCount :: before content: counter (openDetailCount);
Резултатът е два CSS брояча в реално време отново: Отворено и затворено.
4. Радио бутони
Преброяването на радио бутоните изисква различна техника. Със сигурност можем да използваме : проверява псевдоклас, който използвахме за отметки. Въпреки това радио бутоните са използвани различно от квадратчетата за отметка.
Радио бутоните са предназначени да бъдат в групи. Потребителят може да избере само един в групата. Всяка група действа като едно цяло. Двете състояния, които групата на радио бутоните може да има, е също Избран е един от бутоните или нито един от тях не е избран.
По този начин не трябва да броим радио бутоните по отделните бутони, а от групи бутони. За да постигнем това, ние използвайте : Тото-на-тип селектор. Ще обясня по-късно; нека първо да видим кода.
радио-1.1 радио-1.2 радио-1.3
радио-2,1 радио-2.2 радио-2,3
радио-2,1 радио-2.2 радио-2,3
Избрано:
Неизбрано:
Ние трябва да задайте същото име към радио бутоните в същата група. Всяка група в горния код има три радио бутона.
:: root counter-reset: selectedRadioCount, unSelectedRadioCount; input [type = 'radio']: nth-of-type (3n) counter-increment: unSelectedRadioCount; input [type = 'radio']: nth-of-type (3n): проверено counter-increment: selectedRadioCount; input [type = 'radio']: не (: nth-of-type (3n)): отметнато counter-increment: unSelectedRadioCount -1 selectedRadioCount; #selectedRadioCount :: before content: counter (selectedRadioCount); #unSelectedRadioCount :: before content: counter (unSelectedRadioCount);
Първите три правила за стила в горния фрагмент са същите като тези, които прилагахме към квадратчетата за отметка, с изключение на, вместо на насочването всеки радио бутон, насочваме последния бутон за избор във всяка група, което е третото в нашия случай (: Тото-на-тип (3N)). Така че, не преброяваме всички радио бутони само по една на група.
Това обаче няма да ни даде правилен резултат в реално време, както ние все още не са дали някакво правило за преброяване на другите два радио бутона в групата. Ако някоя от тях се провери, тя трябва да бъде отчетена и непровереният резултат трябва да намалее едновременно.
Ето защо ние добави -1 стойност след unSelectedRadioCount в последното правило за стил, което е насочено към другите два бутона за избор в група. Когато един от тях е проверен, -1 ще намаляване на непроверен резултат.
Поставянето на графове
Можете да видите само правилния резултат след преброяването е приключило, след като всички елементи, които трябва да бъдат преброени, са обработени. Ето защо трябва да поставим елемента, в който ще покажем броячите само след като елементите се преброяват в изходния HTML код.
Може да не искате да показвате броячите под елементите, но някъде другаде в страницата. В този случай вие трябва да преместите броячите използване на CSS свойства като превеждам, марж, или позиция.
Но моето предложение би било използвайте мрежата CSS така че можете да създадете оформлението на страницата си независимо от реда на елементите в изходния HTML код. Например, лесно можете да създадете мрежа, която поставя броячите над или близо до полетата за въвеждане.
