mehmetduran.com - Paylaşmak Güzeldir...
Jquery ile Tooltip Uygulaması
Bu yazımda jquery ile tooltip uygulamasını kullanmayı göstereceğim. Bu uygulamayı kullanarak yaptığımız uygulamaları daha görsel daha kullanışlı hale getirebiliriz. Jquery ile artık daha görsel uygulamalar üzerinde çalışıyorum. Bu da bunlardan bir tanesi. Sizlerle paylaşarak, sizlere farklı bir yöntem sunmayı amaçladım. Umarım işinize yarar. Şimdi nasıl kullanacağımıza bakalım.

Öncelikle bu uygulama için jquery kütüphanesine ve tooltip için gerekli javascript kütüphanelerini, tooltip için gerekli css dosyalarını kullanacağımız sayfaya ekliyoruz. (Bu dosyaların hepsini buradan indirebilirsiniz.)

Daha sonra sayfamızda tooltip kullanacağımız kontrolleri belirlediğimiz, tooltip'in hangi event ile çalışacağını ve bunun gibi özellikleri belirttiğimiz script kodlarımız şöyle olacak:

$(document).ready(function(){
    $('#kutular input').tooltip({tooltip:'#tooltip',mode:'hover',onShow:onShow});
});
function onShow(sender)
{
    var $tooltip = $('#tooltip');
    if($(window).width()-sender.target.offset().left <= $tooltip.width()) {
        $('.tooltiptextleft',$tooltip).removeClass('tooltiptextleft').addClass('tooltiptextright');
        $('.tooltiparrowleft',$tooltip).removeClass('tooltiparrowleft').addClass('tooltiparrowright');
    }
    else{
        $('.tooltiptextright',$tooltip).removeClass('tooltiptextright').addClass('tooltiptextleft');
        $('.tooltiparrowright',$tooltip).removeClass('tooltiparrowright').addClass('tooltiparrowleft');
    }
}

Script kodlarımız böyle. Örnkete kullandığım html kodlar ve tooltip için gerekli html kodlar ise şöyle olacak:

<div id="kutular">
  <div>
    <input id="Text1" type="text" />
  </div>
  <div>
    <input id="Text2" type="text" />
  </div>
  <div>
    <input id="Text3" type="text" />
  </div>
</div>
<div id="tooltip" class="tooltiparea">
  <div class="tooltiptextleft">
    <div class="tooltiptext2">
      <div class="tooltiptext3">
        <p class="image">
          <img src="comment_warning_48.png" alt="avatar" />
        </p>
        <p class="content">
          Gerekli !
        </p>
 
      </div>
    </div>
  </div>
  <div class="pointer">
    <img class="tooltiparrowleft" src="comment-arrow-flip.gif" alt=" " align="bottom"
        style="border-width: 0px;" />
  </div>
</div>

Tüm yapacaklarımız bu kadar artık tooltip uygulamasını kullanabiliriz. Örnek ekran görüntüsü ise şöyle:

Jquery ile Tooltip Uygulaması

Buradan uygulamanın çalışır halini görebilirsiniz.
Buradan da uygulamayı çalışır dosyalarıyla beraber indirebilirsiniz.

İyi Çalışmalar!
Mehmet Duran 12 Ekim Pazar 2008 1 17628 5,0
Javascript Web Tasarım jQuery Jquery Tasarım-Görsellik İndir
Bookmark and Share
Bu Yazıyı Değerlendirin.
Konuyla İlgili Olabilecek Diğer Yazılar Jquery İnner Fade Uygulaması Lightbox Modal Popup Visual Studio'da Jquery Intellisense Kullanımı Jquery 1.3 Versiyonu için CHM Dokümanı jQuery Ajax ile Arama Merkezi (Uygulamam)
Yorumlar
Yorum Yaz
RSS Yorum Takibi
Muhammed Özdemir 18 Ağustos Salı 2009 18:51 #1
Güzel uygulama tşkler
İsim :
Site :
Yorum :

Buradan bu yazıya ait yorumları RSS olarak takip edebilirsiniz.

Bu servis ile yazılara eklenen yorumları RSS ile takip ederek konu ile ilgili başkaları tarafından yapılan yorumları veya konuyla ilgili sorduğunuz sorulara verilen cevapları görebilirsiniz.
Büyük işler gibi, büyük düşüncelerinde davula ihtiyaçları yoktur.
Bölümler
Yazılar
Arşiv
Arama
Linkler
Site İçi Arama
Son Zamanlarda Ne Yapıyorum ?
İstatistikler - Araçlar - Reklam
İstatistikler
Sayaç
Mehmet Duran | mehmetduran.com | Copyright © 2009