CSS transitions są częścią specyfikacji CSS3 . Przekształcenia CSS dostarczają kontroli nad zmianą właściwości stylów. Zamiast natychmiastowo zmienić wartość dostarczają one funkcji, która pozwala dostosować tempo, rodzaj i które właściwości powinny zostać zmienione.
Zmiany zwykle są nazywane „niejawnymi przekształceniami” z uwagi na to, że stany pomiedzy przekształceniami nie są jawnie definiowane przez użytkownika. Użytkownik widzi […]
Responsive web design to ostatnio bardzo popularne pojęcie. RWD to projektowanie stron tak, by dostosowywały się one do rozdzielczości ekranu, na których są wyświetlane. Celem Responsive Web Design jest zaprojektowanie strony w taki sposób by była ona czytelna, przejrzysta, posiadała prostą nawigację z minimalną ilością suwaków.
W odróżnieniu do zwykłego stylowania w Responsive Web Design […]
W poprzednim artykule pisałem o tworzeniu stron internetowych od strony frontendu, czyli tego co widzi użytkownik. W tym skupię się na stronie backendowej, czyli na tym co dzieje się po stronie serwera www.
Komunikacja przeglądarka-serwer
Na początku musisz uświadomić sobie jak to się dzieje, że użytkownik po wpisaniu adresu otrzymuję stronę. Wszystko odbywa się za pomocą […]
Wpis zacznę od cytatu Sokratesa „The more I learn, the more I learn how little I know”. Z tworzeniem stron internetowych jest podobnie, im bardziej zgłebiasz temat tym wydaje Ci się, że mniej wiesz. Tworzenie stron internetowych opiera się o znajomość wielu technologi bez których ciężko jest stworzyć stronę, a mówiąc bardziej profesjonalnie witrynę […]
Często napotykanym problemem przez programistów jest dynamiczne wyszkukiwanie danych w tabeli. Problem ten można łatwo rozwiązać używając funkcji filter() dostępnej w bilbliotece JQuery.
Funkcja filter() w Jquery ograniczna zbiór dopasowanych lementów do tych które odpowiadają selektorowi lub spełniają test funkcji.
Kolorowanie co drugiego elementu listy
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
Za pomocą jquery piszemy kod:
$( "ul li" ).filter( ":even" ).css( "background-color", "red" );
Funkcja dopasuje parzyste elementy i wykona na nich funkcje css(), która zmieni kolor na czerwony. Oczywiście w tym prostym przykładzie wystarczy, że zastosujemy prosty css i efekt dostaniemy taki sam, ale chodzi o pokazanie działania funkcji filter().
Użycie funkcji testującej
Druga forma funkcji filter() pozwala nam na zastosowanie funkcji sprawdzającej. Dla każdego elementu, na którym zostanie wykonana funkcja filter, zostanie przeprowadzony test funkcji, którą piszemy sami.
Przykładowy kod:
<ul>
<li><strong>list</strong> item 1 – one strong tag</li>
<li><strong>list</strong> item <strong>2</strong> –
two <span>strong tags</span></li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
Możemy filtrować elementy listy na podstawie ich zawartości.
$( "li" )
.filter(function( index ) {
return $( "strong", this ).length === 1;
})
.css( "background-color", "red" );
Ten kod na każdym elemencie listy(<li>) wykona metodę filter, która posiada funkcje sprawdzającą. Funkcja ta sprawdza czy w danym elemencie listy znajduje się więcej niż jeden tag <strong>. Jeżeli tak jest to wykonana jest funkcja CSS, która zmieni kolor tła elementu na czerwony. Przeczytaj więcej, aby dowiedzieć się o dynamicznym wyszukiwaniu elementów w tabeli. […]