İpucu Açıklaması?

mfyz.com'da oldukça fazla gördüğünüz açıklama kutucukları var. Bir nesnenin (resim, buton, yazı, bağlantı) üzerine geldiğinizde açıklama olarak görünen ve fare imlecini takip eden kutulardan bahsediyorum.

Önceki versiyonlarda bu açıklama kutuları hem daha farklı idi hem de kendi yazdığım bir ufak kütüphaneyi kullanıyordu. Ancak kütüphane her ne kadar tüm tarayıcılarda çalışma destekli (crossbrowser) olsa da problemler yaşıyordum kodlarken. Aynı şekilde sadece ipucu eklemek için bile html'i oldukça kirletiyordum.

v0.7 ile mootools çatısı (framework) üzerinde çalışmaya başladım. Bu süreçte mootools'daki birçok eklentiyi kullandım. Bunlardan birisi de ipucu eklentisi. Tips.js olarak geçiyor.

Mootools'un Tips.js dökümantasyonuna erişmek için :http://docs.mootools.net/Plugins/Tips.js

Bu dökümanda bu ipucu kutucularının yapımı, ayarlanması ve stille desteklenmesini anlatacağım.

Nasıl çalışıyor?

Eski kütüphaneyi (ipucu) hatırlayanlar bilir, bir nesneye ipucu eklemek için ona onMouseOver ve Out gibi olaylarına tanımladığımız fonksiyonlarla ve parametrelerle bu işi yapabiliriz. Fakat mootools'da css adresilerindeki elemanları seçebilme özelliği var. Aslında tips kütüphanesinin yaptığı iş, verilen adreslerdeki tüm elemanlara MouseOver ve MouseOut olayları eklemek. Bu olaylarına atanan fonksiyonlarla da bu kutucukları fare imlecine göre göstermek. Ama bunu oldukça pratik bir şekilde yapıyor.

İpucu eklemek istediğimiz nesneleri "ipucu" adında bir sınıfta toplayalım, Yani css sınıfı olarak "ipucu" sınıfı ekleyelim.

Örneğin :
<a href="http://www.mfyz.com" target="_blank">www.mfyz.com</a>
olan nesneyi
<a href="http://www.mfyz.com" target="_blank" class="ipucu"
   title="MFYZ.Com">www.mfyz.com</a>
şeklinde ipucu sınıfına dahil edip "title" argümanı olarak bir açıklama ekledik.
Hatta bu açıklama içerisinde html etiketleri bile kullanabiliriz. (Tırnak kurallarına uygun olduğu sürece sorun çıkarmaz)
<a href="http://www.mfyz.com" target="_blank" class="ipucu"
   title="<b>MFYZ.Com</b> <br>Yeni pencerede açılır">www.mfyz.com</a>
Bu işlemi sadece bağlantılarda değil tüm html nesnelerinde uygulayabiliriz. Resimler, butonlar, yazılar vs.

Şimdi mootools Tips kütüphanesiyle ipucu tanımlayalım. (Bu tanımları mootools'u include ettikten sonrak bir javascript dosyanızda veya html dosyanızdaki bir javascript bloğuna koyarak yapın.)
var Ipuclari = new Tips( $$('.ipucu') );
new Tips tanımı içerisinde ilk parametre (zorunlu) ipucu uygulanacak nesneleri belirliyor. Mootools'un nesne seçicilerini kullanarak CSS adresine göre yani .ipucu belirteci ile ipucu sınıfındaki tüm nesneleri gösteriyoruz.
var Ipuclari = new Tips($$('.ipucu'), {
  showDelay: 400,
  hideDelay: 400
});
ikinci parametre ile de bir ayar dizesi (nesne olarak) belirtiyoruz. Parametreler hakkında detaylı bilgiyi dökümantasyonundan edinebilirsiniz.

Ya da geçiş efekti uygulatarak gösterip-gizlemek isterseniz :
var Ipuclari = new Tips($$('.ipucu'), {
  initialize:function(){
    this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);
  },
  onShow: function(toolTip) {
    this.fx.start(1);
  },
  onHide: function(toolTip) {
    this.fx.start(0);
  }
});
Bu kod ile 500 milisaniyede transparanlıkla gösterebilir veya gizleyebilirsiniz.

Peki nasıl görünecek, görünümünü nasıl değiştireceğim?

Tabiki css ile yapacağız. Ayar parametrelerinden className parametresi ile ipucu için çizdirilen html nesnelerinin sınıf adlarının başlangıcını değiştirebilirsiniz. Eğer değer vermezseniz varsayılan olarak bu sınıfların adlarının başlangıcı "tool" olacaktır.

Bu sitede kullandığım stile göre örnek vermek istiyorum, ben className kullanmadım. Yani varsayılan olarak "tool" ile başlıyor.
.tool-tip {
  background-color: black;
  padding: 5px 8px;
  z-index: 10000;
}

.tool-text, .tool-text * {
  font-size: 11px;
  color: white;
}

.tool-title {
  display: none;
}
Bu stilde değiştirmeye çalışılan html kodu aslında şöyle, yani Tips eklentisi html'e şu kısmı sonradan dinamik olarak ekleyip ekranda gösteriyor.
<div style="position: absolute; top: 96px; left: 810px; visibility: hidden; opacity: 0;" class="tool-tip">
  <div>
    <div class="tool-title">
      <span>
        http://www.mfyz.com
      </span>
    </div>
    <div class="tool-text">
      <span>
        <b>MFYZ.Com</b> <br>
        Yeni pencerede açılır
      </span>
    </div>
  </div>
</div>
Ben link url'sini görüntülemek istemiyorum. tips eklentisi otomatik olarak ekliyor url'yi. Gizlemek için css'de display: none; yaptım.
En dıştaki tool-tip çerçevesinin stillerini kutu olarak düşünürsek ayarlıyorum. Yazı için de tool-text sınıflı nesneyi düzenliyoruz.

Eğer className'e fatih değerini verseydik css sınıf adları fatih-tip, fatih-text, fatih-title gibi olacaktı. Bu tanımı farklı sınıflara farklı className ile yaparak farklı stillerde ipuçlarını aynı sayfada gösterebilirsiniz.

Tam örnek içinhttp://demos.mootools.net/Tips adresindeki demoyu inceleyebilirsiniz.


Hazırlayan : Mehmet Fatih YILDIZ

X


Bu dökümanda javascript ile sayfanızda mouse koordinatlarını tespit eden kısa bir koda değineceğim. Örneği yukarıdaki gibidir.
var IE = document.all ? true : false;
if (!IE) document.captureEvents( Event.MOUSEMOVE )
document.onmousemove = getMouseXY;
Bu kısımda browser'a göre mouse hareketini getMouseXY fonksiyonu çalıştırmaya yönlendiriyoruz.
var tempX = 0;
var tempY = 0;
Geçici mouse X, Y değerlerini saklayan değişkenler.
function getMouseXY(e) {

  // browser'a mouse koordinatlari yakalaniyor ve degiskenlere aktariliyor..
  if (IE) {
    tempX = event.clientX + document.body.scrollLeft;
    tempY = event.clientY + document.body.scrollTop;
  }else {
    tempX = e.pageX;
    tempY = e.pageY;
  }

  // eger negatif degerlerde ise 0 ataniyor
  if (tempX < 0){tempX = 0;}
  if (tempY < 0){tempY = 0;}

  // degerler dokumanda yazdiriliyor..
  document.Show.MouseX.value = tempX;
  document.Show.MouseY.value = tempY;

  return true;
}
Mouse koordinatlarını bulduran ve Show formundaki MouseX ve MouseY inputlarına değerleri yazdıran fonksiyon.

Buradaki kodu, fonksiyonu kullanarak layer'lari taşıyabilir, mouse'un bazı objeler üstüne gelmesiyle değişik artaksiyonlar yapabilirsiniz.

Eski sitedeki tooltip'ler bu şekilde çalışıyordu.


Hazırlayan : Mehmet Fatih YILDIZ

Popüler Etiketler

compile nedir less css css3 seo search optimization meta html table notebook laptop lisans license support twitter bootstrap portfolio job developer mfyz html5 firefox google social network app facebook connect api kitap ui design development mysql sql optimizasyon analyse procedure ie browser apple iphone ipad doritos kampanya tytz wanda ios itunes mobile banner htaccess mod_rewrite url cookie php javascript assets rss xml export framework auth http pear mdb2 prepare execute mssql pgsql tebrik zaman wordpress logo query select dokuman plugin startups regex macosx web app open source object iOS örnek kod svn subversion proje kurulum nasıl ajax jquery box compiler windows linux on-the-fly js apache server mootools icon ikon grafik download xhtml login session while media service sitemap db code phpstorm jetbrains ide editor parse workspace generator cms cache coding app store store in-app purchase purchase verification integration storekit itunes connect share date diff tarih injection xmlhttprequest imza signature mail blog opengraph fql ingilizce wireless digital medya ux icons ubuntu ntfs fstab konsol terminal kontrol yapıları if switch database free route router gimp howto newsletter subscription player internet screen webkit form sosyal link lifestream internet explorer spam music language style ipucu chart oyun tool istatistik insanlar www subdomain redirect crossdomain input textarea ruffles calendar osx browsers applications git version control deployment widget pharma hack statistics radio graph button