Цоунт ХТМЛ Стате Промени Реал-Тиме са ЦСС-ом

Бројање је свеприсутан задатак у веб апликацијама. Колико непрочитаних е-порука имате? Колико је задатака неозначено на вашој листи задатака? Колико је окуса крофни у врећама за куповину? Сви су кључна питања на која корисници заслужују одговоре.

Дакле, овај пост ће вам показати како избројати елементе који се изричу, који чине већину корисничких контрола, као што су потврдни оквири и уноси текста, помоћу ЦСС бројача.

Морате да прво циљати те државе са ЦСС-ом, што је могуће путем псеудо-класе и ХТМЛ атрибути то нам дозвољава да урадимо управо то. Идите и експериментишите са идејом и истражите различите псеудо-класе које могу указати на промену стања елемента, динамички.

Почећемо са најједноставнијим, квадратићима.

1. Цхецкбокес

Потврдите поља за потврду “цхецк” наведите када су откуцани. Тхе : цхецкед псеудо-класа означава стање провјере.

  цхецкбок # 1
  цхецкбок # 2
  цхецкбок # 3
 
Цхецкед:  
Непровјерено:

 :: роот цоунтер-ресет: тицкедБокЦоунт, унТицкедБокЦоунт;  инпут [типе = 'цхецкбок'] цоунтер-инцремент: унТицкедБокЦоунт;  инпут [типе = 'цхецкбок']: означено цоунтер-инцремент: тицкедБокЦоунт;  #тицкедБокЦоунт :: бефоре цонтент: цоунтер (тицкедБокЦоунт);  #унТицкедБокЦоунт :: бефоре цонтент: цоунтер (унТицкедБокЦоунт);

Као што сам већ рекао, овај случај је врло једноставан. Ми поставите два бројача на коријенски елемент и увећајте сваки за сваки цхецкбок за своја два стања, респективно. Вредности бројача су тада приказано на одређеном месту користећи садржаја својство.

Ако желите боље разумјети како ЦСС бројачи функционишу, погледајте наш претходни пост.

Испод можете видјети коначни резултат. Када потврдите и поништите потврдне оквире, вредности “Цхецкед” и “Унцхецкед” бројачи су у реалном времену.

2. Уноси текста

Можемо да рачунамо и колико уноса текста су попуњена и колико су остављени празни од стране корисника. Ово решење неће бити тако једноставно као претходно, јер, за разлику од цхецкбок-а, уноси текста немају псеудо-класе да би означили када су попуњени.

Дакле, морамо пронаћи алтернативну руту. То је псеудо-класа означава када елемент има текст резервисаног места; То се зове : плацехолдер-приказано.

Ако користимо резервисана места у нашем уносу текста, можемо знати када је поље за унос празно. То се дешава када корисник још није уписао ништа у њу јер резервисано место ће нестати када се то деси.

 
 
 
 
 Попуњено:  
 Празно:

 :: роот цоунтер-ресет: филледИнпутЦоунт, емптиИнпутЦоунт;  инпут [типе = 'тект'] цоунтер-инцремент: филледИнпутЦоунт;  инпут [типе = 'тект']: плацехолдер - показан цоунтер-инцремент: емптиИнпутЦоунт;  #филледИнпутЦоунт :: бефоре цонтент: цоунтер (филледИнпутЦоунт);  #емптиИнпутЦоунт :: бефоре цонтент: цоунтер (емптиИнпутЦоунт);

Резултат је сличан претходном - два бројача су аутоматски се повећава и смањује док додајемо или уклањамо текст у поља за унос или из њих.

3. Детаљи

Алтернативна стања неког елемента не морају увијек бити назначена само псеудо-класама. Могу постојати ХТМЛ атрибути раде тај посао, као у случају

елемент.

Тхе

елемент приказује садржај његове

цхилд елемент. Када корисник кликне на то, други садржај

елемент постају видљиви. Напоменути да

елемент увек треба да буде на првом месту међу децом

Тако,

има две државе: отворена и затворена. Отворено стање је означено са присуство опен ХТМЛ атрибут у елементу. Овај атрибут може бити циљан у ЦСС упева свој селектор атрибута.

  К1: питање # 1
 одговор # 1
 
  К2: питање # 2
 одговор # 2
 
  К3: питање # 3
 одговор # 3
 
 
 
 Отвори:  
 Затворено:

 :: роот цоунтер-ресет: опенДетаилЦоунт, цлоседДетаилЦоунт;  детаилс цоунтер-инцремент: цлоседДетаилЦоунт;  детаилс [опен] цоунтер-инцремент: опенДетаилЦоунт;  #цлоседДетаилЦоунт :: бефоре цонтент: цоунтер (цлоседДетаилЦоунт));  #опенДетаилЦоунт :: бефоре цонтент: цоунтер (опенДетаилЦоунт);

Резултат је два ЦСС бројача у реалном времену поново: Отворено и затворено.

4. Радио гумби

За бројање радио дугмади потребна је другачија техника. Свакако бисмо могли користити : цхецкед псеудо-класа коју смо користили за потврдне оквире. Међутим, радио гумби су користи другачије од потврдних оквира.

Радио гумби су значило да буде у групама. Корисник може изабрати само један унутар групе. Свака група дјелује као једна јединица. Два стања која група радио дугмади може имати је такође изабран је један од тастера или ниједан од њих није изабран.

Дакле, не треба бројати радио дугмад по појединачним тастерима, већ по групама дугмади. Да бисмо то постигли, ми искористите : нтх-оф-типе селектор. Објаснићу ти касније; прво да видимо код.

 радио-1.1 радио-1.2 радио-1.3 
 радио-2.1 радио-2.2 радио-2.3 
 радио-2.1 радио-2.2 радио-2.3 
 
 Изабрано:  
 Неизабрано:

Морамо да доделите исто име преко радио дугмади у истој групи. Свака група у горњем коду има три радио дугмета.

 :: роот цоунтер-ресет: селецтедРадиоЦоунт, унСелецтедРадиоЦоунт;  инпут [типе = 'радио']: нтх-оф-типе (3н) цоунтер-инцремент: унСелецтедРадиоЦоунт;  инпут [типе = 'радио']: нтх-оф-типе (3н): означено цоунтер-инцремент: селецтедРадиоЦоунт;  инпут [типе = 'радио']: нот (: нтх-оф-типе (3н)): проверено цоунтер-инцремент: унСелецтедРадиоЦоунт -1 селецтедРадиоЦоунт;  #селецтедРадиоЦоунт :: бефоре цонтент: цоунтер (селецтедРадиоЦоунт);  #унСелецтедРадиоЦоунт :: бефоре цонтент: цоунтер (унСелецтедРадиоЦоунт);

Прва три правила стила у горњем исјечку су иста као она која смо примијенили на потврдне оквире, осим на, умјесто на циљање евери Радио дугме, циљамо последњи радио дугме у свакој групи, који је трећи у нашем случају (: нтх-оф-типе (3н)). Дакле, не рачунамо све радио тастере, али само једна по групи.

Међутим, то нам неће дати тачан резултат у реалном времену, као што смо ми још нису дали никакво правило за бројање друга два радио дугмета у групи. Ако је један од њих означен, треба га пребројити и непровјерени резултат треба смањити у исто вријеме.

Зато и ми адд а -1 вредност после унСелецтедРадиоЦоунт у последњем правилу стила који циља друга два радио дугмета у групи. Када се један од њих провери, -1 ће смањите непровјерени резултат.

Пласман грофова

Можете видети само исправан резултат након што је пребројавање завршено, тј. након обраде свих елемената који треба да се преброје. Због тога морамо поставити елемент унутар којег ћемо приказати бројаче само након елемената који се рачунају у ХТМЛ изворном коду.

Можда не желите приказати бројаче испод елемената, али негдје другдје на страници. У овом случају, ви треба да промените положај бројача користећи ЦСС својства као што су превести, маргин, или позицију.

Али, мој предлог би био користите ЦСС Грид тако да можете да креирате изглед ваше странице независно од редоследа елемената у ХТМЛ изворном коду. На пример, можете лако да направите мрежу која поставља бројаче изнад или поред поља за унос.