Reklama
Wizyt
Dzisiaj: 290Wszystkich: 520567

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()





Reklama