jQuery selector w przykładzie z animacją elementów (isotope)

Demo:
allcss htmljquery

Wykorzystywanie selektorów ma swoje uzasadnienie tylko w konkretnych przypadkach. Nie są one tak bardzo popularne jak inne funkcje, jednak dobrze zaprojektowane dają ogromne możliwości. Za pomocą selektorów możemy wpływać m.in. na:

  • wygląd
  • zachowanie
  • animację
  • zliczanie elementów


Selektory w pewnych zadaniach są nie do zastąpienia, dodatkowo bardzo duża paleta ich zastosowania pozwala na szerokie ich wykorzystanie na stronie. Mój przykład w całości opera się na na (jQuery selector) oraz css. Przykład obrazuję animację elementów (nazwałem to isotope – bardzo popularny plugin do animacji elementów na stronię, choć nie jest to kopia tego plugina, a raczej bardzo proste odwzorowanie), oraz zlicza liczbę elementów i wypisuje na ekranie.

Układ elementów strony HTML

Nawigator z kategoriami do wyświetlenia, oraz elementy do animacji. W polu p będzie się wyświetlać aktualna liczba elementów.

<div class="ewd_isotope">
	<div class="isotope_header">
		<span class="iso" id="all_element">all</span>
		<span class="iso" id="css">css</span>
		<span class="iso" id="html">html</span>
		<span class="iso" id="jquery">jquery</span>
		<p class="iso_countme"></p>
	</div>
	<div class="isotope_content">
		<div class="iso_element" name="css"></div>
		<div class="iso_element" name="css"></div>
		<div class="iso_element" name="jquery"></div>
		<div class="iso_element" name="html"></div>
		<div class="iso_element" name="html"></div>
		<div class="iso_element" name="css"></div>
		<div class="iso_element" name="html"></div>
		<div class="iso_element" name="jquery"></div>
		<div class="iso_element" name="css"></div>
		<div class="iso_element" name="html"></div>
		<div class="iso_element" name="jquery"></div>
		<div class="iso_element" name="css"></div>
		<div class="iso_element" name="jquery"></div>
		<div class="iso_element" name="jquery"></div>
		<div class="iso_element" name="html"></div>
		<div class="iso_element" name="css"></div>
		<div style="clear:both;"></div>
		
	</div>
</div>

jQuery SELECTOR

Cały skrypt ma swoje serce w skrypcie jQuery. Kolory kategorii, animację, liczbę elementów, oraz sumowanie tychże elementów opiera się w jQuery.

        var isoelement_css = $('div[name="css"]');
	var isoelement_jquery = $('div[name="jquery"]');
	var isoelement_html = $('div[name="html"]');
	var iso_count = $('.iso_element').length;
	var iso_count_css = $('div[name="css"]').length;
	var iso_count_html = $('div[name="html"]').length;
	var iso_count_jquery = $('div[name="jquery"]').length;
		
	isoelement_css.css("background" ,"#B24A7D");
	isoelement_jquery.css("background" ,"#76BCFF");
	isoelement_html.css("background" ,"#8D708E");
		
	$('.iso').click(function(){
	$('.ewd_selector-title').hide();
	});
		
	$('#all_element').click(function(){
	$('.iso_element').show();
	$('.iso_element').animate({ width: "100px" }, 'slow');
	$( ".iso_countme" ).append( "<h3 class=ewd_selector-title>" + iso_count + " elements </h3>" );
	});
	$('#css').click(function(){
	$('.iso_element:not([name="css"])').animate({ width: "0px" }, 'slow');
	$('.iso_element:not([name="css"])').hide("slow");
	$('.iso_element[name="css"]').show();
	$('.iso_element[name="css"]').animate({ width: "100px" }, 'slow');
	$( ".iso_countme" ).append( "<h3 class=ewd_selector-title>" + iso_count_css + " elements</h3>" );
	});
	$('#html').click(function(){
	$('.iso_element:not([name="html"])').animate({ width: "0px" }, 'slow');
	$('.iso_element:not([name="html"])').hide("slow");
	$('.iso_element[name="html"]').show();
	$('.iso_element[name="html"]').animate({ width: "100px" }, 'slow');			
	$( ".iso_countme" ).append( "<h3 class=ewd_selector-title>" + iso_count_html + " elements</h3>" );
	});
	$('#jquery').click(function(){
	$('.iso_element:not([name="jquery"])').animate({ width: "0px" }, 'slow');
	$('.iso_element:not([name="jquery"])').hide("slow");
	$('.iso_element[name="jquery"]').show();
	$('.iso_element[name="jquery"]').animate({ width: "100px" }, 'slow');
	$( ".iso_countme" ).append( "<h3 class=ewd_selector-title>" + iso_count_jquery + " elements</h3>" );
	});

Zdefiniowanie elementów

Każdą element ma przypisaną nazwę (css, jquery, html). Do zmiennej za pomocą selektora przypisuję do danej kategorii.

 var isoelement_css = $('div[name="css"]');

Bardzo podobnie do zmienne przypisuję liczbę elementów za pomocą funkcji length().

$('div[name="css"]').length;

Manipulowanie elementami

Wygląd elementów

Mając już zdefiniowane elementy możemy brać się za określenie wyglądu i zachowań.
Bardzo prosto możemy określić wygląd każdego elementu, lub wszystkich naraz. Albo poprzez dodanie dodatkowej klasy addClass(‚moja_klasa’), albo jak w tym przykładzie dodanie wewnętrznych stylów css.

Animacja elementów

Każdy element kategorii jest zbudowany dokładnie tak samo. Różnią się one wyłącznie nazwą kategorii.

$('.iso_element:not([name="css"])')

Funkcja ta po kliknięciu na kategorię css będzie odpowiadać za animację elementów różnych od wybranej. I tak również działają pozostałe kategorii. Do tego przypisane są funkcję show(), hide(), animate(), które tłumaczyć chyba nie trzeba. Na końcu jest funkcja append, która w znacznik p wypisuje liczbę elementów.

Podsumowanie

Jak widać, na przykładzie kilku prostych selektorów i funkcji jQuery można stworzyć bardzo ciekawe elementy na stronie. Bardziej zainteresowanych selektorami odsyłam na stronę jQuery z listą wszystkich selektorów.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

CAPTCHA
Change the CAPTCHA codeSpeak the CAPTCHA code