RSS

Prototype javascript framework’ü için geliştirdiğim radio group eklentisi

Mart 02

Biliyorsunuz ki Prototype genel yapı itibariyle radio group’ların seçili olan değişkenin değerini getirmiyor.
Bu sorunun çözümü dom nesne bütünlüğüne uygun görülmediği için maalesef gelecek sürümlerde eklenecekler arasında bulunmuyor.

Prototype javascript framework’ünün Form.Element.Serializers sınıfını extend eden aşağıdaki kod sayesinde $F() ve $() fonksiyonlarını radio group’ları içinde sorunsuz şekilde kullanabilirsiniz.

prototype-radio-group.js dosyasının içeriği

Form.Element.Serializers.radioSelector = function(element, value) {
  if (Object.isUndefined(value)){
    checkedRadio = Form.getInputs(element.form,'radio',element.name).find(function(radio) { return radio.checked; })
    return (checkedRadio) ? checkedRadio.value : null;
  } else {
    checkedRadio = Form.getInputs(element.form,'radio',element.name).find(function(radio) { return radio.value == value; });
    checkedRadio.checked = true;
  }
}

Form.Element.Serializers.input = function(element, value) {
  switch (element.type.toLowerCase()) {
    case 'checkbox':
      return Form.Element.Serializers.inputSelector(element, value);
    case 'radio':
      return Form.Element.Serializers.radioSelector(element, value);
    default:
      return Form.Element.Serializers.textarea(element, value);
  }
};

Bu eklentiyi kullanırken dikkat etmeniz gerekenler:

  • Bu javascript dosyasının web sayfasına head bölümünde prototype.js’den hemen sonra yüklenmesi gerekiyor.
  • Kullanacağınız radio group’ta sadece bir input için id tanımlamanız gerekiyor. $F() ve $() fonksiyonlarını kullanırken bu id ile işlem yapmalısınız
  • Prototype.js dosyasının 1.6.1 sürümü ile test edilmiş ve sorunsuz olarak çalıştığı görülmüştür. İleriki sürümlerinde Form.Element.Serializers sınıfında değişiklik yapılmadığı sürece sorunsuz olarak çalışmaya devam edecektir.

Aşağıda bir web sayfası içerisindeki örnek kullanımını görebilirsiniz.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/prototype-radio-group.js"></script>
</head>
<body>
<form>
  <input type="radio" id="rg_test" name="test" value="1" />1<br />
  <input type="radio" name="test" value="2" checked="checked" />2<br />
  <input type="radio" name="test" value="3" />3<br />
</form>
<script type="text/javascript">
  alert($F('rg_test')); // Seçili olan radio değerini, yani 2'yi verecektir.
  $('rg_test').setValue('3'); // Radio grubunda seçili olan değer 3 olur.
  alert($F('rg_test')); // Yeni radio group değeri olan 3'ü verecektir.
</script>
</body>
</html>
 

Posted by on 02 Mart 2010 in Javascript, Programlama

2 Comments

2 responses to “Prototype javascript framework’ü için geliştirdiğim radio group eklentisi

  1. Yasin

    25 Mayıs 2011 at 15:16

    peki bunu checkbox için nasıl uygulacak denedim ama çalışmadı

     
    • Göktuğ ÖZTÜRK

      12 Haziran 2011 at 21:33

      Checkbox tipi bağımsız olarak çalışmak üzere oluşturulmuştur. Bu sebeple checkbox’lar için böyle bir yamaya gerek yok.
      Eğer birden fazla checkbox ile aynı değişkenin değerlerini tutacaksanız name=”checkbox[]” şeklinde bir kullanım uygun olacaktır.

       

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir