Bu örneğimizde JQuery ile checkbox kullanarak resim gizleyip göstermeyi yapacağız.
Bunun için ilk olarak JQuery’nin sitesinden JQuery dosyasını indiriyoruz ve çalışma dosyamıza bağlıyoruz. Daha sonra kendi açtığımız JavaScript dosyamızı çalışma dosyamıza bağlıyoruz.
HTML: Resmi gizlemek ve göstermek için bir checkbox oluşturuyoruz. Yazdığımız kısa açıklamayı label etiketinin içerisine yapıyoruz. Bu sayede yazının üzerine basıldığında checkbox’da bundan etkilenecek.
Daha sonra gizleyip göstereceğimiz resmi ekliyoruz.
|
1 2 3 4 5 6 7 |
<input type="checkbox" checked id="chk"><label id="aciklama" for="chk">Resmi Gizle</label> <img id="r" src="yazilimbilisim-logo.png" width="300px"> <script src="js/jquery-1.11.1.min.js"></script> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$(document).ready(function(){ $("#chk").on("change",function(){ if($("#chk").prop("checked")){ $("#aciklama").html("Resmi Gizle"); $("#r").fadeIn(1000); }else{ $("#r").fadeOut(1000); $("#aciklama").html("Resmi Göster"); } }); }); |
JQUERY: Jquery kodlarımızı kurucu metodun içerisine yazıyoruz. Checkbox’ın iki değeri (seçilmiş/seçilmemiş) olduğu için ilk olarak değiştirme (change) olayını atıyoruz.
‘Prop’ ise herhangi bir nesnenin özelliğini değiştirmek için kullanılır. Eğer checkbox seçilmiş durumdaysa resim görülecek ve resmin üzerindeki yazı ‘Resmi Gizle’ olacak. ‘FadeIn’ olayı ise resim görüntülenirken oluşacak animasyonu ifade ediyor. Başka animasyonlar da kullanılabilir. ‘FadeIn’in parantezleri içerisine resmin kaç milisaniyede görüntüleneceğini yazıyoruz. Şuan 1000 ms yani 1 saniyede görüntüleniyor.
Şartın else koşuluna ise seçilmemiş durumda çalışacak olan kodları yazıyoruz. Resmin üzerindeki yazı ‘Resmi Göster’e dönüşüyor ve resim 1 saniyede kayboluyor.
|
1 2 3 4 5 6 7 8 9 10 11 |
img { display: block; } input[type="checkbox"] { width: 20px; height: 20px; } |
CSS: Resmi yazıların altına almak için; resmi blok nesne haline getiriyoruz. Böylece yazı ve checkbox üstte, resim altta olacak.
Son olarak da checkbox’ın boyutunu biraz büyütüyoruz.
Kodları toparlayacak olursak şu şekilde oluyor;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>JQuery Checked Kullanımı</title> </head> <style> img { display: block; } input[type="checkbox"] { width: 20px; height: 20px; } </style> <body> <input type="checkbox" checked id="chk"><label id="aciklama" for="chk">Resmi Gizle</label> <img id="r" src="yazilimbilisim-logo.png" width="300px"> <script src="js/jquery-1.11.1.min.js"></script> <script> $(document).ready(function(){ $("#chk").on("change",function(){ if($("#chk").prop("checked")){ $("#aciklama").html("Resmi Gizle"); $("#r").fadeIn(1000); }else{ $("#r").fadeOut(1000); $("#aciklama").html("Resmi Göster"); } }); }); </script> </body> </html> |
[…] Jquery Checked Kullanma […]