Mootools ile özel select box (fake combo)

23 Mar
2009

Bildiğiniz gibi select box özel bir kontroldür ve görünümü çok fazla değiştirilemez. Örneğin “heigth” özelliği firefox da değişmesine rağmen ie de değişmez. Amacımız select box ların yerine tüm görsel özellikleriyle oynayabileceğimiz, sadece html kodlarından oluştuğu için tüm browser larda aynı sonucu veren sanal select box oluşturmaktır. Öyle bir select box ki js yi ve css i sayfaya eklediğinizde tüm select box ları otomatik değiştiriyor. Yerleştirmek sizin yeteneğinize kalmış.

Çalışma şekli : Sayfanızda bulunan tüm select box ları tarıyor, “multiple” tag ı ekleyerek gizliyor. Bulunduğu konuma <div> ekliyor ve tıklandığında “multiple” hale getirdiğiniz gerçek select box unuzu gösteriyor. Böylece gerçek select box unuzdaki item larınızı seçiyorsunuz.

combo1

Çalışan örnek için : http://www.cihantopcu.com/samples/fakecombo/index.html

İndirmek için :  http://www.cihantopcu.com/samples/fakecombo/fakecombo.rar

Bu kontrol http://www.cult-f.net/2007/12/14/elselect/ adresindeki kontrol optimize edilerek yeniden yazılmıştır.

Be Sociable, Share!

1 Response to Mootools ile özel select box (fake combo)

Avatar

iLyas

March 23rd, 2009 at 17:01

Cihan abi ellerine saglik cok guzel bir yazi olmsus

Comment Form

top