Bu yazımızda, tooltip uygulaması yapacağız. İlk önce tooltip eklentisini oluşturacağız, daha sonra da bu tooltip eklentisini kullanarak bir uygulama yapacağız.
Fig.1 Tooltip Uygulaması: Resimlerin üzerine gelince açılan popup.
İstediğimiz durum şu: iconların üzerine geldiğimizde sağında konu ile ilgili detayları içeren bir popup açılsın.
Uygulama:
Resimlerin üzerine gelin...
CSS yapısı:
#area_product{
position:relative;
border:1px dashed #ff0000;
width:540px;
height:140px;
padding:5px;
margin-bottom:14px;
clear:both;
}
#last_project_tip{
list-style:none;
}
.icons_tip{
float: left;
padding:10px;
}
#detail_page_tip{
display:none;
position:absolute;
text-align:center;
background:#292929;
width:500px;
height:310px;
border:1px solid #ccc;
padding:0px;
-moz-box-shadow:0px 0px 6px 1px #ccc;
-webkit-box-shadow:0px 0px 6px 1px #ccc;
box-shadow:0px 0px 6px 1px #ccc;
border-radius:6px;
}
#detail_page_tip img{
margin-left:0px;
margin-top:10px;
border-radius:4px;
border:none;
}
#last_project_tip li img{
border:none;
}
.site_company_tip{
float:left;
color:#fff;
margin:13px 0px 0 15px;
}
.site_cat_tip{
float:right;
margin:13px 15px 0 0;
color:#656364;
}
HTML yapısı:
<div id="area_product">
<ul id="last_project_tip">
<li class="icons_tip"><a href="http://www.pinusart.com" target="_blank"><img
src="gitar.png" alt="Merkezi Isıtma Sistemleri Müh." width="64" height="64" data-big-img="merkezi.jpg"
data-author="pinusart" data-cat="web tasarım" data-company="Merkezi Isıtma Sistemleri Müh."
data-link="http://www.merkeziisitmaproje.com.tr" title="" /></a>
</li>
<li class="icons_tip"><a href=""><img src="surf.png" alt="Temson Ltd. Şti." width="64"
height="64" data-big-img="temson.jpg" data-author="pinusart" data-cat="web tasarım"
data-company="Temson Ltd. Şti." data-link="http://www.temson.com.tr" title="" /></a>
</li>
<li class="icons_tip"><a href=""><img src="tatil.png" alt="Trilogic." width="64"
height="64" data-big-img="trilogic.jpg" data-author="pinusart" data-cat="web tasarım"
data-company="Trilogic" data-link="http://www.trilogic.com.tr" title="" /></a>
</li>
<li class="icons_tip"><a href=""><img src="twitman.png" alt="Temson Ltd. Şti." width="64"
height="64" data-big-img="temson.jpg" data-author="pinusart" data-cat="web tasarım"
data-company="Temson Ltd. Şti." data-link="http://www.temson.com.tr" title="" /></a>
</li>
</ul>
<div id="detail_page_tip"></div>
</div>
JQuery yapısı:
<script type="text/javascript">
$.fn.extend({
pinus_tip:function(){
$(this).on({
mouseenter:function(){
var fullImgPath=$(this).children('img').data('bigImg');
var fullLink=$(this).children('img').data('link');
var author=$(this).children('img').data('author');
var company=$(this).children('img').data('company');
var category=$(this).children('img').data('cat');
var icerik='<a href="'+fullLink+'" target="_blank"><img src="'+fullImgPath+'"/></a><div class="site_company_tip">'+company+'</div><div class="site_cat_tip">'+category+'</div>';
var linkTop=parseInt($(this).position().top);
var linkLeft=parseInt($(this).position().left);
$("#detail_page_tip").css({
left:60,
top:-100
});
var currentLeft=parseInt($("#detail_page_tip").css("left"))+linkLeft;
var currentTop=parseInt($("#detail_page_tip").css("top"))-linkTop;
$("#detail_page_tip").css({
left:currentLeft,
top:currentTop
});
$("#detail_page_tip").html(icerik);
$("#detail_page_tip").show();
},
mouseleave:function(){
$("#detail_page_tip").hide();
}
});
}
});
$(document).ready(function(){
//initialize
$('.icons_tip a').pinus_tip();
});
</script>
Açıklamalar:
- 3. "pinus_tip" adlı eklentimizi oluşturuyoruz,
- Eklentiyi bir nesneyle ilişkilendirdik, beklediğimiz ilişkilendirme yöntemi "icons_tip" sınıfı içeren bir "li" etiketinin içindeki "a" link etiketi ($(".icons_tip a")), örneğimizde (satır--xxx)".icons_tip" sınıf ile tanımladığımız alanın çocuk bağı olan link ("a") bölgesine girildiğinde ve çıkıldığında oluşacak olaylar için ".pinus_tip" plugini etkinleştirilmiştir
- ÖNEMLİ: "detail_page_tip" id'li detay sayfamızın pozisyonu, "absolute" olarak verilmiştir, bu katmanın içinde bulunduğu "area_product" id'li katmanın pozisyon değeri ise "relative" olarak belirlenmiştir, detay sayfamızın pozisyon değeri bu katmana göre belirlenmektedir.
- 4. Eklenti de belirtilen nesneye giriş ve çıkış olduğunda tetiklenecek olayı ".on" sistemiyle oluşturuyoruz (ÖNEMLİ: ".on()" yapısı, jQuery 1.7sürümünde eklenmiş bir özelliktir, daha önce bu tip işler için kullanılan, ".bind()", ".delagate()", ".live()" gibi yapıların yerine, hepsinin özelliklerini içeren bir sistem olarak eklenmiştir. Detaylar için buraya bakabilirsiniz.) .
- 5. "mouseenter" olayıyla, ilgili alana giriş yapılma durumunu kontrol edip, giriş yapıldığında ilgili alanın içinde bulanan resim "(img)" etiketi içinde (data) verileri ile verilmiş olan bilgileri değişkenlere aktarıyoruz,
- 11. Göstereceğimiz html yapımızı "data" ile elde ettiğimiz bilgilerle birlikte hazırlayıp, "icerik" değişkenine atıyoruz. (Önemli: Bu kısımda yaptığımız işlem sayesinde, sayfamızın yüklenme aşamasında herhangi bir resim çağrılmıyor. Fakat SEO açısından önemli olan veriler "img" etiketi içinde çağrılıyor. Bu durum sitenin yüklenme süresi açısından bize avantaj sağlar. Kullanıcı resimlerin üzerine geldiği zaman ilgili resimler açılır. Bir diğer önemli konu da;her tarayıcı da javascript aktif olmayabilir, bu sebepten linklerinizi kesinlikle sadece javascript sistemlerine göre hazırlamayın. Burada, görünen resimlerimize gideceğimiz linki zaten verdiğimiz için, javascript desteği olmayan bir tarayıcıda da açılsa, popup açılmayacaktır elbette fakat, kullanıcıyı istediğimiz adrese yönlendirmek hala elimizde olacaktır).
- 13,14. Üzerine geldiğimiz nesnenin "top" ve "left" bilgilerini alıyoruz (Bu verilere göre detay sayfamızın pozisyonunu belirleyeceğiz).
- 16. Detay sayfamızın pozisyonu sıfırlıyoruz (ilk konumuna ayarlıyoruz).
- 21,22. Detay sayfamızın üzerine gelinen nesneye göre alacağı pozisyonu belirliyoruz.
- 24. Yukarda belirlediğimiz pozisyon değerlerini, detay sayfamızın "top" ve "left" değerleri olarak atıyoruz.
- 28. Detay sayfamızın içine hazırladığımız içeriği koyuyoruz.
- 29. Detay sayfamızı gösteriyoruz.
- 31. Nesne üzerinden ayrıldığımızda ("mouseleave"), detay sayfamızı tekrar gizliyoruz.
Kolay gelsin, görüşmek üzere...
