Hazır sözü 2008’in En İyi JavaScript Kaynakları‘ndan açmışken jQuery’nin pratikliği karşısında dimdik duran ve kimilerine göre jQuery’nin pabucunu yakında dama attıracak olan bir başka JavaScript kütphanesi mooTools’dan bahsetmeden olmaz.Bu yazımda, bugüne kadar yayımlanan en iyi 65 mooTools eklentisini sizlerle paylaşmak istiyorum. Listede olmayan ve sizin de beğenerek kullandığınız mooTools eklentileri varsa paylaşmaktan çekinmeyin.
SmoothScroll
SmoothScroll kullanıcıyı sayfanın belirli bir bölgesine yumuşakça yönlendiriyor. Normalde bu tip bağlantılar kullanıldığında tarayıcı herhangi bir efekt olmadan sayfayı doğrudan istenen bölgeye taşır. SmoothScroll işte bu eylemi yavaşlatarak kullanıcının gözüne daha hoş gelecek şekilde yeniden tanımlıyor.MultipleSelect
MultipleSelect HTML çoklu seçim kutucuklarına özel stil eklemenizi sağlıyor. Üstelik birden fazla öğe seçmek için CTRL tuşuna basılı tutmanız da gerekmiyor.Typewriter Effect
MooTools kullanılarak oluşturulmuş güzel görünümlü bir daktilo efekti.MooColumns
MooColumns bir MooTools 1.2 sınıfı olup içeriği birden fazla sütuna kolayca ve çabucak bölümlendirebilmenizi sağlıyor.Yatay kaydırmalı haber bandı
Bu haber bandı çok basit olup web projelerine entegre edilmesi çok kolay. Newsvine Live panel’den esinlenen bu eklentinin göze oldukça hoş gelen bir efekti mevcut.MooScroll
MooScroll bir MooTools 1.2 sınıfı olup kaydırılabilir divler üzerindeki kaydırma çubuğunun görünümünü özelleştirebilmenizi sağlıyor.Giriş Panelini Göster/Gizle
Sayfanın üst kısmından aşağı yumuşakça kayan güzel bir giriş paneli.Kroppr
Kroppr güçlü bir betik olup ziyaretçilerine imaj kırpma desteği sunmak isteyen tüm site sahiplerinin işini kolaylaştıracak nitelikte. Diğer betiklerin aksine Kroppr resimleri döndürebilir, yakınlaştırabilir ve flash ya da java gibi herhangi harici bir eklenti kullanmadan imajları taşıyabilir. Kırpma işlemi kullanıcı seçiminden memnun olduktan sonra gerçekleştirildiğinden hem sunucuya bindirilen yük hem de kullanıcının işlem süresi azaltılmış oluyor. Kesinlikle önerilir.Sayaç Eklentisi
Internet üzerinde ziyaretçinin bir işlemin sonucunu alabilmesi için bir süre beklemesini gerektiren ve bu esnada ekranda sayaç gösteren pek çok web sitesi bulunuyor, örneğin RapidShare. MooTools kullanılarak oluşturulan bu eklenti, sitenize benzer bir özelliği kolayca entegre edebilmenizi sağlıyor.Twitter Emulation
Dünyanın her bir köşesindeki insanlar, Twitter’ı kullanımı çok kolay olduğu için seviyorlar, zira site üzerinde tek yapmanız gereken mesajınızı yazıp “Güncelle” düğmesine basmaktan ibaret. Pek çok kişinin bilmediği şey ise Twitter’ın işlevselliğini sitenize entegre edebilmenin aslında ne kadar kolay olduğu. PHP, MySQL ve MooTools JavaScript kullanılarak Twitter benzeri bir durum paylaşım sistemini sitenize kısa sürede entegre edebilirsiniz.Fancy Navigation
Navigasyon menüleri genellikle sıkıcıdır, öyle değil mi? Çoğu zaman navigasyon menüsünün üzerine fare ile gelindiğinde bir imaj belirir. Peki bunun orijinalliği nerede? Bu makalenin yazarı MooTools kullanarak güzel görünümlü bir navigasyon menüsü oluşturmuş. Menünün üzerine fare imleci götürüldüğünde zincir efekti oluşuyor.Select Box Factory 1.0
Alternatif bir çoklu seçim kutusu örneği. Arama kutusuna birkaç harf girerek, site üzerindeki öğelerden birini aramayı deneyin. Listenin hemen yanında benzer bir liste, açılır liste olarak belirecektir (bu geçişi sağlamak yaklaşık 5 saniye kadar sürüyor).AutoCompleter
MooTools için hazırlanan bu otomatik tamamlama betiği metin önerme ve tamamlama özelliklerini bir arada sunuyor. Yerel, JSON ya da XML gibi farklı veri kaynaklarını desteklediği gibi farklı kullanıcı etkileşimleri, özel biçimlendirme, çoklu seçim, animasyon ve çok daha fazlası için desteği de bünyesinde barındırıyor.mooSocialize
mooSocialize düğmesine tıkladıktan sonra, beğendiğiniz sosyal ağı seçebileceğiniz bir pencere beliriyor. Her bir sosyal ağ servis isminin yanında bulunan küçük resim, kullanıcının aradığı servisi kolayca bulabilmesini sağlıyor. Ama hepsi bu değil – bağlantılara tıkladığınızda bulunduğunuz sayfadan başka bir sayfaya yönlendirilmiyorsunuz, aksine seçilen sosyal ağ site üzerinde bir kutu içerisinde açılıyor. Kullanışlı ve kolay. Kutu üzerinde bulunan düğme aracılığı ile kutuyu gizlemek de mümkün.SlideItMoo
SlideItMoo, imajlar için bir MooTools 1.2 kaydırıcısı. Pek çok tarayıcı üzerinde sorunsuz çalışan bu eklenti, JavaScript’in etkin olmadığı zamanlarda bile görünümü ve işlevselliğini bozmuyor. Tüm CSS stillemesi harici olarak yapılmış. Kaydırma işlemi hem ileri ve geri düğmeleri ile hem de fare üzerinde bulunan tekerlek aracılığı ile yapılabilir. Betik hem bir galerinin küçük resimlerini hem de reklam bannerlarını döndürmek için kullanılabilir. Betiği kullanım amacınızı değiştirmek de çok kolay, tek yapmanız gereken betiği sayfanıza eklerken kullanmak istediğiniz sınıfı belirlemek.mooTools ile Yansıma (Reflection) Efekti
Bir ara popüler olan reflection.js’nin mooTools JavaScript çatısı için yeniden yazılmış sürmü. 2KB’dan küçük olan bu eklenti sayesinde sitenizdeki imajlar üzerinde herhangi bir oynama yapmadan onlara yansıma efekti ekleyebilmeniz mümkün hale geliyor.MooTools Etkinlik Takvimi
Resmi olmayan MooTools Etkinlik Takvimi eklentisinin resmi sürümü. Halihazırda kullanılan web projelerine entegre edilebilen bu takvim, mooTools JavaScript çatısını kullanıyor. Şimdilik halen geliştirilme aşamasında olan bu betiğin şu anki hali bile pek çok kullanıcının işini görecektir.AJAX Kullanıcı Adı Kontrol Mekanizması
Sitenize kayıt olmak üzere olan bir kullanıcının seçtiği kullanıcı adının sitede daha önce bir başkası tarafından alınmış olup olmadığını kontrol etmek için neden kullanıcıyı formu göndermek zorunda bırakasınız? AJAX ve MooTools 1.2 kullanılarak kullanıcı adı girildiği anda kontrol işleminin nasıl yapılabileceğini öğrenin.Cam efektine sahip işlevsel navigasyon çubuğu
Ana menü üzerindeki bir sekmeye fare imlecinizi götürürken seçili olan sekmeye ait alt menü öğeleri görüntüleniyor. O sırada navigasyon çubuğunun sağ kısmında alt menüleri gizleyebileceğiniz ‘Gizle’ bağlantısı yer alıyor. Bağlantıya tıklandığında alt menü öğeleri güzel bir efektle gizleniyor ya da yeniden tıklandığında görüntüleniyor.HTML Form İpuçları
Twitter benzeri bir karakter sayacı olan bu eklenti MooTools ile hazırlanmış. Giriş kutusuna karakter girdikçe, daha önceden tanımlayacağınız en yüksek karakter sayısı girilen karakter miktarına göre gittikçe azalıyor.mooFlickr
Eğer Flickr istatistiklerinizi blogunuzda ya da web sayfanızda göstermek istiyorsanız bu küçük eklentiye ihtiyacınız olacaktır. Eklenti Flickr üzerinde gönderdiğiniz resimleri, sık kullandığınız etiketleri ve katıldığınız kullanıcı gruplarının bir listesini alabiliyor.Göster / Gizle efektine sahip CSS dikey menü
Göster / Gizle efekti kullanılarak hazırlanmış ve göster/gizle efekti bulunan bir CSS dikey menüsü. Menünün ana öğeleri üzerine tıklandığında alt menü öğeleri bir efektle beliriyor.mooSlide
mooSlide ile web siteniz üzerinde birkaç kaydırıcı elementini birden çağırabilirsiniz. Tek yapmanız gereken kaydırıcıyı bir sınıfa dahil etmek ve ardından betiğe o sınıfı tanıtmak.MooFlow
Özünde bir resim galerisi olan bu eklenti, görünümü ile kendini benzerlerinden ayırıyor. iTunes’un CoverFlow özelliğinin web sitenizdeki resimlere entegre edebilmeniz için mükemmel bir eklenti.AJAX MooTools Güvenli İletişim FormuMooTools 1.1 çatısını kullanan bu iletişim formu form alanlarını kontrol ederek kullanıcıya eş zamanlı olarak girilen verinin doğru olup olmadığını bildiriyor. Örneğin İsim alanı sadece normal karakterleri, elektronik posta alanı girilen adresin bir elektronik posta adresinin karakterlerini içerip içermediğini ve mesaj alanı üzerinde de web sitesi adresinin girilmesini engelleyerek spam mesajların önüne geçilmesini sağlıyor.Facebook Kaydırıcıları
Yumuşak bir kaydırma efekti.Fotoğraf Galerisi
Büyüleyici bir interaktif fotoğraf galerisi (Demo burada)Noob Slide
Güzel görünümlü bir başka resim galerisi.Simple 3D Carousel
Gelişmiş bir 3B karusel.Kaydırıcı
Yatay ve dikey çubuk ve kaydırıcısı.Arkaplanı tıklayarak değiştirmek
Dinamik renk seçicisi – renk değiştiricisi. Renkler üzerine tıklandığında arkaplan değişiyor.Pamoorama
Sayfa ilk yüklendiğinde resmin bir bölümünü gösteriyor. Ardından üzerine fare imleci götürülüp sürüklenerek imajın geri kalan kısımları görüntülenebiliyor. MooTools kullanarak panaromik efekt oluşturmak isteyenlere.MooTools ile ipuçları
Güzel görünümlü bir ipucu tanıtımı.JavaScript Resim Galerisi
Basit ama kullanışlı bir resim galerisi.Basit bir Navigasyon Çubuğu
Basit ve kullanımı kolay bir navigasyon çubuğu.Slidinglist
Ağaç dosya sistemi benzeri kayan bir navigasyon sistemi.Multibox
Resim, Flash, Video, MP3 ve HTML destekleyen bir lightbox örneği.Resim Menüsü
Üzerine fare imleci getirildiğinde imajın geri kalanını gösteren yatay bir menü.Window Growl
Farklı bir ipucu eklentisi.ReMooz
SqueezeBox’tan daha sade ve kolay olan bir eklenti. Resmin üzerine tıkladığınızda resmin orijinal boyutunu görebiliyorsunuz.Accordions
Güzel görünümlü ve yumuşak geçiş efektleri olan bir navigasyon eklentisi.Slideshow
En fazla özelliğe sahip olan en iyi resim galerisi / slayt gösterisi uygulamalarından birisi. Çok iyi bir eklenti.mooSlide (lightbox’un yerine)
mooSlideBox, AJAX tabanlı küçük ve sade bir uzantı. Özellikle lightbox kullanmak istemeyenlerin ihtiyaçlarını karşılayacak türden.Sayfa Yükleyicisi
Bir başka sayfadaki div’i geçerli sayfadaki div içerisine yükleyebilirsiniz.textarea’yı genişlet
Sadece bir form oluşturmanız yeterli. Betik, textarea form alanının boyutunun kullanıcı tarafından değiştirilebilmesini mümkün kılıyor.JavaScript Zaman Seçicisi
Çok kolay sürükle-bırak arayüzünü kullanan ilk zaman seçicisi.JavaScript İle Hazırlanmış Seksi Yan Çubuk Kayan Menü Sistemi
Yumuşak ve evet, SEKSİ yan çubuk menüsü.Slayt Gösterisi
Resimler arasında yumuşak geçiş efekti.AJAX İle Hazırlanmış Giriş Formu
Kullanımı kolay bir giriş formu.FancyUpload
Güzel görünümlü dosya gönderimleri için SWF AJAX ile birleşti.Doğrulama
Sade bir form doğrulama mekanizması.Dizilebilir Tablo
Tabloları dizin ve filtreleyin.MooTabs – MooTools İçin Basit Sekme Sınıfı
MooTabs gerçekten çok küçük (3KB) ve adından da anlaşılabileceği gibi basit sekmeli navigasyon sistemi hazırlamak isteyenler için düşünülmüş. jQuery, MooTools gibi üçüncü parti JavaScript kütüphanelerini kullanmadan sekmeli içerik oluşturmak isteyenler için bir de bu var.Sıralanabilir Liste Örneği
Sürükle-bırak desteğine sahip sıralanabilir liste. İşe yarar olabilir.Takvim
Calendar (Takvim) bir JavaScript sınıfı olup form elementlerine erişilebilir ve kullanımı kolay tarih seçicileri ekler.MooTools İle Yuvarlatılmış Köşeler
Sitenizde halihazırda bulunan divler üzerine yuvarlatılmış köşeler ekler.Mediabox
Mediabox, “lightbox” tarzında bir pencere üzerinde flash, video ve html içeriğini görüntüleyebilmenizi sağlar.Form KontrolüFormlar üzerinde farklı testler uygular ve hataları vurgular.mooRainbow
mooTools çatısı altında inşa edilmiş bir renk seçicisi (color picker).Lightbox
Geçerli sayfanın üzerinde beliren satıriçi resim penceresi.SmoothGallery
Bu JavaScript galerisi ve slayt gösterisi sistemi sitenize sade ve yumuşak geçiş efektleri bulunan resim galerileri, slayt gösterileri, vitrinler gibi kullanışlı öğeler ekleyebilmenizi sağlar.Popmenu
Arkaplan imajı yavaşça belirerek karaktersiz menülerinize canlılık katar.MooWheel
Bu betiğin amacı JavaScript ve tuval nesnesi kullanılarak verinin görselleştirilebilmesine dair özgün ve kullanışlı bir örnek oluşturmak. Bu tip görselleştirmeler özellikle farklı nesneler arasındaki bağlantıları göstermek için kullanılabilir.moo.rd
Bu bir dizi örnek uygulama moo.rd’nin nasıl çalıştığını ve sizin moo.rd ile nasıl çalışabileceğinizi gösteriyor. MooTools’un gücüne güç katmak için eşsiz bir uzantı.Mootools Mocha UI
Mocha bir web uygulama arabirim kütüphanesi olup doğrudan MooToools JavaScript kütüphanesi üzerine inşa edilmiştir. Mocha grafiksel kullanıcı arabirim bileşenleri tuval etiket grafikleri ile oluşturulmuş çok gelişmiş bir kütüphane.* Kaynak: speckyboy
