◢ⓊⓀⓄⒹⓄⓌⒶⓃⒾ◣ blog programistyczny

Ręczne tworzenie tabel z dużą ilością danych jest czasochłonne i nudne, dlatego warto takie tabele generować dynamicznie np. za pomocą jQuery. W tym wpisie pokażę jak wygenerować wiersze i kolumny tabeli na bazie danych w JSON. Kod HTML Zacznijmy od stworzenia tabeli: <table id="table-cars" class="table table-striped"> <thead> <tr> </tr> </thead> <tbody> </tbody> </table> Oczywiście, aby tabela miała ładny wygląd trzeba ją sobie ostylować np. korzystając z Bootstrapa. Kod JavaScript / jQuery <script> $(document).ready(function () { // Przykładowe dane JSON var jsonData = { "headers": ["Marka", "Pojemność (l)", "Moc (KM)"], "data": [ {"marka": "Volkswagen", "pojemność": 1.6, "moc": 110}, ...

W tym szybkim poradniku dowiesz się jak stworzyć przycisk "Idź do góry". Zadaniem przycisku jest płynne przewinięcie strony do górnej krawędzi okna przeglądarki. Kod HTML Zacznijmy od utworzenia przycisku: <button class="scroll-to-top" type="button" id="scroll-to-top">☝</button> Kod CSS Ostylujmy nasz przycisk: .scroll-to-top { display: none; z-index: 9999; position: fixed; bottom: 20px; right: 20px; border: 0; border-radius: 50%; background-color: #181818; width: 48px; line-height: 46px; text-align: center; font-size: 26px; } Kod JavaScript Obsługa przycisku: $(document).ready(function() { // Pokaż przycisk, gdy użytkownik scrolluje w dół $(window).scroll(function() { if($(this).scrollTop() > 200) { $('#scroll-to-top').fadeIn(); } else { ...

W dzisiejszym artykule podzielę się z Wami refleksjami na temat używania biblioteki jQuery . Zapewne nie ma web dewelopera, który nie spotkałby się z tą użyteczną biblioteką. Jednak ma ona dwie wady, o których chciałbym wspomnieć w tym wpisie. jQuery jest biblioteką napisaną w JavaScript, która służy do szybkiego tworzenia dynamicznej obsługi stron www. Dzięki jQuery obsługa zdarzeń, czy też interakcja z serwerem poprzez XHR staje się możliwa bez większego wkładu pracy. jQuery robi za nas większość, a budowa aplikacji przypomina nieco układanie klocków. Przykładowo utworzenie płynnie wysuwającego się elementu nie wymaga stosowania jakichkolwiek instrukcji. Wystarczy na wybranym elemencie DOM wykonać metodę toggle, co jak widać na poniższym przykładzie sprowadza się do napisania jednej krótkiej linii kodu: $('.element').toggle('slow'); Waga jQuery Waga pliku z biblioteką w wersji 3.6.1 już ze zminimalizowanym kodem to 87 KB. Wydaje się, że to nie wiele jak na tak du...

W dzisiejszym artykule przedstawię Wam jak w bardzo prosty sposób można zrobić aktywną animację w czystym HTML'u z CSS. Dodatkowo do uatrakcyjnienia naszej animacji użyjemy jQuery. Oczywiście będą też potrzebne elementy graficzne, które ja stworzyłem na potrzeby tego wpisu w GIMP'ie. Nasza animacja - duża emotikona, będzie zmieniała "wyraz twarzy" po najechaniu na nią kursorem. Elementy graficze, które będą nam potrzebne (wszystkie na przeźroczystym tle): Okrąg "buźka" z białymi oczami pobierz Rzęsy (w jednym pliku) pobierz Źrenice podobnie jak rzęsy pobierz Minki: pobierz małe pobierz duże Inne dodatkowe elementy wedle uznania Zaczynamy od kodu HTML: <div id="emoticon"> <div id="eyelashes"</div> <div id="eyes"</div> <div id="lips"</div> </div> Następnie ubieramy nasze bloki w CSS: body { margin:0; background-color:#c0c0c0; padding:0; } div { outline:none; margin:0; p...