pillinetwork hesabınızla giriş yapın.

Spry ile İpuçları

Spry Framework
Spry Framework

Merhabalar,

Bir önceki yazımda Spry'ı kulanma nedenleri ile birlikte efektleri işlemiştik. Şimdi ise Spry ile ipucu (tip) oluşturmayı deniyeceğiz. Önce Spry'ı bu adrestenindirelim .
Sonra sayfamıza şu dosyaları dahil(include) edelim.

1
2
 
<script src="js/SpryTooltip.js" type="text/javascript"></script>

<link href="css/oylesinebircssadresi.css" rel="stylesheet" type="text/css" />

Şimdi tooltip için Javascript kodumuzu yazıyoruz.
1
2
3
4
5
6
7
8
9
10
11
12
 
var sprytooltip1 = new Spry.Widget.Tooltip("cssip", "#css", {

										   closeOnTooltipLeave: true, hideDelay: 1000,  followMouse: true, useEffect:"fade", showDelay:100

										   });

var sprytooltip2 = new Spry.Widget.Tooltip("htmlip", "#html", {

										   closeOnTooltipLeave: true, hideDelay: 1000,  followMouse: true, useEffect:"fade", showDelay:100

										   });

var sprytooltip3 = new Spry.Widget.Tooltip("phpip", "#php", {

										   closeOnTooltipLeave: true, hideDelay: 1000,  followMouse: true, useEffect:"fade", showDelay:100

										   });

var sprytooltip4 = new Spry.Widget.Tooltip("aspip", "#asp", {

										   closeOnTooltipLeave: true, hideDelay: 1000,  followMouse: true, useEffect:"fade", showDelay:100

										   });

Şimdi kodu inceliyelim. varsprytooltip1 ile ipucunu tanımlıyoruz. şimdi "cssip" olan tarafın nedemek olduğunu anlayalım. Mouse cssip idsine sahip olan yere geldinde tooltipi gösterecek. "css" ise açıklanacak olan ipucunun içeriği. Şimdi setuplara ({ } arasına) bakalım.


closeOnTooltipLeave:
Tooltip bırakıldığında kapat

Boolean: true yada false alır
Default olarak false'tur.

followMouse
Mouse hareket ettiğinde içerikte mouse ile birlikte gider.

Boolean: true yada false alır.
Default false

showDelay
Gösterme geçikmesi -> 1 saniye 1000
Default 0

hideDelay

Gösterme geçikmesidir. 1 saniye->1000
Default 0

useEffect

Gösterimin efekt ile olmasını sağlar ancak;

"blind" yada "fade" değerlerini alır. "" kullanılmak zorunda
Default efektsiz

Şimdi CSS ile görsellik katalım

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
#ipucu {

	background-color: #666;

	border: thick solid #3FF;

	}



#gorsel {   

color:#E5E5E5;

cursor:help;

background-color: #4F4F4F;

padding: 5px 8px;

z-index: 10000;

opacity: .75; /* Standard: FF gt 1.5, Opera, Safari */

filter: alpha(opacity=75); /* IE lt 8 */

-ms-filter: "alpha(opacity=75)"; /* IE 8 */

-khtml-opacity: .75; /* Safari 1.x */

-moz-opacity: .75; /* FF lt 1.5, Netscape */

font-weight:bold;

}
#gorsel den bahsetmek istiyorum. opacity ve sonrası opaklık katıyor ve tüm browserlarda çalışıyor. Ondan önceki renk gibi özellikler.
Gelelim HTML kodlarına
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
<script src="js/SpryTooltip.js" type="text/javascript"></script>

<link href="js/SpryTooltip.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="ipucu"><span id="css">CSS,<br /></span> <span id="html">HTML<br /></span>, <span id="php">PHP<br  /></span>, <span id="asp">ASP <br /></span> gibi Diller .................................................................... </div>

<div id="aspip"><div id="gorsel">Active Server Pages</div></div>

<div id="phpip"><div id="gorsel">PHP:Hypertext Preprocessor</div></div>

<div id="htmlip"><span id="gorsel">Hyper Text Markup Language</span></div>

<div id="cssip"><span id="gorsel">Cascading Style Sheets</span></div>

<script type="text/javascript">

<!--

var sprytooltip1 = new Spry.Widget.Tooltip("cssip", "#css", {

										   closeOnTooltipLeave: true, hideDelay: 1000,  followMouse: true, useEffect:"fade", showDelay:100

										   });

var sprytooltip2 = new Spry.Widget.Tooltip("htmlip", "#html", {

										   closeOnTooltipLeave: true, hideDelay: 1000,  followMouse: true, useEffect:"fade", showDelay:100

										   });

var sprytooltip3 = new Spry.Widget.Tooltip("phpip", "#php", {

										   closeOnTooltipLeave: true, hideDelay: 1000,  followMouse: true, useEffect:"fade", showDelay:100

										   });

var sprytooltip4 = new Spry.Widget.Tooltip("aspip", "#asp", {

										   closeOnTooltipLeave: true, hideDelay: 1000,  followMouse: true, useEffect:"fade", showDelay:100

										   });

//-->

</script>



</body>

HTML kodlarında divlere hazırladığımız CSS leri ekledik.
Demosu için
Sorunlarınızı yorum ile yazarsanız yardımcı olacağım. Kalın sağlıcakla.

Spacer
Spacer
/* Etiketler: , , , , , , , , , , , , */
/* s4l1h yazdı. 30 Mart 2009 15:41. 2 yorum var */

Yorumlar

Teşekkürler :)

/* kimkorkarvirginiawoolftan.tumblr.com/ */
/* queennothing | 26 Kasım 2009 15:01 */

Rica ederim :)

/* s4l1h | 29 Kasım 2009 22:05 */

üye olunpillinetwork sitelerine yorum ekleyebilmek ve daha fazlası için, üye olun ya da giriş yapın.

Bu yazıyı rapor et. Kural dışı içeriğe rastladığınızda editörlerimize rapor ederek müdahale edilmesini sağlayabilirsiniz. (Hangi durumlarda rapor edebilirim?)

Bu site

Nokta ve pilli ortak yapımı olan kodaman.org hep birlikte içerik üretip gelirini yazarları ile paylaştığımız kolektif bir kod yazarları blogudur. Siz de katılabilirsiniz.

pilliilan

Bu siteye ilan vermek 7ytl/gün'den başlayan fiyatlarla

son yorumlar

devamı »

arama

pillinetwork