Kadir Özdemir

  • Ben Kimim
  • PHP
  • Sencha Touch
  • Home/
  • Javascript /
  • Jquery Watermark Plugin

Jquery Watermark Plugin

Skorp 10.12.2010 Leave a Comment

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.
Simple Jquery Watermark Plugin


(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.

ÖRNEK icin tikla

Skorp
2010-12-10
Tags:
Javascript Jquery
Share story:
← Previousssh anahtarli kimlik dogrulama
Next →XenServer Iso deposu olusturma

Written by Skorp

View all articles by Skorp

Website: http://www.skorp.eu

Related Articles

  • React Native – Kurulum

  • React Native

  • jQuery UI Dialog enterle tetiklemek

  • Jquery Validation sonradan kural ekleme

  • Jquery Dialog da Tinymce gösterme

Leave a Comment Cancel Reply

Your email address will not be published. Required fields are marked *

Social networks

Etiket Bulutu

Android Bilgisayar & Internet C# Cms css diger Kodlar featured Genel Java Javascript Linux Mobile PHP Silverstripe typo3 Veritabani Windows Zend Framework

Links

  • H E R K O N U
  • Hüseyin Koyun
  • Urban23k

Son Yorumlar

  • Primary Key – Unique ve Index nedir? için Onur
  • Centos de apache, php ve mysql kurulumu için sezer fidancı
  • React Native – Kurulum için React Native | Kadir Özdemir
  • React Native için React Native – Kurulum | Kadir Özdemir
  • Ben Kimim için serkan

Twitter

Follow @skorp54
There is an error in twitter widget, please make sure that you have set up the Twitter API settings
  • Ben Kimim
  • PHP
  • Sencha Touch

Arsivler

Kategoriler

Copyright © 2014 webberz.at