Zdarzenia biblioteki jQuery.
Przykład listingu zastosowania metody bind do zastosowania określonej klasy do elementu strony.
Przyciski ukrywają i odkrywają odnośniki
<html>
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
div{width:400px;
margin:10px;
background-color:#f0f0f0;
}.hidden{
display:none;
}</style>
</head>
<body>
<div id="div-options">
<button
id="button-hidelinks">Ukryj odnośnik</button>
<button id="button-showlinks">Pokaż odnośnik</button>
</div>
<div class="rozdzial" id="rozdzial1">
<h3> Rozdział 1 </h3>
<p> To jest treść pierwszego akapitu</P>
<p> To jest treść drugiego akapitu</P>
<a href="/dane/rozdział1.pdf"> Pobierz </a>
</div>
<div class="rozdzial" id="rozdzial2">
<h3> Rozdział 2 </h3>
<p> To jest treść pierwszego akapitu</P>
<p> To jest treść drugiego akapitu</P>
<a href="/dane/rozdział2.pdf"> Pobierz </a>
</div>
//treść skryptu z wywołaniem zdarzenia
<script type="text/javascript">
$(document).ready(function(){
$('#button-hidelinks').bind('click',function(){
$('div a').addClass('hidden');
});$('#button-showlinks').bind('click',function(){
$('div a').removeClass('hidden');
});});
</script>
</body>
</html>
Zmiana stanu przycisków na przeciwny
Włączanie i wyłączanie odnośników za pomocą jednego przycisku.
Do naszego listingu dodajmy przycisk.
Oraz skrypt
Zadanie. Wykonać stronę na której obrazek będzie zakryty i stopniowo odkrywany przez kliknięcie w określony obszar obrazka. Przykładowo podzielony na 6 części, kliknięcie jednej z części odsłania tylko ten fragment, ponowne
kliknięcie zasłania odkryty obszar.