PHP | Jquery | Css | Codeigniter | Unity3D


Bu örnekte jquery nin elementler üzerinde kullandığımız change event ını kullanarak açılır kapanır ve seçime bağlı olarak renk değiştiren divler yapıcaz. Bu örnekten yola çıkarak kendi tab uygulamanızı sitenizin tema renk seçicisini vs. yapabilirsiniz ve daha birçok yerde işinize yarayacaktır. Normalde jquery olmadan javascript ile yapmak istesek, gerçi ikisi de hemen hemen aynı şey desek de aynı değil. javascript kullanarak yapıcak olsan elementin onchange özelliğine javascript tarafında oluşturduğumuz fonksiyonu yazıcaktık yani :

  
  function degisim (){
  
  alert ('Değişim algılandı !');
  }
  

Burası javascript bloğumuzdu şimdi elementi oluşturalım :



Bu durumda selectbox ın değişim (onchange) olayına degisim() fonksiyonunu tetiklemiş olduk.
Şimdi gelelim bunu jquery ile nasıl daha aktif kullanabildiğimize ;
ilk olarak bir php ya da html sayfası oluşturup jquery kütüphanesini çağıralım daha sonra sayfa içersinde "script" kodları arasına ya da harici olarak çağırıcak olduğumuz jquery kodlarımızı aşağıdaki gibi yazalım :

$(document).ready(function(e) {
    
 $('div.ic').hide();
 $('div.ic:first').show();
 
 $('#secim').change(function(){
  
  var deger = $("#secim option:selected").attr("value");
  
  $('div.ic').slideUp(200);
  $('#'+deger).slideDown(200);
  })
  
  var ilkrenk = $("#renk option:first").val();
  $('#sag').css('background-color',ilkrenk);
  
  $('#renk').change(function(){
   
   
   var renk = $(this).val();
   $('#sag').css('background-color',renk);
   })
  
 
});

 

jquery script kodlarını yazdığımıza göre şimdi alttaki sayfa elemetlerini body tagları arasına ekleyelim:

1-) Birinci makale
2-) İkinci makale
3-) Üçüncü makale
4-) Son makale

"renk" adını verdiğimiz "selectbox" ın option value lerinde hexadecimal renk kodları vardır ve her değişimde bu optionların valuleri jquery tarafından $('#renk').change(function(){}) fonksiyonu içindeki $(this).val() , yani değişim anındaki option un value değerini almaktadır. Şimdi dinamik olarak oluşturduğumuz geçiş ve renk değiştirme olaylarını test edebiliriz.

Soru ve Tartışma Konularınız için;

Yayınlayan
comments powered by Disqus
Yazar: Windofelm
Description: Jquery ile selectbox değişim (change) örneği, seçim kutusunda değişim olayına fonksiyon atamak.