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ć.
[codesyntax lang=”javascript”]
<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>
[/codesyntax]
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.
[codesyntax lang=”javascript”]
<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>
[/codesyntax]
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.
[codesyntax lang=”javascript”]
<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>
[/codesyntax]
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.
[codesyntax lang=”javascript”]
<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>
[/codesyntax]
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.