JQuery Bilgi Baloncukları

 bcakir
 15 Aralık 2011

Merhaba arkadaşlar bu yazımda JQuery ile sitemize bilgi balancukları yani Tooltip eklemeyi göstereceğim. Bilgi baloncukları nedir diye merak ederseniz; Facebook’daki gibi bir kişinin resminin üzerine gelince çıkan bilgilendirme pencerelerdir. Bu yazımda 2 farklı örnek yapacağım. İlk örnek basitçe mantığını içerecek ve linkin üzerine gelince bilgi yazısı çıkacak. İkinci örneğimizde ise resim ve bilgilendirme yazıları birlikte yer alacak. Bu uygulamamızda da hazır kütüphane kullanacağım. Uygulamanın JQuery kısmında birkaç satır kod yazmamız yetecek fakat css ile güzel tasarımlar yapmak için zaman harcamamız gerekli fakat yapacağımız örneklerde küçük değişiklikler ile de göze hoş gelen tasarımlar elde etmeniz mümkün. Uygulamaları çalıştırabilmek için hazır JQuery kütüphanesine ihtiyaç duyacağınızdan dolayı örneklerin bulunduğu çalışır dosyayı bu yazımda da sizlerle paylaşacağım. Yapacağımız örneklerin yapısını açıkladım, artık geliştirmeye ilki ile başlayalım.

<!DOCTYPE html>
<html>
<head>
<title>Bcakir Tooltip</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="easyTooltip.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("a").easyTooltip();
});
</script>
<style>
#easyTooltip{
	padding:5px 10px;
	border:1px solid #122da4;
	background:#1aa3a4;
	color:#fff;
}
</style>
</head>
<body>
<a href="#" title="bcakir.com">bcakir</a>
<a href="#" title="Bilgi Bankası">bcakir</a>
<a href="#" title="Facebook Uygulamaları">bcakir</a>
</body>
</html>

İlk örneğimizi yukarıda yaptık. Mantığını anlamanız için elimden geldiğince çok basit tutmaya çalıştım. Şimdi biraz daha karmaşık olan ikinci örneğimizi yapmaya başlayalım.

<!DOCTYPE html>
<html>
<head>
<title>Bcakir Tooltip</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="easyTooltip.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#link").easyTooltip({
        useElement: "icerik"
    });
});
</script>
<style>
#easyTooltip{
	margin:0 10px 1em 0;
	width:250px;
	padding:8px;
	background:#fcfcfc;
	border:1px solid #e1e1e1;
	line-height:130%
}
#easyTooltip h3{
	margin:0 0 .5em 0;
	font:14px Arial bold, Helvetica, sans-serif;
    text-transform:uppercase
}
#easyTooltip p{margin:0 0 .5em 0}
#easyTooltip img{
    background:#fff;
    padding:1px;
    border:1px solid #e1e1e1;
    float:left;
    margin-right:10px
}
#icerik{display:none}
</style>
</head>
<body>
<a href="#" id="link">bcakir</a>

<div id="icerik">
	<h3>BCAKIR</h3>
	<img src="http://bumerang.hurriyet.com.tr/images/sitelogos/38068.jpg" />
	<p>Php, JQuery ve Facebook uygulama yazılarının bulunduğu kişisel internet günlüğü.</p>
	<ul>
		<li>Php</li>
		<li>JQuery</li>
		<li>Facebook</li>
	</ul>
</div>
</body>
</html>

Uygulamamızın css kısmı biraz sizi korkutmuş olabilir. Ama merak etmeyin çok fazla zorlanmayacaksınız. Burada ise linkimizin üzerine gelince gösterilecek bilgileri title özelliğinden değil de gizlediğimiz bir div içerisinden alıyoruz. İlk örnek ile arasındaki en önemli fark bu. Uygulamamızın çalışma şeklini anlatarak bir yazımızın daha sonuna geldik. Uygulamayı buradan indirebilirsiniz. Yararlı olması dileğiyle.

 2.158 Okunma

Bu yazıya 9 yorum yapılmış.

  1. Çok ilham verici bir yazı olmuş. Baya yararlandım. Eline, kalavyene sağlık.

  2. Çok güzel bir makale ellerinize sağlık:)

  3. Öncelikle size çok teşekkür etmek istiyorum. Siteniz yer imlerimin en başında geliyor o kadar çok yardımcı oluyorsunuz ki bana anlatamam bunu o yüzden teşekkürü bir borç bilirim. Size sormak istediğim bir sorum var yazılarınızda ” + expand source ” kısmı çok hoşuma gidiyor bir kaç sitede daha gördüm ve nasıl yapıldığını öğrenmek istiyorum yardımcı olabilirseniz çok sevinirim.

    • Teşekkür ederim. Sorduğunuz özellik WordPress’in WP SyntaxHighlighter eklentisi.

      • WordPress konusunda bilgi eksikliğim söz konusu şuanda yapım aşamasında olan bir sitem var, siteye bunu eklemenin yolunu kısaca anlatabilir misiniz rica etsem?

        • WordPress’i kurduktan sonra, yapmanız gereken; eklentiler bölümünden kurmak istediğiniz eklentinin ismini girip aratmak ve eklentiyi kur butonuna tıklamak.

          • Çok teşekkür ederim

  4. Sayın Çakır, öncelikle uygulamanız çok güzel ve bizimle paylaştığınız için ayrıca teşekkür. Birinci resmime uyguladım ve birazda görüntüsünü değiştirdim harika oldu. Fakat yanındaki ikinci ve üçüncü resimlere uygulanmıyor. Bu uygulama tek nesne için midir, yoksa javascript’te ilave komut mu yazmak gerekiyor. Aydınlatırsanız sevinirim. İyi çalışmalar. Hamit Ündaş.

    • İstediğiniz elamana tooltip ekleyebilirsiniz, sadece sayfada 1 tane olmak zorunda değil. $(“a”).easyTooltip(); şeklinde kullanarak bütün linklere vermiş olduk mesela. Siz de hangi elamana verecekseniz bir id atayıp bu id üzerinden tooltip verebilirsiniz. Örneğin; $(“#id1”).easyTooltip(); $(“#id2”).easyTooltip(); gibi.

Yazı hakkında görüşlerinizi belirtmek istermisiniz?

Daha fazla JQuery
Kapat