BLOG

Kurs jQuery – od podstaw cz.3 [czytanie i modyfikacja]

25.03.2013 r.
21:02
Kurs jQuery – od podstaw cz.3 [czytanie i modyfikacja]
Oto seria dziesięciu lekcji kursu biblioteki jQuery, od podstaw. Dzisiejsze strony WWW nie mogą być już statyczne, potrzeba im dynamiki, interaktywności (komunikacji z użytkownikiem) oraz szybkiego działania. Wszystkie te cechy możemy zaimplementować dołączając do naszej statycznej strony bibliotekę.

1.Kurs jQuery – od podstaw cz.1 [instalacja, pierwszy skrypt]
2.Kurs jQuery – od podstaw cz.2 [selektory, metody]
3.Kurs jQuery – od podstaw cz.3 [czytanie i modyfikacja]
4.Kurs jQuery – od podstaw cz.4 [piszemy formularz]
5.Kurs jQuery – od podstaw cz.5 [POST, GET, AJAX]
6.Kurs jQuery – od podstaw cz.6 [funkcje]
7.Kurs jQuery – od podstaw cz.7 [wtyczki]
8.Kurs jQuery – od podstaw cz.8 [najlepsze gotowe rozwiązania]
9.Kurs jQuery – od podstaw cz.9 [najlepsze gotowe rozwiązania cz.2]
10.Kurs jQuery – od podstaw cz.10 [najlepsze gotowe rozwiązania cz.3]

Skrypt, który napiszemy jest dostępny pod adresem: http://mLaskowski.pl/kursy/jquery/lekcja3/index.html

W trzeciej lekcji, przy okazji poznawania nowych funkcji, napiszemy wspólnymi siłami prostą galerię zdjęć, którą w kolejnych lekcjach będziemy modyfikować. Zaczynajmy!

Czytanie i modyfikacja elementów

Dzięki dwóm funkcją, jakie udostępniają nam autorzy biblioteki jQuery, mamy możliwość w łatwy sposób odczytać lub zmodyfikować zawartość jakiegoś elementu w kodzie HTML. Są to funkcje text() oraz html(). Pierwsza, jak łatwo się domyślić edytuje nam jedynie tekst, natomiast za pomocą drugiej możemy zmodyfikować tekst wraz z kodem HTML. Aby złapać o co chodzi popatrz na poniższe przykłady, które ilustrują działanie funkcji text() oraz html().

Mamy prosty blok, który chcemy dynamicznie, za pomocą jQuery wypełnić treścią:

<div id="content"></div>

Możemy to zrobić wykorzystując na przykład funkcję text():

$(document).ready(function(){
    $("#content").text("Oto blok zmodyfikowany funkcją text");
})

W powyższym przykładzie możemy zamiennie zastosować funkcję text() z html(), jednak poniższy przykład zadziała poprawnie tylko z użyciem funkcji html():

$(document).ready(function(){
    $("#content").html("Oto blok zmodyfikowany funkcją text");
})

Aby przypisać zawartość jakiegoś elementu np. do zmiennej należy wybrać ten element i ustawić funkcję text() lub html() pustą:

$(document).ready(function(){
    var tekst = $("#content").text();
    alert (tekst);
})

Jeżeli element posiada już jakąś zawartość istnieje możliwość jego modyfikacji. Aby dodać tekst po treści zawartej w elemencie użyj funkcji append(), jeżeli natomiast chcesz dodać nową treść przed treścią istniejącą użyj funkcji prepend().

Czytanie i modyfikacja atrybutów

W języku HTML elementy posiadają swoje atrybuty (np. obrazek img posiada atrybut alt, title, src), akapity i bloki mogą posiadać klasy i identyfikatory, odnośniki a posiadają atrybuty href lub target. Dzięki funkcji attr() masz bardzo łatwy dostęp do atrybutów w bibliotece jQuery. Zobacz poniższy przykład:

    Projekt 1 Projekt 2
Projekt 3 Projekt 4

 

Powyższy kod wyświetla 4 obrazki. Każdy z nich ma atrybut src (ścieżkę do pliku) oraz atrybut alt (opis pliku). Mamy również blok o identyfikatorze nazwa_projektu. Dodając poniższy kod sprawisz, że w bloku o identyfikatorze nazwa_projektu wyświetli się zawartość atrybutu alt.

$(document).ready(function(){
    $('img').mouseover(function(){
        $('#nazwa_projektu').text($(this).attr('alt'));
    });
    $('img').mouseout(function(){
        $('#nazwa_projektu').text('');
    })
})

 

Wykorzystujemy poznane w drugiej lekcji metody generujące zdarzenia (mouseover – wykonuje blok kody, gdy kursor myszy najedzie na element, mouseout – wykonuje blok kodu gdy kursor zjedzie z wybranego elementu). Do bloku nazwa_projektu przypisujemy tekst atrybutu obrazka na który najechał kursor.

Dla utrwalenia wiedzy dodaj kod, który po kliknięciu w obrazek wyświetli ścieżkę do klikniętego obrazka. Staraj się rozwiązać problem własnymi siłami, a następnie spójrz na kod poniżej:

$(document).ready(function(){  
    $('img').click(function() {
        alert ($(this).attr('src'));
    })
})

 

Przygotowanie projektu galerii zdjęć

Znając już podstawowe zdarzenia oraz funkcje, które modyfikują elementy oraz atrybuty możemy napisać prostą galerię zdjęć. Zaczynamy:

1. Utwórz nowy projekt HTML składający się:

- pliku index.html (kod źródłowy naszej strony)

- pliku style.css (style naszej strony oraz galerii)

- pliku z najnowszą wersją biblioteki jQuery (jquery-1.9.1.js)

- katalogu „foto” (miejsce na nasze zdjęcia)

- pliku galeria.js (kod naszej galerii)

2. Dołącz w pliku index.html pliki ze stylami, biblioteką jQuery oraz z kodem naszej galerii. Pamiętaj, aby dołączać pliki z własnym po dołączeniu biblioteki jQuery. W innym wypadku nasz skrypt nie zadziała.

	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	
	
	Kurs jQuery - galeria zdjęć
	
	
	<script src="jquery-1.9.1.js">
	<script src="galeria.js">
	</head>
	<body>	
		
</body> </html>

3. Do katalogu foto wgraj 9 obrazków, które wyświetlą się w galerii zdjęć. Zanumeruj obrazki od 1.jpg do 9.jpg.

4. Dodaj poniższy kod do pliku galeria.js

$(document).ready(function(){  
    for(i=1;i<=9;i++) {
        if (i%2) {
            $("#zdjecia").append("
"); } $("#zdjecia").append(" Zdjęcie numer "+i+" "); } })

Powyższy kod wygeneruje nam galerie zdjęć (9 zdjęć) i pomniejszy zdjęcia do wysokości 100px. Dodatkowo co drugie zdjęcie skrypt dodaje znacznik <br>, który oznacza przejście do nowej linii.

5. Do styli CSS dopisz poniższy kod:

#duze-zdjecie  {
    background-color:grey;
    width:246px;
    height:179px;
    position:absolute;
    top:150px;
    left:350px;
}

Powyższy kod doda obok zdjęć box, w którym będę chciał po najechaniu na miniaturę wyświetlić oryginalnej wielkości obrazek.

6. Dodaj do pliku galeria.js kod, który obsłuży zdarzenie:

    $("img").mouseover(function(){
        $("#duze-zdjecie").css("background-image","url('"+$(this).attr('src')+"')");
    }).mouseout(function(){
        $("#duze-zdjecie").css("background-image","");
    })

Posłużyliśmy się modyfikacją atrybutu css, background-image i dodaliśmy do niego atrybut src obrazka, na którym aktualnie zatrzymał się kursor. Po zjechaniu z obrazka otrzymujemy z powrotem szary kwadrat.

Podsumowanie

W lekcji 3 poznaliśmy w jaki sposób odczytywać oraz modyfikować atrybuty i elementy. Utworzyliśmy również bardzo prostą galerię zdjęć, która po najechaniu na miniaturkę generowała nam powiększoną fotografię. W kolejnej lekcji będziemy udoskonalać nasz skrypt i dodawać kolejne funkcje.

Skrypt galerii dostępny pod adresem: http://mLaskowski.pl/kursy/jquery/lekcja3/index.html

Tagi: kurs,jquery,czytanie,modyfikacja,galeria,metody,biblioteka,javascript,java,php,html.css
Czytane: 139256 razy

comments powered by Disqus