adsense

29 Temmuz 2013 Pazartesi

Mootools ile Adım Adım Selectbox Örneği Hazırlamak

Mootools'a başladığım şu günlerde bir yandan da bilgilerimi aktarmaya çalışacağım sizlere.. Bu yazımda adım adım özelleştirilebilir selectbox örneği nasıl yapılır bunu öğ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>

12345678910111213141516171819


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>

1234567


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(){
   /* .. .. */
});

123


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){
    /* .. .. */
});

123


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

elem.setStyle('opacity', 0);

1


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

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

123


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

selectBoxContent.inject(elem, 'before');

1


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

elem.inject(selectBoxContent);

1


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')
});

1234


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

selectText.inject(elem, 'before');

1


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'));
});

123


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'));
      });
   });

});

1234567891011121314151617181920


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
}

12345678910111213141516171819202122232425262728


Evet, tebrikler.. Başarılı bir şekilde basit ve kullanışlı bir selectbox örneği hazırladık :) 
Gönderen zaman:

Hiç yorum yok:

Yorum Gönder

Kaydol: Kayıt Yorumları (Atom)