Wpisy otagowane ‘JavaScript’

Ruch na stronie z jQuery

wtorek, 15 Październik 2013

Nie będę pisał o tym, jak zwiększyć ruch na stronie w sensie ilości użytkowników odwiedzających serwis, tylko o wprowadzeniu ruchomych elementów reagujących na określone zachowania użytkownika. Skorzystam przy tym z dobrodziejstw JavaScriptu i biblioteki jQuery. Jeżeli nie znasz jQuery, przeczytaj Co mogę zrobić z jQuery?.

Efekt, którego realizację chcę tu przybliżyć, zaprezentowałem poniżej. Najedź myszą na kolejne grafiki. Dalej znajdziesz kolejne etapy jego realizacji.

Obraz 1.

Obraz 2.

Obraz 3.

Obraz 4.

Obraz 5.

Obraz 6.

Zaczniemy od kodu HTML:

<div id="photos">
<div class="photo">
 	<div class="text"><p>Obraz 1.</p></div>
 	<img src="img1.jpg" id="p1" />
</div>
<div class="photo">
 	<div class="text"><p>Obraz 2.</p></div>
 	<img src="img2.jpg" id="p2" />
</div>
<div class="photo">
 	<div class="text"><p>Obraz 3.</p></div>
 	<img src="img3.jpg" id="p3" />
</div>
<div class="photo">
 	<div class="text"><p>Obraz 4.</p></div>
 	<img src="img4.jpg" id="p4" />
</div>
<div class="photo">
 	<div class="text"><p>Obraz 5.</p></div>
 	<img src="img5.jpg" id="p5" />
</div>
<div class="photo">
 	<div class="text"><p>Obraz 6.</p></div>
 	<img src="img6.jpg" id="p6" />
</div>
</div>

Całość znajduje się w znacznikach div z identyfikatorem photos. W zależności od szerokości tego elementu w jednym wierszu znajdzie się większa lub mniejsza liczba grafik. Każda grafika składa się z dwóch części: górnej – widocznej od razu i dolnej – pokazującej się po najechaniu myszą. Do elementów img dodałem identyfikatory. Grafiki poprzedzone są opisami zawartymi w elementach div klasy text, a łącznie z grafiką w elementach div klasy photo. Te divy służą do ograniczenia widoczności grafik do połowy ich wysokości, co jest realizowane przez definicje styli CSS:

#photos
{
 	width: 750px;
 	margin: 20px auto;
}
.photo 
{
 	width: 350px;
 	height: 350px;
 	overflow: hidden;
 	display: inline-block;
 	position: relative;
}
img 
{
 	display: none;
 	position: relative;
 	top: 0px;
}
.text 
{
 	width: 100%;
 	height: 100px;
 	background: #fff;
 	position: absolute;
 	left: 0px;
 	bottom:-100px;
 	z-index: 100;
}

Div photos swoją szerokością ogranicza ilość grafik w wierszu. Klasa photo definiuje widoczny obszar dla każdego pliku graficznego do kwadratu o boku 350px. Właściwość overflow ustawiona na hidden ukrywa paski przewijania dla zawartości nie mieszczących się w zdefiniowanym obszarze, display: inline-block sprawia, że elementy tej klasy zachowują się na zewnątrz jak elementy liniowe (ustawiają się jeden za drugim), a wewnątrz są elementami blokowymi zachowującymi zdefiniowane wymiary. Pozycjonowanie relatywne pozwoli na użycie tych elementów jako odniesienia dla elementów zawartych wewnątrz nich. Elementy img początkowo nie są widoczne. Za ich pokazanie będzie odpowiedzialny odpowiedni kod jQuery. Pozycjonując te elementy będziemy mogli wpływać na ich wartość top liczoną względem zewnętrznego elementu pozycjonowanego relatywnie. Została nam jeszcze klasa text. Elementy tej klasy ze względu na to, że są mniejsze niż element nadrzędny są pozycjonowane absolutnie, czyli właściwość bottom odnosi się do dolnej krawędzi elementu nadrzędnego, a nie elementu klasy text. Ujemna wartość ukrywa tekst pod dolną krawędzią elementu klasy photo, a z-index z wartością 100 gwarantuje pojawianie się tekstu na, a nie pod grafiką.

Teraz ostatnia i najważniejsza część, czyli kod jQuery:

$(document).ready(function()
{
	$('#p1').fadeIn(1000);
 	$('#p2').delay(200).fadeIn(1000);
 	$('#p3').delay(400).fadeIn(1000);
 	$('#p4').delay(600).fadeIn(1000);
 	$('#p5').delay(800).fadeIn(1000);
 	$('#p6').delay(1000).fadeIn(1000);
 
 	$('.photo').mouseover(function()
 	{
 		if($('img',this).queue('fx').length==0)
		{
			$('img',this).animate({'top':'-350px'},500);
			$('div',this).delay(200).animate({'bottom':'0px'},800);
		}
 	});
 	$('.photo').mouseleave(function()
 	{
 		if($('img',this).queue('fx').length<2)
		{
			$('div',this).animate({'bottom':'-100px'},400);
			$('img',this).delay(200).animate({'top':'0px'},700);
		}
	});
});

Skrypt rozpoczynamy od pokazania kolejnych grafik z efektem fadeIn. Efekt dla każdego kolejnego obrazka odpala się z opóźnieniem 200 ms względem poprzedniego (funkcja delay() z argumentem o 200 wyższym od poprzedniego). Poniżej mamy obsługę dwóch zdarzeń: mouseover i mouseleave. W pierwszym przypadku mamy dwie animacje funkcją animate(). Najpierw przewijamy w górę grafikę, a potem tekst. Całość jest zawarta w instrukcji warunkowej, którą na razie pominę. Warto sprawdzić zachowanie skryptu bez instrukcji if przy jednym i drugim zdarzeniu. W mouseleave najpierw tekst wraca na miejsce początkowe (tuż pod dolną krawędź widocznego obszaru), a następnie grafika zjeżdża w dół.

Ponieważ w jQuery efekty animacji są kolejkowane, to wszystkie zdarzenia powodujące wywołanie animacji, będą dokładały te animacje do kolejki. Szybkie, kilkukrotne najechanie i opuszczenie kursorem myszy tej samej grafiki spowoduje utworzenie kolejki wielu efektów, które będą musiały być wykonane. Użytkownik nie będzie już nic robił, a obrazki będą się przesuwały w górę i w dół tyle razy, ile razy te efekty zostały wcześniej dodane do kolejki. Rozwiązaniem tego problemu jest kontrolowanie ilości efektów w kolejce, co umożliwia nam właściwość length obiektu queue. Właśnie tę funkcję realizują instrukcje warunkowe w obsłudze zdarzeń. W pierwszym przypadku nowe animacje będą dodane tylko w sytuacji gdy kolejka jest pusta. W drugim bierzemy pod uwagę fakt, że pierwsza faza może nie zostać zakończona, więc jeden efekt może jeszcze być obecny w kolejce.

Zaprezentowany w tym artykule przykład nie będzie działał poprawnie w przeglądarkach IE8 i wcześniejszych ze względu na użytą wartość display: inline-block, której wymienione przeglądarki nie obsługują. Jeżeli komuś zależy na tych przeglądarkach powinien wymienić display: inline-block na float: left. Możliwe, że będzie to wymagało dopracowania kilku innych szczegółów.



Jaki jest zasięg zmiennych w JavaScript

wtorek, 12 Czerwiec 2012

Zasięg zmiennych w JavaScript może dla niektórych okazać się zaskakujący. Wystarczy jednak uruchomić poniższy kod, by wszystko stało się jasne.

<html>
<script type="text/javascript">
var a=1;
var b=2;
var c=3;
 
zasieg(a);
 
function zasieg(a)
{
	var b;
	a++;
	b++;
	c++;
	alert(a+' '+b+' '+c);
}
 
alert(a+' '+b+' '+c);
</script>
</html>

Każda z wymienionych trzech zmiennych zachowuje się inaczej. Zmienna a z początkową wartością 1 jest przekazana do funkcji zasieg() jako argument. W związku z tym wewnątrz funkcji jest zmienną lokalną. Inkrementacja tej zmiennej wewnątrz funkcji nie wpływa na wartość zmiennej a poza funkcją. Pierwsza instrukcja alert(a+’ ‘+b+’ ‘+c) wyświetli wartość 2 dla zmiennej a, natomiast druga - wartość 1.

Zmienna b jest ponownie tworzona wewnątrz funkcji, wobec czego jest to całkowicie nowa zmienna i nie posiada wartości, a więc nie podlega również inkrementacji. Instrukcja alert(a+’ ‘+b+’ ‘+c) wewnątrz funkcji wyświetli dla zmiennej b NaN (not a number – wartość nie numeryczna). Natomiast poza funkcją wartością zmiennej b będzie niezmiennie 2.

Zmienna c nie jest ani przekazywana do funkcji zasieg() jako argument, ani nie jest tworzona wewnątrz tej funkcji. Wartością początkową zmiennej c jest 3. Wewnątrz funkcji zasieg() ta zmienna jest nadal dostępna. W języku JavaScript zmienne, które nie są przekazane do funkcji jako argumenty, ani nie były utworzone wewnątrz funkcji słowem var, a istniały poza funkcją, automatycznie stają się wewnątrz funkcji zmiennymi globalnymi. Zmiany wartości zmiennej c, które zajdą wewnątrz funkcji, będą też widoczne poza tą funkcją. Obydwie instrukcje alert(a+’ ‘+b+’ ‘+c) wyświetlą tę samą wartość zmiennej c.



Co mogę zrobić z jQuery?

wtorek, 10 Listopad 2009

Framework (biblioteka?) jQuery zyskuje sobie coraz większą popularność. Nadal jednak wiele osób nie do końca wie, co to jest i jak tego używać. JQuery jest lekką biblioteką JavaScript często nazywaną frameworkiem. W rzeczywistości jest to jeden plik, który można pobrać z adresu http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.js. Zapisujemy go w katalogu głównym strony i włączamy go umieszczając w sekcji nagłówkowej strony linijkę:

<script type =”text/javascript” src=”jquery-1.3.2.js”></script>

Tworzymy kolejny plik z rozszerzeniem „js” np. test.js i dołączamy go do strony w podobny sposób jak bibliotekę:

<script type =”text/javascript” src=”test.js”></script>

Ważne jest, by biblioteka była włączona jako pierwsza, w przeciwnym razie nie będzie widoczna w pliku test.js

Pisząc ten artykuł zakładam, że dysponujesz wiedzą i umiejętnościami przynajmniej na poziomie szkolenia wideo „Twoja własna prywatna strona wizytówka”, które jest umieszczone na tej stronie w dziale „Sekrety Webmasterów”.

Na początku wstawimy na stronę cztery bloki div i w każdym z nich umieszczamy krótki tekst np. div1, div2, itd. Na stronie te teksty powinny ułożyć się jeden pod drugim. Pod blokami div umieścimy listę nieuporządkowaną. Kompletny kod xhtml powinien wyglądać tak:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Serwan. Co mogę zrobić z jQuery?</title>
	<script type ="text/javascript" src="jquery-1.3.2.js"></script>
	<script type ="text/javascript" src="test.js"></script>
</head>
<body>
	<div>div1</div>
	<div>div2</div>
	<div>div3</div>
	<div>div4</div>
 
	<ul style="clear: left;">
		<li>Moduł 1: Twoja własna strona WWW wizytówka.</li>
		<li>Moduł 2: Squeeze page</li>
		<li>Moduł 3: Twoja super oferta</li>
		<li>Moduł 4: Galeria internetowa</li>
		<li>Moduł 5: Katalog Twoich produktów</li>
		<li>Moduł 6: Portal społecznościowy</li>
	</ul>
</body>
</html>

Teraz w pliku test.js piszemy:

$(document).ready(function()
{
	$('div').css({'margin': '12px', 'border': 'solid 2px #006600', 'padding': '10px', 'width': '20%', 'background-color' : '#99ffcc', 'font-weight' : 'bolder'})
});

Początkiem każdego skryptu jQuery jest wywołanie funkcji $(). $() jest tak naprawdę aliasem funkcji głównej frameworka – jQuery(). Wywołanie $() zwraca obiekt, na rzecz którego wywołujemy metodę ready(). Parametrem metody ready() jest funkcja anonimowa, czyli pozbawiona nazwy. Jej definicja występuje w miejscu wywołania. Funkcja, która jest parametrem metody ready() jest wywoływana natychmiast po wczytaniu całej strony html/xhtml. Następnie pobieramy kolejny obiekt lub obiekty posługując się selektorami. W tym przypadku selektorem jest div czyli wszystkie elementy <div></div> na aktywnej stronie. Dla wybranego obiektu/obiektów wywołujemy metodę css(), która ustawia dla tych obiektów style css zdefiniowane w argumencie metody.

Nie jest to nic niezwykłego. Podobny efekt można osiągnąć używając stylów css. Czasem jednak i taka możliwość może się przydać, np. przy uzależnieniu stylów od tego, czy przeglądarka obsługuje JavaScript, czy nie.

Kolejne instrukcje również wpisujemy wewnątrz funkcji będącej argumentem metody ready(), czyli przed końcowymi nawiasami „});”. Tym razem zmienimy położenie bloków div w reakcji na zdarzenie kliknięcia w dowolnym obszarze strony czyli na elemencie body.

$('body').click(function()
{
	$('div').css({'float': 'left'});
});

Po najechaniu kursorem myszy na jeden z bloków div, wywołujemy dla niego animowane przekształcenie do podanych w argumencie metody animate() stylów.

$('div').mouseenter(function()
{
	$(this).animate({padding: '18px', margin: '8px', borderWidth: '4px'}, 300);
});

Podobnie możemy zrobić przy opuszczeniu bloku div.

$('div').mouseleave(function()
{
	$(this).animate({padding: '10px', margin: '20px', borderWidth: '2px'}, 200);
});

Klikając na jeden z bloków możemy ukrywać i pokazywać listę ul z zastosowaniem różnych efektów. Każdy blok div prezentuje inny efekt. Aby bloki były rozróżniane, należy dodać do nich identyfikatory: a, b , c i d. Identyfikator klikniętego właśnie bloku pobieramy przy pomocy metody attr() i wstawiamy do zmiennej atrybut. Zmienną tę sprawdzamy w instrukcji switch i dla odpowiednich wartości wywołujemy odpowiednie części kodu. Instrukcja if($(‘ul’).is(‘:hidden’)) służy do sprawdzenia, czy lista została ukryta, czy też nie.

$('div').click(function()
{
	var atrybut=$(this).attr('id');
	switch(atrybut)
	{
		case 'a':
			if($('ul').is(':hidden'))
			{
				$('ul').show(700);
			}
			else
			{
				$('ul').hide(1600);
			}
			break;
		case 'b':
			if($('ul').is(':hidden'))
			{
				$('ul').slideDown(700);
			}
			else
			{
				$('ul').slideUp(1600);
			}
			break;
		case 'c':
			if($('ul').is(':hidden'))
			{
				$('ul').fadeIn(700);
			}
			else
			{
				$('ul').fadeOut(1600);
			}
			break;
		case 'd':
			$('ul').fadeTo(1700, 0.10).fadeTo(700, 0.90);
			break;
	}
});

Teraz przejdziemy do elementów li listy ul. Zapis ‘li:first’ wybiera pierwszy element li. Po przesunięciu kursorem myszy nad tym elementem wszystkie parzyste elementy listy (elementy są indeksowane od 0) zostaną zformatowane przy pomocy zadeklarowanych stylów (‘li:even’ oznacza elementy parzysta).

$('li:first').mousemove(function()
{
	$('li:even').css({'background-color': '#99ccff'});
});

Zapis ‘li:last’ wybiera ostatni element li. Po przesunięciu kursorem myszy nad tym elementem wszystkie nieparzyste elementy listy zostaną zformatowane przy pomocy zadeklarowanych stylów (‘li:odd’ oznacza elementy nieparzysta).

$('li:last').mousemove(function()
{
	$('li:odd').css({'background-color': '#ffccff'});
});

Zastosowań i możliwości jQuery jest o wiele więcej. Często jQuery wykorzystuje się do efektownej prezentacji grafiki, prezentacji komunikatów, wstępnej validacji formularzy i do prostego posługiwania się technologią AJAX. Do jQuery napisano też wiele interesujących pluginów.