Merhaba herkese. Bu konuda sizlere Toggle efektinin kullanışını anlatacağım. Umarım faydalı olur.
-Nedir bu Toggle efekti ?
+ Bu efekt ile sitenizde, tasarımlarınızda herhangi istediğiniz bir yere açılır/kapanır özelliği kazandırabilirsiniz.
-Peki nasıl yapılır ?
+ Hemen anlatayım. Öncellikle 2 adet alana ihtiyacımız var. Bunlardan birincisi açma/kapama komutunu vereceğimiz yer(bu bir buton olabilir, bir resim olabilir, bir yazı olabilir). İkincisi gizlenecek/gösterilecek alan.
Örnek:
Bu şekilde oluşturduk. "komutyeri" classlı alana tıkladığımızda "gizlenecekyer" classlı alan gizlenecek veya gösterilecek. Alanları oluşturduk. Şimdi de script kodlarımıza geçelim. Kullanmamız gereken script kodları aşağıda:
Evet script kodlarımız bunlar. Şimdi bu script kodlarını inceleyelim. "$("xxxx").click(function()" burada "xxxx" olan kısıma komut verilecek alanı yazacağız. Altında yer alan "$("xxxx").toggle(1000)" kodunda ki "xxxx" kısmına da gizlenecek olan alanı yazacağız.
Şimdi scriptimizi yukarıda oluşturduğumuz alana göre düzenleyelim :
Bu şekilde ayarladık. Sonuç;
"komutyeri" adlı alana tıkladığımızda "gizlenecekyer" adlı alan gizlenecek veya görünecek.
Yukarıdaki oluşturduğumuz kodları kullanarak bir demo hazırladım. Hemen demoya bakıp çalışıp çalışmadığını kontrol edelim.
Demo: http://plnkr.co/edit/QlkgmwfQxzuewOrNncfM?p=preview
Evet efektin kullanımı bu kadar. Basit, güzel ve zevkli bir efekt. Bu efekt ile yapabileceklerinize bir kaç örnek verecek olursam; açılır kapanır duyuru panelleri, açılır kapanır kullanıcı panelleri vs.
Umarım yeterince açık olmuştur ve işinize yarar.
Anlatım tamamen bana aittir. İyi günler.
-Nedir bu Toggle efekti ?
+ Bu efekt ile sitenizde, tasarımlarınızda herhangi istediğiniz bir yere açılır/kapanır özelliği kazandırabilirsiniz.
-Peki nasıl yapılır ?
+ Hemen anlatayım. Öncellikle 2 adet alana ihtiyacımız var. Bunlardan birincisi açma/kapama komutunu vereceğimiz yer(bu bir buton olabilir, bir resim olabilir, bir yazı olabilir). İkincisi gizlenecek/gösterilecek alan.
Örnek:
Kod:
<div class="komutyeri">Tıkla</div>
<div class="gizlenecekyer">
içerik
</div>Kod:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
jQuery.noConflict();
jQuery(document).ready(function($) {
$("xxxx").click(function() {
$("xxxx").toggle(1000);
});
});
</script>Şimdi scriptimizi yukarıda oluşturduğumuz alana göre düzenleyelim :
Kod:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
jQuery.noConflict();
jQuery(document).ready(function($){
$(".komutyeri").click(function(){
$(".gizlenecekyer").toggle(1000);
});
});
</script>
<div class="komutyeri">Tıkla</div>
<div class="gizlenecekyer">
içerik
</div>"komutyeri" adlı alana tıkladığımızda "gizlenecekyer" adlı alan gizlenecek veya görünecek.
Yukarıdaki oluşturduğumuz kodları kullanarak bir demo hazırladım. Hemen demoya bakıp çalışıp çalışmadığını kontrol edelim.
Demo: http://plnkr.co/edit/QlkgmwfQxzuewOrNncfM?p=preview
Evet efektin kullanımı bu kadar. Basit, güzel ve zevkli bir efekt. Bu efekt ile yapabileceklerinize bir kaç örnek verecek olursam; açılır kapanır duyuru panelleri, açılır kapanır kullanıcı panelleri vs.
Umarım yeterince açık olmuştur ve işinize yarar.
Anlatım tamamen bana aittir. İyi günler.
