Loo CSS koguse päringud QQ Builderiga
Vähesed arendajad teavad või kasutavad seda CSS-i koguse päringud nende veebilehtedel. See on üsna keeruline funktsioon, kuid kasulik ka siis, kui sa seda teed konteinerites on erinevad elemendid.
Koguse päring saab CSS-i omaduste muutmine / uuendamine põhineb lastelementide eelnevalt määratletud piirid. Näiteks, kui teil on rohkem kui kolm üksust nimekirjas võite ruumi säästmiseks muuta fondi väiksemaks. Teine näide on lingi laiuse uuendamine põhinedes linkide arv navigeerimismenüüs.
Sellised ülesanded võivad olla saada kiiresti keeruline kuid tänu Koguste päringute tegija sa ei pea mingeid segane süntakseid meelde jätma.
See veebirakendus genereerib teie jaoks kogu koodi aja säästmiseks. Sa pead valige kolm rippmenüüd mis kohandavad teie koguse päringut. Nad töötavad nii:
- Valija - milline lapse element (id) tuleks arvestada
- Päringu tüüp - valida “kõige rohkem”, “vähemalt”, või kombinatsioon “kõige rohkem” & “vähemalt”
- Summa - filtreeritavate üksuste koguarv
See näib koodis segadust, kuid see on tõesti lihtne mõiste. Koguste päringud võimaldavad teil rakendada CSS-i omadusi põhineb laste elementide koguarvul.
Nii saate lisada teatud CSS-stiile kui seal on, ütleme, vähemalt 4 lapseelementi (4 või enam). Või võite lisage stiile ainult siis, kui seal on kõige rohkem 4 lastelementi (0-4 last).
Kombineeritud valija võimaldab teil määrata täpselt, kui palju minimaalset ja maksimaalset last on vajalikud teatud CSS-omaduste kuvamiseks.
Ülaltoodud pildi näites olen määranud kokku “kõige rohkem” üksusi See tähendab, et kui mul on 0, 1 või 2 last, on plokid punased. Kui ma lisan veel ühe, et saada 3 last, siis kõik plokid siniseks.
Kui teil pole aimugi, mis toimub, saate klõpsa väikese teabe kasti külgriba. See toob üles modaalsed aknad faktide ja süntaksiga koguse päringu funktsiooni selgitamine.
See on väga mugav vahend nii algajatele kui ka kogenud arendajatele. See läheb säästa palju aega pikemas perspektiivis ja see aitab teid luua dünaamilisemaid veebisaite.
Alustamiseks külastage QQ ehitaja veebisaiti ja alustage oma funktsioonide kohandamist. Sa saad mänguasja tulemustega ja vaadake reaalajas eelvaadet paremal paanil, et teada saada, kuidas teie muudatused lapse elemente mõjutavad.
See projekt on ka saadaval GitHubis nii et sa oled vaba vaadake lähtekoodi või isegi koopia allalaadimine kohapeal. Ja kui sa armastad seda rakendust või teil on loojale küsimusi / soovitusi, saate Drew Minns'ile kiirelt piiksuma @drewisthe.
