jQuery

[jQuery] Tworzenie formularzy przy użyciu jQuery

Podziel się

[jQuery] Tworzenie formularzy przy użyciu jQuery - http://webprojektant.plPrezentujemy wtyczki do jQuery służące do tworzenia formularzy na stronach internetowych. Formularze różnią się głównie wyglądem i w niektórych przypadkach sposobem działania.

JQUERY FORMATION

Wtyczka pozwala utworzyć formularz bez konieczności użycia kodu HTML. Możemy wprowadzić dowolną liczbę pól tekstowych i opcji wyboru. Skrypt sprawdza poprawność formularza np. czy do pola tekstowego na pewno został wpisany tekst. Jest możliwość ustawienia własnych komunikatów błędów w przypadku gdy wprowadzone dane są niepoprawne oraz możliwość ustawienia własnych pytań Captcha. Wtyczka bardzo przydatna do tworzenia formularzy rejestracji na stronach internetowych.

Czytaj więcej: [jQuery] Tworzenie formularzy przy użyciu jQuery

[jQuery] Przekształcanie obrazu w jQuery

Podziel się

[jQuery] Przekształcanie obrazu w jQuery - http://webprojektant.plPrzedstawiamy wtyczki umożliwiające stosowanie różnych efektów graficznych na stronie. Efekty mogą po prostu uatrakcyjnić proces przewijania zdjęć lub dodać ciekawą funkcjonalność do strony internetowej.

TEFFECTS JQUERY PLUGIN

Wtyczka umożliwiająca dodanie efektu przejścia pomiędzy zdjęciami na stronie. Wtyczka ma duży wybór opcji: do wyboru jest aż 8 efektów, a dodatkowo decydujemy o kierunku animacji (poziomy, pionowy) oraz możemy zarządzać szybkością przejścia itp. Możemy oczywiście te opcje ukryć lub dać możliwość ich ustawienia użytkownikowi. Wtyczkę można wykorzystać jako przeglądarkę zdjęć wyświetlaną w osobnym oknie.

Czytaj więcej: [jQuery] Przekształcanie obrazu w jQuery

[jQuery] Zarządzanie plikami cookies w jQuery

Podziel się

[jQuery] Zarządzanie plikami cookies w jQuery - http://webprojektant.plPrzedstawiamy wtyczki służące do zarządzania plikami cookie w jQuery. Skrypty te pozwalają na usuwanie oraz zarządzanie ustawieniami plików cookie. Prawie wszystkie mają opublikowaną dokumentację internetową, dzięki czemu nikt nie powinien mieć problemu z ich instalacją oraz obsługą. Dlaczego wtyczki jQuery? Powody są dwa. Po pierwsze obsługa plików cookie nie jest standardowo wbudowana w rdzeń jQuery, a po drugie zarządzanie „ciasteczkami” przy użyciu wtyczek jest dużo łatwiejsze, niż gdybyśmy mieli to uczynić przy pomocy zwykłego JavaScriptu.

Czytaj więcej: [jQuery] Zarządzanie plikami cookies w jQuery

[jQuery] Rozbudowa interfejsu stron WWW

Podziel się

[jQuery] Rozbudowa interfejsu stron WWW - http://webprojektant.plBywa, że strony WWW przypominają długie, jednostronicowe broszury. Odwiedzające je osoby mogą się czuć przytłoczone przez wiele tekstu i znaczną liczbę obrazków, które muszą długo przewijać, zwłaszcza gdy nie są w stanie szybko znaleźć poszukiwanych informacji. To naszym zadaniem, zadaniem twórców stron jest zapewnienie użytkownikom narzędzi, które ułatwią im znalezienie tego, czego szukają. Przy użyciu JavaScriptu oraz biblioteki jQuery można usprawniać tworzone strony i ułatwiać użytkownikom korzystanie z nich — na przykład poprzez ukrywanie zawartości, aż do momentu gdy będzie potrzebna, oraz zapewnianie łatwiejszego dostępu do informacji.

Czytaj więcej: [jQuery] Rozbudowa interfejsu stron WWW

[jQuery] Nowa wersja jQuery 1.9 beta1

Podziel się

[jQuery] Nowa wersja jQuery 1.9 beta1 - http://webprojektant.plZespół jQuery przygotował prezent na gwiazdkę - wydał jQuery 1.9 Beta1. Jak widać jest to jeszcze wersja testowa, ale jest przełomowa, ponieważ wprowadzono wiele nowych zmian. Dlatego twórcy proszą o testowanie tego wydania, aby wspomóc ich w udoskonaleniu tego frameworka.

W jQuery 1.9 usunięto wiele elementów, które były zdeprecjonowane w ostatnich odsłonach biblioteki. Zmiany poszły tak daleko, że wydano również jQuery Migrate plugin, który ma pomóc zachować kompatybilność starszego kodu z nową wersją frameworka. Ten plugin odtwarza usunięte elementy, więc stary kod będzie dalej działał. Oczywiście jest to rozwiązanie przejściowe, które pozwoli przesiąść się na nową wersję frameworka, dlatego nie powinno się korzystać z tego plugina przy nowych projektach. W celu ułatwienia migracji ta wersja deweloperska dostarcza dla konsoli przeglądarki ostrzeżenia co pozwala zaobserwować, jakich elementów nie używać.

Czytaj więcej: [jQuery] Nowa wersja jQuery 1.9 beta1

[jQuery] Testowanie kodu jQuery

Podziel się

[jQuery] Testowanie kodu jQuery - http://webprojektant.plJeśli do tej pory nie miałeś w zwyczaju sprawdzania poprawności swojego kodu JavaScript testami, prawdopodobnie testujesz działanie strony bezpośrednio w przeglądarce, klikając elementy i oczekując na pojawienie się błędu. Kiedy napotkasz błąd, możesz go poprawić i dalej testować działanie skryptów. Jest to bardzo popularne podejście do testowania JavaScript. Przede wszystkim jest jednak błędne. Manualne testowanie zaimplementowanych funkcjonalności to czasochłonny proces. Wymaganie, aby programista za każdym razem weryfikował działanie skryptów, opóźnia proces tworzenia aplikacji. Oczywiście ten obowiązek może przejąć tester aplikacji, wolelibyśmy jednak zredukować tego rodzaju koszty w procesie rozwoju aplikacji.
Ponadto testująca osoba może przeoczyć niektóre niedociągnięcia. Nawet po poprawieniu błędów wkrótce mogą się one ujawnić ponownie, dlatego nawet na późniejszych etapach rozwoju aplikacji musisz nadal sprawdzać funkcjonalność, która została już przetestowana. Jeżeli zdarzy Ci się coś przeoczyć — wówczas błędny kod może znaleźć się w środowisku produkcyjnym aplikacji, a co za tym idzie — klienci odwiedzający stronę dostrzegą błędy. Testowanie manualne prawie zawsze prowadzi do regresji i przypadkowo ujawniających się błędów na stronie. Rozwiązaniem tych problemów jest wprowadzenie automatycznych testów pokrywających zaimplementowany przez Ciebie kod Java-Script.

Czytaj więcej: [jQuery] Testowanie kodu jQuery

[jQuery] Jak działa jQuery - podstawy

Podziel się

[jQuery] Podstawy jQuery z oficjalnej strony - http://webprojektant.pljQuery: Podstawy

To jest podstawowy przewodnik, zaprojektowany aby pomóc Tobie zacząć pracę z biblioteką jQuery. Jeśli nie masz przygotowanej jeszcze strony testowej, to zacznij od utworzenia nowego pliku HTML z następującą zawartością:

<!doctype html>
  <html>
  <head>
  <meta charset="utf-8">
  <title>Demo</title>
  </head>
  <body>
  <a href="http://jquery.com/">jQuery</a>
  <script src="jquery.js"></script>
  <script>
  
  </script>
  </body>
  </html>
  

Czytaj więcej: [jQuery] Jak działa jQuery - podstawy

[jQuery] Pionowe menu rozsuwane

Podziel się

[jQuery] Pionowe menu rozsuwane - http://webprojektant.plW tym tutorialu zajmiemy się budową prostego menu napisanego w html i wspomaganego przez bibliotekę jQuery. Jeśli znacie dobrze jQuery to nie będzie to dla Was wielka sprawa, ale poczatkujący webmaster chętnie skorzysta z efektu rozsuwanego menu.

Do pracy będziemy musieli pobrać wersję frameworka jQuery z oficjalnej strony projektu lub skorzystać z zewnętrznego źródła. Ok. Zaczynamy nasz tutorial ;-)

Najpierw tworzymy kod html dla naszego menu:

Czytaj więcej: [jQuery] Pionowe menu rozsuwane

[jQuery] Podstawy jQuery

Podziel się

[jQuery] Podstawy jQuery - http://webprojektant.plWcześniej pisałem troszkę o jQuery, ale teraz postanowiłem napisać coś o podstawach. JQuery jest to biblioteka (rozszerzenie) języka skryptowego javascript. A więc kod jest wykonywany po stronie użytkownika, a nie po stronie serwera tj. np. PHP lub JAVA.

JQuery jest dość łatwe i oszczędza nam pisania rozbudowanego kodu javascript, aby uzyskać satysfakcjonujący nas efekt na naszej stronie. JQuery zawiera wiele efektów specjalnych, animacji, które możemy wykorzystać w celu upiększenia naszej strony. Oczywiście to nie wszystko. JQuery ma wbudowane funkcje, które wyręczą nas w AJAX'ie.

Do pracy z biblioteką wystarczy nam tylko pobranie biblioteki ze strony projektu: jquery.com i dołączenie jej do pliku html, który będzie korzystał z funkcji jQuery.

Biblioteka występuje w dwóch wersjach: skompresowanej oraz nieskompresowanej. Dla stron produkcyjnych zalecane jest używanie wersji skompresowanej, gdyż skraca to nam czas ładowania strony. Wersja nieskompresowana powinna być używana dla nauki oraz przy programowaniu aplikacji webowych - dzięki czemu mamy przejrzysty podgląd w kod biblioteki.

Bibliotekę umieszczamy w kodzie html pomiędzy znacznikami <head></head> lub <body></body>.

Czytaj więcej: [jQuery] Podstawy jQuery

[jQuery] Efekty slideshow wykonane w jQuery

Podziel się

[jQuery] Efekty slideshow wykonane w jQuery - http://webprojektant.plTrochę czasu minęło od ostatniej wzmianki na temat jQuery na WEBprojektant.pl. Postaram się to naprawić i w najbliższym czasie poświęcić więcej czasu temu ciekawemu frameworkowi. Dla tych, którzy nie wiedzą - jQuery to framework - bazujący na javascript. W skrócie odpowiada za dynamiczne efekty graficzne, animacje na naszej stronie. Framework jQuery pokonał technologię flasha oraz swoimi możliwościami zastąpił AJAX. jQuery jest niezastąpione w kreacji nowoczesnej nowoczesnej galerii lub efektownego slidera czy menu. Jednak nie ogranicza się tylko do tego. Można go używać do walidacji formularzy i innych elementów w bezpośrednim połączeniu z bazą danych - co eliminuje nam potrzebę przeładowania całej strony - jQuery umożliwia przekazanie danych z bazy na stronę bez ładowania innych elementów, które się nie zmieniają.

Tak jak widać jQuery może stać się dla nas potężnym narzędziem w kreowaniu aplikacji webowych, choć HTML5 w połączeniu z CSS3 będzie starał się to podważać. Jednak w tym poradniku skoncentrujemy się na jQuery. Żeby wykorzystać możliwości jQuery, musimy ściągnąć najnowszą wersję frameworka z oficjalnej strony projektu. Bibliotekę (framework) musimy zawsze dołączyć do naszej strony, która wykorzystuje jQuery (pomiędzy znacznikami <head></head>).

Czytaj więcej: [jQuery] Efekty slideshow wykonane w jQuery

Zamienniki popularnego LightBox’a

WEBprojektant.plDzisiaj trudno znaleźć stronę WWW bez popularnego LightBox’a lub podobnemu mu skryptowi. Oryginalny LightBox jest już skryptem dosyć przestarzałym (ostatnią aktualizacje miał trzy lata temu) oraz powoduje konflikt z jQuery poprzez plik prototype.js, który wchodzi w skład skryptu. Problem ten można oczywiście rozwiązać stosując jQuery.noConflict, ale może warto poszukać zamienników LightBox’a właśnie w jQuery? W tym artykule przedstawię dwa najlepsze (według mnie) zamienniki LightBox’a. Oczywiście jest masa innych zamienników, ale ja skupię się na tych dwóch.

Czytaj więcej: Zamienniki popularnego LightBox’a

Strona 1 z 2

WEBprojektant.pl na YouTube!

Kanał WEBprojektant.pl na YouTubeMam przyjemność ogłosić, że działa nasz kanał na Yotube - WEBprojektant.pl - poradnik webmastera, gdzie możecie znaleźć nasze video tutoriale.

Może nie jest tam jeszcze porażająca ilość poradników dla webmasterów, ale postaram się aktualizować kanał w miarę możliwości. Proszę Was o tematykę jaką chcecie, aby poruszyć w kolejnych tutorialach. Łatwiej mi będzie wybrać na czym się skoncentrować.

Może się przydać

Top 3 webmaster

Nasze statystyki

Użytkowników:
130
Artykułów:
224
Odsłon artykułów:
3279886