Bu aralar nedendir bilmem bir jquery öğrenme istegi doÄŸdu içime. çalışmalara baÅŸladıktan sonra gerçekten bir arayüz geliÅŸtiricisinin kesinlikle öğrenmesi gereken en önemli konulardan biri olarak düşünmeye baÅŸladım… Her yerde karşımıza çıkan jquery artık flash animasyonların yerini tutacak kadar geliÅŸti… Aslında web sitemde jquery anlatımlarına baÅŸtan sona konu bazlı olarak yer vermeyi düşündüm ama sonradan bundan vazgeçtim. Böyle iÅŸimize yarayacak güzel örneklere yer vermek daha mantıklı geldi… Ä°leride kendi adıma bir web sitesi açarsam… Bu bilgileri ve bu gibi bir dünya örnek yapıp paylaÅŸmayı düşünüyorum…  Åžimdi ÖrneÄŸimize geçelim…

Örnek web sitelerinde gördüğümüz ve kullanılması herzaman muhtemel bir örnek… Jquery ile ilk verdiÄŸim ilk uygulama oldugu için iÅŸe yarar biÅŸey olmasınıda istedim… Kısaca Sayfamızda bulunan bir input text formun value deÄŸeri olarak ‘Arama yapın veya buraya adınızı giriniz’ gibi deÄŸerler atayarak. input içine tıkladığımızda yani focus yaptığımızda value deÄŸerinin silinmesi. focus olayı bittiÄŸinde yani blur olayında eÄŸer input text in içinde deÄŸer varsa yani value deÄŸeri doluysa aynen kalması… ama deÄŸer yoksa… tekrar valur deÄŸerini EÄŸer içinde deÄŸer varsa o deÄŸerin kalması ama içinde deÄŸer yoksa ‘Arama yapın veya buraya adınızı giriniz’ gibi deÄŸerleri atamaktır…

İlk Önce Sayfamıza Jquery kodunu çağırıyoruz.

<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

Daha sonra body kodlarımızın içine input textimizi hazırlıyoruz…

<input type="text" value="Adınızı Giriniz" />

Şimdi Jquery Kodlarımız yazalım

$(document).ready(function(){

 $('input[type="text"]').focus(function(){

 $(this).select(); // girince gitti

 $(this).val("");

 });

 $('input[type="text"]').blur(function(){

 var Valuemiz = $(this).val();
 if(Valuemiz == "" || Valuemiz == null ){

 $(this).val("Seçtikmi");
 }else{

 $(this).select(Valuemiz);

 }
 });

 })

Demo

Be Sociable, Share!

•