Podczas wykonywania operacji na drzewie DOM ważnym elementem pracy jest przypisywanie i usuwanie klas z selektorów. Dzięki takim zabiegom możliwe jest dynamiczne dostosowanie strony do akcji użytkownika. Poruszymy więc dzisiaj w kursie kwestie drzewa DOM oraz rozszerzania jQuery o moduł UI (User Interface).

 

 

Document Object Model

O manipulacji na drzewie DOM wspomniałem już trochę w wprowadzeniu, lecz omówiłem w nim tylko funkcję css() i text(). Dzisiaj chciałbym pokazać w jaki sposób dodawać i usuwać klasy z selektorów oraz pobierać i modyfikować ich dowolny atrybut.

Za dodawanie klasy do selektora odpowiada funkcja addClass(), natomiast za jej usunięcie removeClass(). Obie jako argument przyjmują nazwę klasy do dodania/usunięcia.

Stwórzmy prosty system menu, w którym po kliknięciu na odnośnik przypiszemy do niego klasę „active„. Przed przypisaniem takiej klasy należy pamiętać o usunięciu wszystkich innych takich klas, aby jej nie zdublować.

<html>
<head>
	<title>Kurs jQuery #4 example 1</title>
	<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
		$("#menu li").click(function() {
			$("#menu li").removeClass("active");
			$(this).addClass("active");
		});
	});
	</script>
 
	<style type="text/css">
	.active {
		color: red;
		font-weight: bold;
	}
	</style>
</head>
 
<body>
	<ul id="menu">
		<li class="active">Odnosnik</li>
		<li>Odnosnik</li>
		<li>Odnosnik</li>
		<li>Odnosnik</li>
	</ul>
</body>
</html>

DEMO

 

jQuery pozwala także na swobodne pobieranie wartości atrybutu dowolnego selektora przy pomocy funkcji attr(), przyjmującej jako wartość nazwę atrybutu. Zmodyfikujmy przykład #1 tak, aby po kliknięciu w już aktywny link zmienić jego kolor na zielony.

<html>
<head>
	<title>Kurs jQuery #4 example 2</title>
	<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
		$("#menu li").click(function() {
			$("#menu li").removeClass("active2");
 
			var jaka_klasa = $(this).attr('class');
			if(jaka_klasa == "active") {
				$(this).addClass("active2");
			}
 
			$("#menu li").removeClass("active");
			$(this).addClass("active");
		});
	});
	</script>
 
	<style type="text/css">
	.active {
		color: red;
		font-weight: bold;
	}
	.active2 {
		color: green;
		font-weight: bold;
	}
	</style>
</head>
 
<body>
	<ul id="menu">
		<li class="active">Odnosnik</li>
		<li>Odnosnik</li>
		<li>Odnosnik</li>
		<li>Odnosnik</li>
	</ul>
</body>
</html>

DEMO

 

Inne przydatne funkcje:

  • $(‚.active’).html() – zwraca zawartość danego znacznika wraz z całym kodem HTML znajdującym się w nim – DEMO.
  • $(‚.active’).html(‚<b>test</b>’) – nadpisuje zawartość danego znacznika. W przeciwieństwie do text() nie filtruje znaczników HTML – DEMO.
  • $(‚ul li’).first().addClass(‚active’) – nadaje klasę active pierwszemu elementowi w liście – DEMO.
  • $(‚.active’).next().addClass(‚active2’) – nadaje klasę active2 elementowi, który znajduje się za selektorem z klasą active – DEMO.

 

 

User Interface

User Interface (UI) to dodatek, który w znacznym stopniu rozszerza możliwości standardowej biblioteki jQuery. Jest on rozpowszechniany oddzielnie, gdyż jego cała zawartość wraz z plikami graficznymi znacznie przewyższa rozmiar samego jQuery. Podczas ściąganiu dodatku możemy wybrać tylko interesujące nas moduły, aby nie być skazanym na megabajtową paczkę *.zip z wszystkimi komponentami.

Do testów możemy pobrać pełną wersje UI, w niczym nam to nie przeszkodzi, a plusem będzie to, że stworzymy na własnej maszynie ciekawą platformę testową z wszystkimi dostępnymi funkcjami i możliwościami.

Aby móc korzystać z funkcji UI należy tak jak w przypadku jQuery dołączyć jeden plik *.JS w segmencie head naszej strony.

<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="jquery-ui-1.8.16.custom.min.js"></script>

UI poza oferowaniem nowych funkcji rozszerza także te standardowe. Świetnym przykładem może tutaj być funkcja animate(), która standardowo nie animuje koloru tła elementów. Po załadowaniu UI możemy już w efektowny sposób zmieniać właściwość background-color dowolnego selektora.

<html>
<head>
	<title>Kurs jQuery #4 example 7</title>
	<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="jquery-ui-1.8.16.custom.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
		$(".kwadrat").click(function() {
			var kolor = $(this).css("background-color");
 
			if(kolor == "rgb(255, 0, 0)") {
				$(this).animate({"backgroundColor": "lime"}, "slow");
			} else {
				$(this).animate({"backgroundColor": "red"}, "slow");
			}
		});
	});
	</script>
 
	<style type="text/css">
	.kwadrat {
		display: block;
		float: left;
		width: 333px;
		height: 222px;
		border: 1px solid black;
		background-color: red;
	}
	</style>
</head>
 
<body>
	<div class="kwadrat"></div>
	<div class="kwadrat"></div>
	<div class="kwadrat"></div>
	<div class="kwadrat"></div>
	<div class="kwadrat"></div>
	<div class="kwadrat"></div>
</body>
</html>

DEMO

 

W powyższym przykładzie demonstracyjnym po kliknięciu kursorem w kwadrat zmienia on swój kolor. Gorąco zachęcam do przejrzenia dokumentacji User Interface we własnym zakresie, gdyż dodatek ten daje naprawdę ogromne możliwości.

Przeczytaj także: