MooTools kütüphanesini kullanarak kolayca tooltip örneği nasıl yapabiliriz, bu konuda sizlere bundan bahsetmek istiyorum.
MooTools kütüphanesini kullanarak kolayca tooltip örneği nasıl yapabiliriz, bu konuda sizlere bundan bahsetmek istiyorum.
Adım 1
Öncelikle mootools kütüphanesini sayfamıza dahil edelim. Eğer yok ise aşağıdaki adresten temin edebilirsiniz;
http://mootools.net/download
Adım 2
Gerekli dosyalarımızı oluşturalım;
– index.html
– style.css
– custom.js
– mootools.js
Adım 3
Index.html dosyamızda standart html etiketlerimizi yazalım. Ve daha sonra gerekli dosyalarımızı head etiketi içerisinde çağıralım.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Erbilen.NET</title>
<!-- style -->
<link rel="stylesheet" href="style.css" />
<!-- scripts -->
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="custom.js"></script>
</head>
<body>
</body>
</html>
Adım 4
Şimdi tooltip örneği için span kullanacağız.. Ve data nitelikleri ile bilgileri alacağız. Bu yüzden şöyle bir örnek kod ekleyebiliriz body’e;
<div class="text">
Burası benim <span class="tooltip" data-text="İpucu" data-direction="left">tooltip</span> örneğim :)
</div>
Burada data-text tooltip’te gözükecek değer, data-direction ise tooltip’in yönü olacak.
Adım 5
custom.js dosyamızı açalım ve sayfa hazır olduğunda bizde hazırız diyelim;
window.addEvent('domready', function(){
/* .. */
});
Adım 6
Mootools ile DOM’da bir nesneyi seçmek için bir çok yol vardır.. Eğer çoklu seçip yapılacaksa iki dolar ($$) işareti ile yapılır. Ve nesnelere olay atamak içinde 2 tanımlı metod vardır.. Bunlar addEvent ve addEvents‘dır. Tahmin edebileceğiniz üzere 2.si çoklu olay atama için kullanılıyor. Bizde bunu kullanacağız.. Kısaca tooltip nesnemiz için fare üzerine geldiğinde ve fare üzerinden gittiğinde olaylarını tanımlayacağız.
window.addEvent('domready', function(){
$$('.tooltip').addEvents({
mouseenter: function(){
},
mouseleave: function(){
}
});
});
Burada mouseenter fare üzerine geldiğinde mouseleave ise fare üzerinden gittiğinde çalışacaktır.
Adım 7
Şimdi mouseenter olayı içerisinde kodlarımızı yazmaya devam edelim.. İlk olarak data değerlerimizi alalım;
var text = this.get('data-text'),
direction = this.get('data-direction');
Ve şimdide tooltip için gerekli nesnemizi oluşturalım.. Ve sınıf değeri ile yazı değerini ekleyelim;
this.toolTip = new Element('span', {
'class' : 'tooltip_text ' + 'direction_' + direction,
'html' : text
});
Burada gördüğünüz gibi 2 sınıf ataması yaptım.. 2. sınıf ataması belirlediği yöne göre direction_YÖNDATASI şeklinde kullanılabilecek.. Böylece okların yönünü belirleyebilmemiz daha kolaylaşır. Ve fark ettiyseniz var ile oluşturmadım.. this.toolTip dedim. Bunun sebebi ise diğer olayda bunu kullanabilmemdir.. Bu şekilde mouseleave‘de bu nesneye erişip üzerinde işlem yapabilirim. Ve html ile data-text değerini nesneme atadım. text ilede atayabilirdim ancak o zaman html etiketleri çalışmazdı ????
Şimdi oluşturduğumuz nesneyi mevcut span’ımızın içerisine ekleyelim;
this.toolTip.inject(this);
Artık kodlarınızı çalıştırdığınızda span’ın üzerine her geldiğimizde İpucu yazdığını görebilirsiniz. devam ediyoruz.. ????
Adım 7
JS kodlarımız bir kenarda kalsın, şimdide css kodlarımızı yazalım..
.tooltip {
position: relative
}
.tooltip_text {
font: 12px/17px Arial;
background-color: #222;
padding: 5px 10px;
border-radius: 5px;
position: absolute;
z-index: 1;
color: #fff;
text-align: center
}
Burada ilk olarak kapsayıcı nesneye position: relative verdik. Çünkü içerisindeki tooltip nesnesi absolute yani diğer nesnelerden bağımsız olması gerek. Ve diğer birkaç özellik ekledik. Bu bu şekilde kalsın, JS kodlarımıza geri dönebiliriz ????
Adım 8
Şimdi tooltip’in fade tarzı açılması için öncelikle opacity değerini 0’a düşürelim.. Ve daha sonra tween kullanarak animasyon süresini belirleyip fade ile açtıralım;
this.toolTip.setStyle('opacity', 0).set('tween', { duration: 400 }).fade('in');
Evet, eğer test ederseniz gayet tatlı olduğunu görebilirsiniz ????
Şimdi yön işlemlerinde css tanımlaması yapmak için öncelikle tooltip’in genişlik ve yüksekliğini bulmamız gerekiyor. Bunun için getSize() metodunu kullanabiliriz.
var size = this.toolTip.getSize(),
width = size.x + 10,
height = size.y + 10;
Burada ben + 10px daha ekledim. Bunun sebebide biraz daha uzakta kalmalarını sağlamak için. Dilerseniz siz eklemek zorunda değilsiniz ????
Adım 9
Şimdi yön işlemlerini yapacağız.. Toplu CSS işlemleri için setStyles() metodunu kullanıyoruz. İlk if koşulumuz şöyle olacak;
if ( direction == 'left' ){
this.toolTip.setStyles({
'left': '-' + width + 'px',
'top': '50%',
'margin-top': '-' + ((height / 2) - 5) + 'px'
});
}
Eğer yön sol olarak belirlenmiş ise css kodlarımız bu şekildedir. Öncelikle left değerini tooltip’in genişliği + 10px kadar sola çekiyoruz.. Daha sonra yukarıdan ortalayıp yüksekliğin yarısı kadar margin ile yukarı çekiyoruz..
Yukarı için
else if ( direction == 'top' ){
this.toolTip.setStyles({
'top' : '-' + height + 'px',
'left' : '50%',
'margin-left' : '-' + ((width / 2) - 5) + 'px'
});
}
Sağ için
else if ( direction == 'right' ){
this.toolTip.setStyles({
'right' : '-' + width + 'px',
'top' : '50%',
'margin-top' : '-' + ((height / 2) - 5) + 'px'
});
}
Aşağı için
else if ( direction == 'bottom' ){
this.toolTip.setStyles({
'bottom' : '-' + height + 'px',
'left' : '50%',
'margin-left' : '-' + ((width / 2) - 5) + 'px'
});
}
Evet neredeyse bitti sayılır.. CSS kodlarını tek tek anlatmıyorum, mantık ilkinde olduğu gibi hepsinde aynıdır. Şimdi artık mouseenter olayı ile işimiz bitti.. Sıra geldi mouseleave olayı çalıştığında mevcut tooltip örneğimizi kaldırmaya. Bunun için destroy() metodunu kullanacağız.
this.toolTip.destroy();
Ve fade efektinde hızlı yapıldığında sorun çıkıyor. Bunu engellemek için animasyonu fare üzerinden çekildiğinde durduracağız.
this.toolTip.get('tween').stop();
Evet işte bu kadar ???? Şimdi CSS’e geri dönebiliriz!
Adım 10
Son olarak css’de yöne göre ok şekillerini yapacağız.. Bunun için tooltip_text öncesine content ekleyip şurada olduğu gibi ok şekillerini yapacağız.
.tooltip_text:after {
content: '';
border: 6px solid transparent;
position: absolute
}
/* son yön için */
.tooltip_text.direction_left:after {
border-left-color: #222;
top: 50%;
margin-top: -6px;
right: -12px
}
/* sağ yön için */
.tooltip_text.direction_right:after {
border-right-color: #222;
top: 50%;
margin-top: -6px;
left: -12px
}
/* yukarı yön için */
.tooltip_text.direction_top:after {
border-top-color: #222;
left: 50%;
margin-left: -6px;
bottom: -12px
}
/* aşağı yön için */
.tooltip_text.direction_bottom:after {
border-bottom-color: #222;
left: 50%;
margin-left: -6px;
top: -12px
}
Adım 11
Ek olarak bir özellik daha ekleyebiliriz.. data-width özelliği.. Bu şu durumlar için lazım olabiliyor, kapsayıcı nesne küçük ise, tooltip nesneside en fazla onun genişliği kadar oluyor.. Bu yüzden tooltip için standart bir width belirleyebiliriz.. Bunuda data-width=”200″ şeklinde belirleyeceğiz.. Buna göre ise JS kodlarımıza şunu ilave edelim. Ve bu ilave işlemini inject‘ten hemen sonrasında yapalım ????
if ( w = this.get('data-width') ){
this.toolTip.setStyle('width', w + 'px');
}
Evet tamamdır..
Tebrikler, mootools’u daha iyi anlamak adına basit bir örnek daha hazırlamış olduk. Demoyu inceleyebilir, kaynak kodlara aşağıdan ulaşabilirsiniz.
İndir
http://yadi.sk/d/vuOEUcO472K4Y