Ş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 ????