Bir projede lazim oldugunda yazmis oldugum Jquery eklentisini eklemek istiyorum.
Plugin input[type=text] alanlarinin title tagini okuyarak gri renkte varsayilan bir deger atiyor.
input alani aktiv oldugunda ise varsayilan deger kayboluyor alani bos birakip terkettiginizde ise varsayilan deger yine otomatik olarak ekleniyor.
Asagidaki resimdede görüldügü gibi,böylelikle kullanicilara o alana nasil bir deger girmeleri gerektiklerine dair ipucu veriliyor.
(function($) { $.fn.watermark=function(options) { opts = $.extend($.fn.watermark.defaults,options); $('input[type="text"]').each(function() { if($(this).attr('title')) { $(this).val($(this).attr('title')); $(this).addClass(opts.cssClass); } }); $("input[type='text']").focus(function() { if($(this).val() == $(this).attr('title')) { $(this).val(''); $(this).removeClass('water') ; } }); $("input[type='text']").blur(function() { if($(this).val() == '') { $(this).val($(this).attr('title')); $(this).addClass('water'); } }); $('input[type="submit"]').click(function() { $("input[type='text']").each(function() { if($(this).val() == $(this).attr('title')) { $(this).val(''); } }); }); }; $.fn.watermark.defaults = { cssClass: 'water' }; })(jQuery);
eklentinin cagrilisi:
$('form').watermark({cssClass:"red"});
“red” eklenecek olan css sinifinin adi.
Eger su sekilde cagrirsaniz
$('form').watermark();
.water adinda bir css sinifi eklenecektir
sinifin icerigi su sekilde ola bilir:
.water { color:#c0c0c0; }
eklentiyi isteginize göre degistire bilirsiniz.
sorusu olan olursa asagidan sora bilir.