CSS mennyiségi lekérdezések generálása a QQ Builder segítségével
Kevés fejlesztő ismeri vagy használja CSS mennyiségi lekérdezések weboldalakon. Ez egy meglehetősen összetett funkció, de akkor is hasznos, ha Ön a tartályban különböző elemek vannak.
A mennyiségi lekérdezés CSS tulajdonságok módosítása / frissítése alapján a gyermekelemek előre meghatározott korlátai. Például, ha van több mint három elem a listában kisebb lehet a betűtípus, hogy helyet takarítson meg. Egy másik példa egy link szélességének frissítése alapján linkek száma navigációs menüben.
Az ilyen feladatok ilyenek gyorsan bonyolult de a Mennyiség lekérdezések készítője nem kell megjegyeznie a zavaró szintaxist.
Ez a webes alkalmazás létrehozza az összes kódot időt spórolni. Neked kell válasszon három legördülő menüből amely testreszabja a mennyiségi lekérdezést. Úgy működnek, mint ez:
- Választó - melyik gyermekelemet számolni kell
- Lekérdezés típusa - Válassz ezek között “leginkább”, “legalább”, vagy egy kombinációja “leginkább” & “legalább”
- Összeg - a szűrni kívánt elemek száma
Ez zavarónak tűnik a kódban, de ez egy nagyon egyszerű fogalom. A mennyiségi lekérdezések lehetővé teszik a CSS tulajdonságok alkalmazását a gyermekelemek teljes száma alapján.
Szóval te meg tudod bizonyos CSS-stílusok hozzáadása amikor van, mondjuk, legalább 4 gyermekelem (4 vagy több). Vagy, te is csak akkor adjunk hozzá stílusokat van leginkább 4 gyermekelem (0-4 gyermek).
A kombinációs választó segítségével meghatározható pontosan mennyi minimális és maximális gyermek bizonyos CSS tulajdonságok megjelenítéséhez szükségesek.
A fenti képen látható példában beállítottam a teljes “leginkább” példány Ez azt jelenti, hogy 0, 1 vagy 2 gyermekem van, a blokkok vörösek. Ha még egyszer adok hozzá 3 gyereket, akkor az összes blokk kékre vált.
Ha nem tudod, mi folyik itt kattintson a kis információs mezőre az oldalsávban. Ez felhozza a modális ablak tények és szintaxis a mennyiség lekérdezési funkciójának magyarázata.
Ez egy nagyon hasznos eszköz kezdők és tapasztalt fejlesztők. ez lesz sok időt takaríthat meg hosszú távon, és segít dinamikusabb webhelyek létrehozása.
Az induláshoz látogasson el a QQ építői webhelyére és kezdje a funkciók testreszabását. tudsz játék az eredményekkel és ellenőrizze az élő előnézetet a jobb oldali ablaktáblában, hogy megtudja, hogyan befolyásolja a változások a gyermekelemeket.
Ez a projekt is elérhető a GitHub-on így szabadon vagy nézd meg a forráskódot vagy akár töltsön le másolatot helyben. És ha szereted ezt az alkalmazást, vagy bármilyen kérdése / javaslata van az alkotónak, Drew Minns-et gyorsan megdöntheted @drewisthe.
