jQuery Speech bubbles

By

PowerTip
PowerTip nesnelere bilgi baloncukları  denen küçük çerçevelerin eklenmesini sağlayan kolay kullanımlı bir uygulamadır.  Steven Benner tarafından yapılmış olan bu örnek ile nesnelere açılır bilgiler eklemek için ihtiyacınız olan bütün özellikler bulunuyor. Bu tarz örnekler genelde mouse herhangi bir elementin üzerine geldiğinde açılır. Herhangi bir elemente eklemek için yapmanız gereken bir kaç basit ayar bulunuyor. Bu ayarları kullanarak elementin etrafında 360 derece istediğiniz bölümde bilgi balonlarının çıkmasını sağlayabilirsiniz. Sadece Html elementlere değil Svg formatındaki dosyalar üzerinde de kullanılabilir. Ayrıca mouseyi takip edebilen bir tane demosu da bulunuyor. Demo sayfasındaki en altta bulunan büyük ve mavi çerçevenin içinde mouseyi gezdirdiğiniz zaman sürekli mouseyi takip eden küçük çerçeveyi de görebilirsiniz.


Örnek Kullanım :

  • Head etiketleri arasına eklenmesi gereken bölümler.
Js ve still dosyaları : 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<script type="text/javascript" src="../src/core.js"></script>
<script type="text/javascript" src="../src/csscoordinates.js"></script>
<script type="text/javascript" src="../src/displaycontroller.js"></script>
<script type="text/javascript" src="../src/placementcalculator.js"></script>
<script type="text/javascript" src="../src/tooltipcontroller.js"></script>
<script type="text/javascript" src="../src/utility.js"></script>
<link rel="stylesheet" type="text/css" href="../css/jquery.powertip.css" />

  •  Placement Examples 
Html : 
	<div id="placement-examples">
		<h2 align="center">Placement examples</h2>
		<div>
			<input type="button" class="north-west-alt" value="North West Alt" title="North west alt placement" />
			<input type="button" class="north-west" value="North West" title="North west placement" />
			<input type="button" class="north" value="North" title="North placement" />
			<input type="button" class="north-east" value="North East" title="North east placement" />
			<input type="button" class="north-east-alt" value="North East Alt" title="North east alt placement" /><br />
			<input type="button" class="west" value="West" title="West placement" />
			<input type="button" class="east" value="East" title="East placement" /><br />
			<input type="button" class="south-west-alt" value="South West Alt" title="South west alt placement" />
			<input type="button" class="south-west" value="South West" title="South west placement" />
			<input type="button" class="south" value="South" title="South placement" />
			<input type="button" class="south-east" value="South East" title="South east placement" />
			<input type="button" class="south-east-alt" value="South East Alt" title="South east alt placement" />
		</div>
	</div>

JavaScript : 
	<script type="text/javascript">
		$(function() {
			// placement examples
			$('.north').powerTip({placement: 'n'});
			$('.east').powerTip({placement: 'e'});
			$('.south').powerTip({placement: 's'});
			$('.west').powerTip({placement: 'w'});
			$('.north-west').powerTip({placement: 'nw'});
			$('.north-east').powerTip({placement: 'ne'});
			$('.south-west').powerTip({placement: 'sw'});
			$('.south-east').powerTip({placement: 'se'});
			$('.north-west-alt').powerTip({placement: 'nw-alt'});
			$('.north-east-alt').powerTip({placement: 'ne-alt'});
			$('.south-west-alt').powerTip({placement: 'sw-alt'});
			$('.south-east-alt').powerTip({placement: 'se-alt'});
		});
	</script>

Bunun gibi  geri kalan örnekleri  örnek  dosya  içerisinden inceleyebilirsiniz. Uygulamanın SVG  örneğine de  buradan bakabilirsiniz.



Leave a Comment

Your email address will not be published.

You may also like

Trend