Yazılım Örnekleri

Bugün jQuery ile bilgi baloncukları oluşturma örneği göstereceğim. Yani tanımladığımız bir elementin üzerine geldiğimizde o lement hakkında bilgi verebileceğimiz bir pencere açılacak.

Bu örneğimizde linklere, textlere veya elementlere bilgi baloncuğu açarken "title" eiketini kullanacağız. Title etiketinin içine yazdırdığımız bilgiyi jquery yardımıyla bilgi baloncuğu şeklinde kullancılarımıza göstereceğiz. 

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

<style type="text/css">  

.dis_kutu {width: 960px; margin: 0 auto; overflow: hidden; height:910px;}

.bilgi_balonu {
    display:none;
    position:absolute;
    border:1px solid #333;
    background-color:#161616;
    border-radius:5px;
    padding:5px 10px;
    color:#fff;
    font-size:12px Arial;
    border-bottom:4px solid #C03;
}
</style>

<script type="text/javascript">
$(document).ready(function() {
        // bilgi_balonu only Text
        $('.bilgi_bal_ac').hover(function(){
                // Üstüne gelince
                var title = $(this).attr('title');
                $(this).data('tipText', title).removeAttr('title');
                $('<p class="bilgi_balonu"></p>')
                .text(title)
                .appendTo('body')
                .fadeIn('slow');
        }, function() {
                // Üstünde ayrılınca
                $(this).attr('title', $(this).data('tipText'));
                $('.bilgi_balonu').remove();
        }).mousemove(function(e) {
                var mousex = e.pageX + 20; //Get X coordinates
                var mousey = e.pageY + 10; //Get Y coordinates
                $('.bilgi_balonu')
                .css({ top: mousey, left: mousex })
        });
});
</script>

<div class="dis_kutu">
 Tüm Örnekler için | <a title="Daha Fazla Örnek İçin Tıklayın" class="bilgi_bal_ac" href="http://alpsonmez.com">alpsonmez.com</a> 
  </div>

<div class="dis_kutu">
  
<h2>Üstüne gelince açılacak paragraf</h2>
<p title="Yazının üstüne gelince burdaki bilgi baloncuğu açıldı" class="bilgi_bal_ac">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin purus odio, elementum quis eleifend nec, accumsan et leo. Mauris tellus tellus, vehicula id pulvinar ut, egestas molestie odio. Suspendisse potenti.</p>

 

<h2>Resim üzerine gelince açılacak bilgi baloncuğu</h2>
<img src="image.jpg" class="bilgi_bal_ac" title="Resim bilgi balonu" />
 

<h2>İnput bilgi baloncuğu</h2>
<input type="text" placeholder="İsminizi giriniz" class="bilgi_bal_ac" title="İsminizi giriniz"/>
</div>