bildirgec.org

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.
Şimdi tooltip için Javascript kodumuzu yazıyoruz.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 kapatBoolean: true yada false alırDefault olarak false’tur.followMouseMouse hareket ettiğinde içerikte mouse ile birlikte gider.Boolean: true yada false alır.Default falseshowDelayGösterme geçikmesi -> 1 saniye 1000Default 0hideDelayGösterme geçikmesidir. 1 saniye->1000Default 0useEffectGösterimin efekt ile olmasını sağlar ancak;”blind” yada “fade” değerlerini alır. “” kullanılmak zorundaDefault efektsiz

Şimdi CSS ile görsellik katalım#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

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