Framework jQuery

Kilka słów o jQuery

Framework jQuery jest to dodatek do języka JavaScript za pomocą, którego będziemy mogli budować szybkie strony WWW z różnymi animowanymi widżetami. Podobnie jak tworzyliśmy strony internetowe w JavaScript to w taki sam sposób będziemy mogli dodawać kod tym razem zwięzły, ale bardziej rozwinięty programistycznie oczywiście nie zmieniając struktury HTML. Oprócz tego skrypty napisane w jQuery wnoszą wiele nowego w tworzeniu nowoczesnych witryn internetowych a elementy stron wyświetlają się płynniej np. pokaz zdjęć jest wyświetlany z animowanymi efektami przejścia.

Najnowszą wersje pliku jquery.js możemy pobrać na stronie projektu click.

Przykład dołączenia pliku jquery.js w sekcji {head}

{head} 
{title}test{/title} 
{script type="text/javascript" src="jquery.js"}{/script} 
{/head}

Przykładowy efekt animowanego kwadratu

Jak widać na poniższym tutorialu dodawanie skryptu w pliku html jest bardzo proste w sekcji {head} umieszczamy kod odwołujący się do pliku jquery.js plus kilka linijek funkcji przykładowego animowanego kwadratu niewiele różni się to od standardowego kodu JavaScript. Natomiast w sekcji {body} dołączamy pozostały kod, który ma za zadanie wykonać odpowiednią funkcje (animacja, kolor przycisku i jego położenie).

{html}
{head}
{script type="text/javascript" src="jquery.js"}{/script}
{script type="text/javascript"} 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({height:200},"fast");
    $("div").animate({width:200},"fast");
    $("div").animate({height:200},"fast");
    $("div").animate({width:200},"fast");
  });
});
{/script} 
{/head}

{body}
{button}Start Animacja{/button}
{br /}{br /}
{div style="background:#FF0000;height:100px;width:100px;position:relative"}
{/div}
{/body}
{/html}

Galeria internetowa jQuery

Przykładową demonstracyjną galerie wykonaną jQuery możemy pobrać ze strony projektu aino-galleria i odpowiednio skonfigurować lub przygotowaną przeze mnie tutaj jako szablon, który możemy dostosować do własnej witryny. Musimy tylko utworzyć miniaturki zdjęć (program Fotosizer) i wpisać w pliku index.html ścieżkę do naszych obrazków.

W sekcji {body} konfigurujemy nasze obrazki

{a href="images/obrazek1.jpg"} - oryginalny obrazek
{img src="thumbs/obrazek1.jpg"} - miniatura obrazka

Dodatkowo możemy zatytułować naszą galerie internetową w nagłówku strony oraz dołączyć alternatywny tekst poniżej  galerii.

Galeria wykona przy użyciu biblioteki jQuery to bardzo lekka z animowanymi efektami przejść pokaz obrazków umieszczonych na naszej stronie internetowej.

Przykładowa galeria JavaScript z wykorzystaniem dodatku jQuery click

Moja refleksja

Po pierwsze testując lekką i szybką bibliotekę programistyczną jQuery można stwierdzić, że jest bardzo dobre rozwiązanie, jeśli chcemy upiększać naszą witrynę internetową poprzez dodanie różnych dynamiczno-animowanych efektów. Nasza strona będzie wyświetlana w każdej przeglądarce w profesjonalny sposób.

Po drugie patrząc na całość zagadnienia to bardzo przyjemna jest praca z pluginem jQuery, który przez swoją funkcjonalność i łatwość konfigurowania sprawia, że język JavaScript przeżywa swoją drugą młodość.

Przydatne strony: jQuery Tutorial jQuery UI

Pozdrawiam.