jQuery #4 – Stylizowanie selektorów, o DOM ciąg dalszy

Lut 10
2012

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.

Dodaj komentarz

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