Zastosowanie biblioteki jQuery
Technikum » PAI » Biblioteka jQuery » Zastosowanie biblioteki jQuery
Jednym ze sposobów tworzenia dynamicznych elementów stron internetowych jest wykorzystanie biblioteki jQuery napisanej w
języku JavaScript. Biblioteka pozwala na prostą manipulację elementami na stronie, pracę ze zbiorami elementów oraz
udostępnia wiele efektów wizualnych.
4.3.1. Pokazywanie i ukrywanie treści
Tak zwana harmonijka to dobry sposób na prezentowanie lub ukrywanie treści na stronie internetowej. Może zostać również
wykorzystana jako rozwijane menu nawigacyjne (ry-sunek 4.5). W tak opracowanym narzędziu hasła dla treści, które będą
wyświetlane lub ukrywane, są zorganizowane w postaci menu. Kliknięcie wybranej opcji wyświetla ukrytą treść. Kliknięcie
innej opcji ukrywa wyświetlaną treść i wyświetla inną (rysunek 4.6).
Język HTML
Kaskadowe arkusze stylów CSS
Edytory WYSIWYG
JavaScript jQuery
Rysunek 4.5. Menu nawigacyjne Język HTML
Kaskadowe arkusze stylów CSS
Edytory WYSIWYG to edytory, które pozwalają uzyskać dokument tekstowy na podstawie obrazu tworzonego na ekranie. Służą do
tworzenia stron intemetowych bez wpisywania kodu źródłowego. Podstawowym operacjom zostały przypisane ikony Ikony są
przypisane również najczęściej umieszczanym na stronach obiektom, takim jak tabele, obrazy. bloki.
JavaScript jQuery
Rysunek 4.6. Wyświetlenie treści ukrytej w menu
Przykład 4.12 Kod HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" 1> <title>Inf rozwijana</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/mojeskrypty.js"></script>
<body>
<div class="blok"> <h3>Język HTML</h3>
<p>Podstawowym elementem języka HTML jest znacznik. Znaczniki są polece¬niami umieszczonymi w nawiasach ostrych. Informują
one przeglądarkę o wyglą¬dzie otwieranej strony oraz o strukturze tekstu umieszczonego na niej. </p>
<h3>Kaskadowe arkusze stylów CSS</h3>
<p>Język CSS określa układ graficzny dokumentu HTML: parametry czcionki, wysokość i szerokość obrazków, ich położenie,
rodzaj tła itp. Wszystkie polecenia dotyczące formatowania powinny zostać umieszczone w oddzielnym pliku (arkuszu) i być
powiązane z elementami zdefiniowanymi w kodzie HTML.</p>
<h3>Edytory WYSIWYG</h3>
<p>Edytory WYSIWYG to edytory, które pozwalają uzyskać dokument tekstowy na podstawie obrazu tworzonego na ekranie. Służą
do tworzenia stron in¬ternetowych bez wpisywania kodu źródłowego. Podstawowym operacjom zostały przypisane ikony. Ikony są
przypisane również najczęściej umieszczanym na stronach obiektom, takim jak tabele, obrazy, bloki.</p>
<h3>JavaScript</h3>
<p>JavaScript odgrywa coraz większą rolę w projektowaniu interaktywnych stron internetowych. Jego możliwości są bardzo
duże, od prostej manipulacji danymi, przez dynamiczne modelowanie struktury strony, obsługę rozszerzeń multimedialnych, aż
po tworzenie odrębnych aplikacji.</p>
<h3>jQuery</h3>
<p>Biblioteka jQuery to framework zawierający różnorodne funkcje, przy których zastosowaniu można realizować często
spotykane zadania (np. ani¬macje, obsługę zdarzeń, tworzenie efektów na stronie internetowej). Jej głównymi zaletami są
łatwość użycia, niezależność od przeglądarki i małe rozmiary.</p>
</div> </body> </html>
Kod jQuery:
$(document).ready(function(){
$(".blok h3").eq(0).addClass("aktywny "); $(".blok p").eq(0).show();
$ (" .błok h3") . click (function () (
$ (this) .next ("p") .slideToggle ("slow")
. siblings ("p: visibłe") .slideUp ("slow") ;
$ (this) .toggłeCłass ("aktywny ") ;
$ (this) siblings ("h3") .removeCłass ("aktywny " ) ; 1) ;
i i ;
W podanym wyżej przykładzie kodu HTML zawartość strony zorganizowano w postaci bloku <div class="blok">. Opcje menu
zostały zdefiniowane w postaci nagłówka <h3>, a wyświetlana treść w postaci akapitu <p>.
Następnie zdefiniowane zostały style: dla klasy . blok przypisanej do bloku <div>, dla nagłówka h3 (.blok h3), dla akapitu
( . blok p) oraz dla nagłówka h3, gdy będzie wskazany myszą ( . blok h3:hover).
Natomiast zapis w skrypcie $ ( ' .blok h3 ' ) .eg (0) .addClass ("active") to pobranie z klasy . blok elementu h3 o
indeksie O oraz dodanie go do klasy aktywny. Metoda eg (indeks) wybiera element, który jest zgodny z podanym indeksem. W
tym wypadku jest to pierwszy nagłówek h3, który po przypisaniu mu klasy aktywny zmieni swój wygląd. Instrukcja $ ( " .
blok p") . eq (0) . show () pobierze pierwszy element p i doda metodę show (). Jeżeli element jest ukryty, metoda ta
zmienia wartość atrybutu display na "block". Jeżeli wybrany element został już wyświetlony, metoda nie będzie powodowała
żadnego działania.
Kolejny blok instrukcji odnosi się do sytuacji, gdy po kliknięciu określonej opcji powi-nien zostać wyświetlony tekst
znajdujący się za wybranym nagłówkiem.
Polecenie $ ( " . blok h3") click (function () mówi, że po kliknięciu wybranego nagłówka powinna zostać wywołana funkcja,
która będzie realizowała wyświetle¬nie sąsiadującego z nim akapitu: $ (this) next ("p") .slideToggle ("slow") . siblings
("p: visible") .slideUp ("slow"). Metoda next () pobiera na¬stępny po wskazanym pasujący element typu rodzeństwo: siblings
O . Metoda slideToggle ("slow") wyświetla lub ukrywa wybrany element. Parametr " s low " określa szybkość ukrywania lub
pokazywania elementu.
W wyniku działania skryptu dla wskazanego elementu (h3) zostanie pobrany następ¬ny element p ("p :visible"), który się
wyświetli. Widoczny siostrzany (siblings) element p zostanie ukryty (slideUp). Do wybranego elementu h3 zostanie dodana
klasa aktywny: $ (this) . toggleClass ("aktywny"), a siostrzany element h3 utraci klasę aktywny.
4.3.2. Proste animacje
Strony internetowe z pokazami slajdów, animowanymi menu lub innymi animacjami coraz częściej są tworzone w języku
JavaScript. Biblioteka jQuery korzysta z efektów dostępnych w JavaScript, a konfigurowanie ich przy użyciu jQuery jest
dużo prostsze.
Do pokazywania i ukrywania elementów często wykorzystuje się metody show ( ) oraz hide () . Można je wywoływać z
parametrem określającym czas trwania akcji. Parame¬trem może być wartość ' s 1 ow ' , ' no rma ' lub ' f ast t.
Kolejna metoda to slideToggle (). Jest ona odpowiednikiem metod show () oraz hide O . Automatycznie sprawdza, czy wybrany
element jest ukryty, czy nie, i wyświetla go lub ukrywa.
Następne metody to fadełn ( ) oraz fadeOut O . Działają prawie identycznie jak show () oraz hide O . Różnica polega na
tym, że ukazują i ukrywają element, zmie-niając stopniowo jego przezroczystość.
Metody s 1 ide Down ( ) oraz s 1 ideUp ( ) też pokazują lub ukrywają elementy, ale efektem animacji jest zsuwanie i
rozsuwanie elementu. Przykład wykorzystania tych metod do animowania treści strony został pokazany poniżej, a wynik
interpretacji kodu widać na rysunkach 4.7 i 4.8.
x Google
Biblioteka jQuery !! Kliknij
Rysunek 4.7. Pokazanie wszystkich elementów
Co się
' II
I Kliknij
Rysunek 4.8. Ukrywanie napisu
Przykład 4.13
<head>
<title>Zjazd</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"›
<script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script>
$(document).ready(function()