Generuj kwerendy ilościowe CSS za pomocą QQ Builder
Niewielu deweloperów wie lub używa Zapytania ilościowe CSS na swoich stronach internetowych. Jest to dość złożona funkcja, ale także przydatna, gdy ty mieć różne przedmioty w pojemniku.
Ilość zapytań może zmień / zaktualizuj właściwości CSS oparte na predefiniowane limity dla elementów potomnych. Na przykład, jeśli masz więcej niż trzy przedmioty na liście możesz zmniejszyć czcionkę, aby zaoszczędzić miejsce. Innym przykładem jest aktualizacja szerokości łącza na podstawie liczba linków w menu nawigacyjnym.
Takie zadania mogą szybko się skomplikować ale dzięki Kreator kwerend ilościowych nie musisz zapamiętywać żadnej mylącej składni.
Ta aplikacja internetowa generuje cały kod dla Ciebie oszczędzać czas. Musisz wybierz z trzech rozwijanych menu które dostosowują zapytanie ilościowe. Działają w ten sposób:
- Selektor - które elementy dziecka należy policzyć
- Typ zapytania - wybrać pomiędzy “najbardziej”, “przynajmniej”, lub kombinacja “najbardziej” & “przynajmniej”
- Ilość - łączna liczba elementów do filtrowania
Wydaje się to mylące w kodzie, ale jest to bardzo prosta koncepcja. Kwerendy ilościowe umożliwiają stosowanie właściwości CSS na podstawie całkowitej liczby elementów podrzędnych.
Więc możesz dodaj niektóre style CSS kiedy, powiedzmy,, przynajmniej 4 elementy potomne (4 lub więcej). Albo możesz dodawaj style tylko wtedy, gdy jest najbardziej 4 elementy potomne (0-4 dzieci).
Selektor combo pozwala Ci zdefiniować dokładnie ile dzieci minimum i maksimum są konieczne, aby wyświetlić pewne właściwości CSS.
W przykładzie na powyższym zrzucie ekranu ustawiłem całkowity “najbardziej” przedmiotów do 2. Oznacza to, że gdy mam 0, 1 lub 2 dzieci, bloki są czerwone. Jeśli dodam jeszcze jedno, aby uzyskać 3 dzieci, wszystkie bloki zmieniają kolor na niebieski.
Jeśli nie masz pojęcia, co się dzieje, możesz kliknij małe pole informacyjne na pasku bocznym. To wywoła okno modalne z faktami i składnią wyjaśnienie funkcji kwerendy ilościowej.
Jest to bardzo przydatne narzędzie dla zarówno początkujący, jak i doświadczeni programiści. Będzie oszczędzaj dużo czasu na dłuższą metę ci to pomoże tworzyć bardziej dynamiczne strony internetowe.
Aby rozpocząć, odwiedź stronę internetową konstruktora QQ i zacznij dostosowywać swoje funkcje. Możesz zabawka z wynikami i sprawdź podgląd na żywo w prawym okienku, aby dowiedzieć się, jak zmiany wpływają na elementy potomne.
Ten projekt jest również dostępne na GitHub więc jesteś wolny sprawdź kod źródłowy lub nawet pobierz kopię lokalnie. A jeśli kochasz tę aplikację lub masz jakieś pytania / sugestie dla twórcy Drew Minns, możesz strzelić do niego szybko tweet @drewisthe.
