Bu yazımızda, daha önce başladığımız "jQuery'de kendi eklentimizi oluşturma" yazımıza devam edeceğiz, form input (textbox) kutusunun yanında, girilecek veri ile ilgili açıklama yapılan bir uygulama yapacağız. İlk açıklamalar için önceki dersimize göz atabilirsiniz.
Bu sefer "$.extend()" yapısını kullanarak oluşturduğumuz fonksiyonları bir eklenti içinde toplayacağız.
Uygulama:
Bu uygulamamızda, kendi eklentimizi oluşturup, text kutusuna tıklandığında, yanında uyarı mesajının görünmesini sağlayacağız.
Uygulamamızda HTML5 data özelliğini kullanarak bilgileri alacağız. Herhangi bir stil (CSS) uygulaması yapmadım, siz bu mantık çerçevesinde istediğiniz düzenlemeyi yapabilirsiniz.
HTML yapısı:
<div id="area">
<div>
<label>Adı Soyadı: </label><input type="text" name="adsoyad" id="adsoyad" data-info="Adınızı ve soyadınızı giriniz!" onfocus="startEngine(this.id)" onblur="stopEngine(this.id)" /><span></span>
</div><br />
<div>
<label>E-posta: </label><input type="text" name="eposta" id="eposta" data-info="Eposta adresinizi giriniz!" onclick="startEngine(this.id)" onblur="stopEngine(this.id)" /><span></span>
</div>
</div>
Javascript kodları:
<script type="text/javascript">
$.extend({
showInfo:function(id){
var info = $("#"+id).data("info")
$("#"+id).next('span').text(info);
$("#"+id).next('span').css({
'background':'url("uyari.png") no-repeat bottom left',
'margin-left':'10px',
'padding-left':'20px',
'font-style':'italic',
'color':'red'});
},
stopInfo:function(id){
$("#"+id).next('span').text("");
$("#"+id).next('span').css({'background':''});
}
});
function startEngine(id){
$.showInfo(id);
}
function stopEngine(id){
$.stopInfo(id);
}
</script>
Açıklamalar:
- 2. "$.extend()" yapısıyla oluşturduğumuz fonksiyonları bir arada topladık, ve eklentimizi oluşturduk, eklentimiz parametre olarak bir "id" bilgisi istiyor. Not:Burdaki işlemi birbirine bağlı fonksiyonlar kullanarak tek bir işlem de de çözebilirdik
- 18. Kutuya tıklandığında "startEngine()" fonksiyonu çağrılıp, eklentimizin içindeki "showInfo()" fonksiyonu ile "span" alanına uyarı yazdırılıyor.
- 21. Kutu terkedildiğinde "stopEngine()" fonksiyonu çağrılıp, eklentimizin içindeki "stopInfo()" fonksiyonunu ile uyarı alanı temizleniyor.
Burada yapılan uygulamanın amacı, en basit anlamda jQuery plugin (eklenti) oluşturma yapılarından birini kısaca tanıtmaktı. Yukardaki uygulamayı basit bir fonksiyon dizisiyle çözmeniz de mümkün tabii, fakat daha kapsamlı uygulamalarınızı eklenti haline getirip, kullanılmasını kolaylaştırmak en doğrusu bence...
Kolay gelsin, görüşmek üzere...
