Bu Yazı Basit jQuery Dersleri Adlı Serinin 15 Yazısından 5.si Sayfalararınıza Eklediğiniz textarea(Yazı Alanları) İçin Jquery İle Daha Güzel Bir Görünüm Ve Kullanılabilirlik Sağlayabilirsiniz.
Ufak Bir Sayfaya 20 Satır Uzunluğunda Bir Text Alanı Eklemeniz Hoş Durmayacaktır Bunun İçin jQuery’nin autoResize Eklentisini Kullanabilirsiniz.
Eklentinin Orjinal Sayfası İçin Tıklayın.
Nasıl Mı? Hemen Başlayalım Ozaman.
Ekteki Dosyada Gerekli Ekleri Bulabilirsiniz.
Öncelikle Sayfanıza jQuery Kütüphanesini Ve Gerekli Olan autoResize Eklentisini Çağırıyoruz.
<script type="text/javascript" src="jquery-1.3.min.js"></script>
<script type="text/javascript" src="autoResize.js"></script><br />
Dosyaları Çağırdıktan Sonra Gerekli Olan JS Kodlarımızı Yazmamız Gerek.
<script type="text/javascript">
$(function(){
$('textarea').autoResize({
// Genişleme Sırasındaki Opaklık:
onResize : function() {
$(this).css({opacity:0.8});
},
// Genişlemeden Sonraki Opaklık:
animateCallback : function() {
$(this).css({opacity:1});
},
// Animasyon Hızı:
animateDuration : 300,
// Daha Fazla Alan:
extraSpace : 20
});
});
</script>
Şimdi Yukarıdaki JS Kodları İle Sitedeki Tüm textarealar Etkilenicek Bunun İçin Bir Düzenleme Yapabilirsiniz Seçim Size Kalmış
Sadece Belirli id Özelliğine Sahip Olan textarea Seçmek İçin
Yukarıdaki Kodda Bulunan $('textarea') İfadesini Aşşağıdaki Gibi Değiştirebilirsiniz.
$('textarea#id_Adi_Gelicek')
Yada Belirli Bir Class Özeliğini Taşıyan textareaları Değiştirmek İstersenizde Yine Yukarıdaki Kodda Bulunan $('textarea') İfadesini Aşşağıdaki Gibi Değiştirebilirsiniz.
$('textarea.Class_Adi_Gelicek')
Şekilde Değiştirmeniz Yeterli Olucaktır.
Örnek HTML Ve CSS Kodları:
<textarea type="text"></textarea>
textarea {overflow:hidden; outline:none; display:block; resize:none; overflow-x:hidden; overflow-y:hidden;}
Eklentinin Orjinal Sayfası İçin Tıklayın.