Yılmaz Uğurlu - metoikos - Jquery Form Tooltip

Jquery Form Tooltip

Per, 19 Haz 2008 04:34:00, yazar: Yılmaz Uğurlu, yorum:(3)

Web uygulamarlında en çok kullanılan elemanlardan biri formlardır. Web sayfalarımızın kullanıcı ile etkileşime girmesini sağlar, onlardan bilgi alabilmemize olanak verirler.

Formlar genelde kısa ve anlaşılır olsa da, yaptığınız uygulamaya göre çok karmaşık arayüzler ortaya çıkması olasıdır. Bir geliştirici için karmaşık bir form içerisinde form denetimi yapmak ne kadar eziyet verici (no more drama with open source) ise, bir kullanıcı için de karmaşık bir formu doldurmak ve herhangi bir hatalı giriş olduğunda bütün bu işlemleri tekrardan yapmak, çok daha eziyet edici bir durumdur.

Bu konuda yapabileceğimiz çeşitli şeyler elbette var. Form alanlarının üstüne ya da altına yerleştirililen yardım metinleri, form elemanlarının title niteliğine atanan mesajlar vs.

Kullanıcı açısından güzel bir deneyim yaratmak ve bu sırada kullanıcıya doldurduğu alan ile ilgili bilgiler vermek tabii ki çoğu geliştirici ve tasarımcının isteyeceği bir şeydir. Bu konuda kafa yorarken, ufak bir çalışma ile küçük bir Jquery ejklentisi ortaya çıkarmış oldum.

Jquery bildindiği gibi hazır bir javascript kütüphanesi, içeridiği özelt metodlar sayesinde web sayfalarmız üzerinden javascript işlemleri yapmamız çok daha kolay hale geliyor. Elbette Jquery‘ye ait pek çok hazır eklenti var ve bunlardan bazıları tooltip dediğimiz yardım mesajları görüntülememize olanak veren eklentiler. Ancak uzun araştımalarıma! rağmen tam olarak istediğim eklentiği bulamadığım için bu konuda bir şeyler yapmaya karar verdiğim ve geldiğim noktada oldukça güzel bir çalışma ortaya çıktığını düşünüyorum.

Geliştirdiğim eklentideki amaç, kullanıcı form alanına odaklandığında (yani form alanı seçili hale geldiğinde) kullanıcıya form alanı ile ilgili doldurması gereken bilginin nasıl bir biçimde olması gerektiği hakkında bilgi vermesi idi. Bu bilgiyide form alanına ait title niteliği içerisinden alması uygun olur diye düşündüm. Bu sayede kullanıcı forma odaklanmadığı taktirde form alanına ait title niteliği aktif olacak ve kullanıcıya bilgi verecek, form alanına tıklandığında ise daha farklı bir şekilde yardım mesajı kullanıcıya gösterilecek.

Kısaca bir ön izleme verecek olursak:

Sayfanın Hazırlanması

Öncelikli olarak Jquery kütüphanesinin sayfanıza eklenmiş olması gerekmektedir. Daha sonra (jquery.formtooltip.js) eklenti dosyasını döküman içerisine eklememiz gerekiyor. Ardından form alanlarımızda göstereceğimiz yardım metini için oluşturduğumuz css stil dosyasını dökümanımıza dahil ediyoruz.
Daha sonra yazacağımız kısa bir script ile form alanımız içerisindeki elemanlar için birer yardım metini oluşturmuş olacağız.

<script type="text/javascript">
$().ready(function(){
  $('#login_form').formtooltip();       
});
</script>

Tüm bu adımları toplu olarak gösterecek olursak.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<title>Jquery Form Tooltip Example</title>
	<meta name="author" content="Yılmaz Uğurlu" />
	<meta name="keyword" content="jquery, plugin, form, tooltip" />
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.form.tooltip.js"></script>
    <link type="text/css" rel="stylesheet" href="css/main.css" media="screen" />
    <link type="text/css" rel="stylesheet" href="css/jquery.formtooltip.css" media="screen" />
    <script type="text/javascript">
    $().ready(function(){
        $('#login_form').formtooltip();
        $('#email_form').formtooltip();
    });
    </script>
</head>
<body>
    <p><a href="http://www.2nci.com/lab/detail/jquery-form-tooltip">uygulama sayfasına dön</a></p>
    <div class="form_holder">
	    <form action="" method="post" id="login_form">
	        <p>
	            <label for="username">Kullanıcı Adı:</label>
	            <input type="text" name="username" id="username" class="txt" title="Kullanıcı adınızı giriniz!" />
	        </p>
	        <p>
	            <label for="password">Şifre:</label>
	            <input type="password" name="password" id="password" class="txt" title="Şifrenizi giriniz!" />
	        </p>
	        <p>
                <label>&nbsp;</label>
	            <input type="submit" name="login" value="Kayıt Ol!" class="btn" />
	        </p>
	    </form>
    </div>
    </body>
</html>

Kafanızı karıştırmadan uygulama hakkında biraz açıklama yapayım.

Eklemiş olduğumuz $(’#login_form’).formtooltip(); satırı ile eklentimiz yardım mesajlarını göstereceği formu algılamış oluyor. Form alanlarımıza eklemiş olduğumuz title niteliği içerisindeki mesajlarda, kullanıcımızın forma tıkladığında görüntüleyeceği mesajları oluşturan text içeriğini oluşturmuş oluyor.

Bütün yapmanız gereken formunuzu hazırlayıp gerekli dosyaları sayfanıza dahil etmek. Ardından eklenti işini yapıp, şık yardım mesajları görüntülemenize olanak verecek. İstediğiniz şekilde css dosyasını düzenleyerek yardım metinlerinin görünümünü değiştirebilirsiniz.

Uygulamanın çalışan örneğine buradan ulaşabilirsiniz.
Uygulama dosyalarına buradan ulaşabilirsiniz.