Strona używa cookies (ciasteczek). Dowiedz się więcej o celu ich używania i zmianach ustawień. Korzystając ze strony wyrażasz zgodę na używanie cookies, zgodnie z aktualnymi ustawieniami przeglądarki.    X

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 TutorialjQuery UI

Pozdrawiam. 

Komentarze

0 nowych
treuer25   6 #1 30.09.2010 14:33

Ostatnio coś cały czas poruszasz temat galerii na stronie internetowej, powiem że wpisy dość ciekawe bo pokazują jak różnie można rozwiązać stworzenie galerii na wlasnej stronie internetowej.

skandyn   9 #2 30.09.2010 16:05

@treuer25

Ogólnie wyszedłem z zamiarem przedstawienia ciekawego, pluginu jQuery.
Galerie dołączyłem bardziej dla przykładu pokazując, jakie możliwości daje nam odświeżony język JavaScript.

Pozdrawiam.

  #3 30.09.2010 17:01

@skandyn:
jQuery to nie "odświeżony język JavaScript", ale framework dający nam nieco gotowych funkcji, uproszczenie pewnych mechanizmów, oraz zapewniający kompatybilność z wieloma przeglądarkami.

skandyn   9 #4 30.09.2010 18:23

@lukasamd

Też się z Tobą troszeczkę nie zgodzę w kwestii „nieco gotowych funkcji”.
Przeglądając strony internetowe można wyszukać dziesiątki dodatków wykorzystujących bibliotekę jQuery.

Pozdrawiam

  #5 30.09.2010 23:30

Pluginy do jQuery != samo jQuery :]

floyd   14 #6 30.09.2010 23:39

Jednego tylko nie rozumiem. Jaki jest powód używania w prezentowanych przykładach nawiasów klamrowych {} w miejsce
Żeby było śmiesznej to w niektórych miejscach nawiasy te muszą zostać, czyli nie można zamienić je hurtem.
Byłbym wdzięczny za zaspokojenie mojej ciekawości. :)

Extraordinarykid   6 #7 01.10.2010 03:02

Podobnie, jak w poprzednim wpisie - popraw błędy.
Napisałeś tam "OK." - błędy wiszą dalej ;-)

Postaraj się, aby Twoje wpisy przydawały się do kopiowania i drukowania...
Dzieci na pewno docenią tę nieocenioną pomoc w szkolnych zadaniach z Technologii Informatycznej ;-)

Też Ciebie pozdrawiam.

  #8 01.10.2010 03:12

@floyd, jeśli się dobrze orientuję to w twoim komentarzu masz odpowiedź ;). Po słowie "miejsce" użyłeś pewnie poprawnego zapisu tagowania html, czego skutkiem jest ich brak w komentarzu (znaczniki zniknęły, ponieważ są "przydzielone" do tego języka i wykorzystanie ich w teście jest... nie możliwe w ich "normalnej" formie). Autor najwyraźniej ten magiczny feature "odkrył" (albo wiedział od początku) i dla tego zastosował klamry (kwadratowe też pewnie zakrywają zawartość). Swoją drogą teraz nasuwa się pytanie, czemu autor nie użył odpowiednich encji dla tych znaków, też tu nie działają?
Test:
<head> (encje &_lt; lub &_#60; = <, &_gt; lub &_#60; = > -usunąć kreski)

skandyn   9 #9 01.10.2010 09:17

@floyd

Specjalnie zostały użyte nawiasy klamrowe {} nie ma możliwości użycia tzw. „ ostrych nawiasów”.

Pozdrawiam.

Zeri   2 #10 01.10.2010 09:54

No może i jQuery jest fajny ale ja wolałbym przeczytać w czym jest lepszy od np. Mootools, Dojo, Prototype czy SmartClient. Jakbyś na przykładzie tej galerii pokazał jak to samo rozwiązanie wygląda w tych frameworkach... :) Zastanawiam się właśnie skąd taki szał na jQuery i czy jest on w jakiś sposób zasadny?

floyd   14 #11 01.10.2010 11:47

@mkp
Dzięki, wszystko jasne z małą poprawką.
Znak: &#62 to &_#62 :)

floyd   14 #12 01.10.2010 11:49

Nie postawiłem średnika :(
> to &_#62;

floyd   14 #13 01.10.2010 12:11

No to jeszcze jedna próba z przykładem który podał skandyn. Mam nadzieję, że nic nie pomyliłem.
<html>
<head>
<script type="text/javascript" src="images/jquery-1.3.2.min.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>

skandyn   9 #14 01.10.2010 12:46

@floyd

Dokładnie tak ma wyglądać przykładowy plik html.
Widzę, że używasz starszej wersji pliku jquery.js

Tylko nie wiem, dlaczego ma moim blogu nie mogę dalej uzyskać efektu nawiasu ostrokątnego.

Pozdrawiam.

floyd   14 #15 01.10.2010 17:11

@skandyn
To działa w wielu językach nie tylko html czy php i dotyczy dolwolnych znaków. Może coś źle wpisujesz.
W html czy php piszemy (bez spacji między znakami ampersand i hash):
w html:
& #60;& #62;
lub
& lt;& gt;
w php:
echo '& #60;& #62;';
lub
echo '& lt;& gt';

skandyn   9 #16 01.10.2010 18:01

@floyd

Próbowałem już chyba wszystkiego? Jeszcze raz spróbuje tutaj czy wyjdą mi nawiasy ostrokątne.

test
<>

Pozdrawiam.

skandyn   9 #17 01.10.2010 18:03

Czyli jednak na blogu nie ma takiej możliwości.

Pozdrawiam.