MooTools ile Tooltip Örneği Yapalım

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

Mootools ile Özel Selectbox Yapımı

Şuan evimden çoook uzaklarda olduğum için ne yazık ki videolu eğitim hazırlayamıyorum.. Ancak mootools’a başladığım şu günlerde bir yandanda bilgilerimi aktarmaya çalışacağım.. Bu yazımda sizlerle adım adım özelleştirilebilir selectbox örneği yapmayı öğreneceğiz..Şuan evimden çoook uzaklarda olduğum için ne yazık ki videolu eğitim hazırlayamıyorum.. Ancak mootools’a başladığım şu günlerde bir yandanda bilgilerimi aktarmaya çalışacağım.. Bu yazımda sizlerle adım adım özelleştirilebilir selectbox örneği yapmayı öğreneceğiz..

Adım 1

Öncelikle mootools kütüphanesi mevcut değil ise, aşağıdaki bağlantıdan sıkıştırılmış halini indirelim;
http://mootools.net/download

Adım 2

Şimdi sırasıyla şu dosyaları oluşturalım;
– index.html
– style.css
– custom.js

Adım 3

html sayfamızın içerisine standart html taglarımızı girelim.. Style dosyamızı çağıralım.. Ve mootools kütüphanesi ile custom.js dosyamızıda sayfamıza dahil edelim..

<!DOCTYPE HTML>
<html lang="en-US">
<head>

	<meta charset="UTF-8">
	<title></title>
	
	<!-- style -->
	<link rel="stylesheet" href="style.css" />
	
	<!-- scripts -->
	<script type="text/javascript" src="mootools-core-1.4.5-full-nocompat-yc.js"></script>
	<script type="text/javascript" src="custom.js"></script>
	
</head>
<body>

</body>
</html>

Adım 4

html sayfamıza özelleştirmek için bir adet selectbox ekleyelim..

<select name="sehir" class="select">
	<option value="0">Şehir Seçin</option>
	<option value="Eskişehir">Eskişehir</option>
	<option value="Ankara">Ankara</option>
	<option value="Adana">Adana</option>
	<option value="İzmir">İzmir</option>
</select>

Adım 5

custom.js dosyamızı açalım.. Ve sayfamız hazır olduğunda bizde hazırız diyelim;

window.addEvent('domready', function(){
	
	/* .. .. */

});

Adım 6

Şimdi sınıfı select olan bütün selectbox’ları seçip each ile döngüye sokalım.

$$('select.select').each(function(elem, index){
    /* .. .. */
});

İlk olarak selectbox’ın opacity değerini 0 yaparak görünmez hale getirelim;

elem.setStyle('opacity', 0);

Şimdi selectbox’ın kapsayıcı nesnesini oluşturalım;

var selectBoxContent = new Element('div', {
	'class': 'selectBoxContent'
});

Oluşturduğumuz kapsayıcı nesneyi önce dom’a ekliyoruz.. Yani select nesnesinin hemen öncesine ekliyoruz.

selectBoxContent.inject(elem, 'before');

Ve dom’a eklediğimiz kapsayıcı nesnenin içerisine şimdi selectbox’ımızı ekleyebiliriz;

elem.inject(selectBoxContent);

f12’yi basıp developer tools’dan baktığınızda şöyle bir görüntü var ise buraya kadar her şeyi doğru yaptınız demektir 🙂

Seçilen select değerini gösterecek text nesnesini oluşturalım, içerisine ise seçili select değerini atayalım;

var selectText = new Element('span', {
	'class' : 'selectText',
	'text' : elem.getSelected().get('text')
});

Ve şimdi bu text nesnesini select’ten hemen öncesine ekliyoruz.

selectText.inject(elem, 'before');

Son bir adım kaldı, oda select değeri değiştiğinde bunu yakalayıp text nesnesine yazdırmak.. Onun içinse şöyle bir kod yazacağız;

elem.addEvent('change', function(){
	selectText.set('text', elem.getSelected().get('text'));
});

Evet, bu kadar koddan sonra custom.js dosyamızın son hali şöyle olmalı;

window.addEvent('domready', function(){
	
	$$('select.select').each(function(elem, index){
		elem.setStyle('opacity', 0);
		var selectBoxContent = new Element('div', {
			'class': 'selectBoxContent'
		});
		selectBoxContent.inject(elem, 'before');
		elem.inject(selectBoxContent);
		var selectText = new Element('span', {
			'class' : 'selectText',
			'text' : elem.getSelected().get('text')
		});
		selectText.inject(elem, 'before');
		elem.addEvent('change', function(){
			selectText.set('text', elem.getSelected().get('text'));
		});
	});

});

Buradan sonrasını ise css ile halledeceğiz..

Adım 7

İlk olarak bir reset.css yazmamak için sevgili eric meyer’in reset.css’ini kullanabiliriz.. Bunun için aşağıdaki bağlantıyı kullanabilirsiniz;
http://meyerweb.com/eric/tools/css/reset/

Adım 8

Son olarak selectbox’ımıza biraz şekil verelim;

/*__ SELECTBOX __*/
.selectBoxContent {
	position: relative;
	display: inline-block;
	*display: inline;
	zoom: 1;
	background: #f7f7f7 url(https://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat 175px;
	border: 1px solid #ddd;
	border-top-color: #aaa;
	height: 30px;
	width: 200px
}
.selectBoxContent span.selectText {
	position: absolute;
	padding-left: 8px;
	font: 12px/30px Arial;
	color: #666
}
.selectBoxContent:hover span.selectText {
	color: #111
}
.selectBoxContent select {
	width: 100%;
	height: 30px;
	cursor: pointer;
	position: relative;
	z-index: 1
}

Evet, tebrikler.. Başarılı bir şekilde basit ve kullanışlı bir selectbox örneği hazırladık 🙂

İndir

http://yadi.sk/d/5VGBleen6uVtV