Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

MooTools ile Basit, Güçlü Ürün Vurgulayıcı Oluşturun

by
Difficulty:BeginnerLength:MediumLanguages:

Turkish (Türkçe) translation by Şevket YILMAZ (you can also view the original English article)

İster inanın ister inanmayın, düzgün navigasyon menüleri yanında javascript kullanarak sitenize getirebileceğiniz pek çok güçlü etkileşim var. Bu eğitim en güçlü ve modüler javascript kütüphanelerinden birini tanıtarak iç ineğinizi  (inner cow) bulmanıza yardımcı olacaktır — MooTools!  MooTools javascript frameworkünü kullanarak sitelerinizi veya hizmetlerinizi vurgulamak için esnek bir araç oluşturacağız. Ayrıca, MooTools'un gelecekteki tüm projeleriniz için doğru javascript kütüphanesi olmasının birçok nedenini öğrenin!

Demo

İşte, inşa ettiğimiz şey bu, ürün vurgulayıcı olarak çok iyi çalışan akıllı bir rollover mekanizması.




Neden MooTools?

Ne düşündüğünüzü biliyorum... MooTools muhtemelen, jQuery—veya Prototype ve Scriptaculous ile olan uzun süredir devam eden ilişkimi koparmama neden olabilecek ne önerebilir!

Geçmişte jQuery kullanarak karşılaştığım en büyük sorunlardan biri, eklentilerinin birçoğunun bağımsız olarak oluşturulduğu ve geliştirildiği gerçeğidir. Bunun ANLAMI, kendi eklentilerinizi aktif olarak güncellemek için bir yabancıya güveniyorsunuz demektir. jQuery kitaplığı da yeni ve daha yeni sürümleri yayınlamaya devam ediyor. Bu başarısız olduğunda (ve çoğu zaman böyle olur), komut dosyanızın doğru bir şekilde çalışmasını sağlayacak çekirdek kütüphanenin doğru sürümünü kendiniz arayıp bulacaksınız!

Belki Prototype ve onun tanınmış suç ortağı Scriptaculous, daha fazla sizin tarzınızdır. Bu özel durumda, modülerlik hakkından mahrum kalacaksınız ve tüm sayfalarınızda iki adet büyük boyutlu kütüphane ya da bazı durumlarda bir eklenti dosyasına da yer vermeye zorlanıyorsunuz!

Yani MooTools o kadar harikaysa... o zaman neden daha fazla kullanılmıyor? Neden bir çok ders ve her kütüphane rafında kitaplar yok?! Bir kaç sebep var:

  1. MooTools, orta seviyeden daha fazla ileri düzey scripter'e doğru  yöneliyor.
  2. Hemen uygulamaya izin veren kes ve yapıştır eklentileri koleksiyonlarını bulamazsınız.
  3. MooTools kullanıcıları, (her ne sebeple olursa olsun) elitist bir eğilime sahip olmakla ilişkilidir.

Bununla birlikte, JSON dosya ayrıştırma, çerezler ve flaş gömme gibi bir çok benzersiz komut dosyasıyla çalışmak için yeterli araçları bulacaksınız. Ayrıca, projeniz için tam olarak ihtiyacınız olanı seçebilmenizi sağlayan uygun bir indirme sayfasıdır, böylece mümkün olan en küçük dosya boyutunu sağlayabilirsiniz.

Adım 1 - MooTools'u al!

MooTools Core Builder sayfasına gidin! Bu özel proje için, Fx.Morph, Element.Event, DomReady ve Selector'ları seçin ve YUI Kompresörü kullanarak "İndir" düğmesine basın. Tüm bağımlılıklar sizin için otomatik olarak seçilir. Dikkatli olun, bazı tarayıcılar korumanız için bir javascript dosyasına bir '.txt' uzantısı ekleyecektir. Bunun kaldırılması gerektiği açıktır ve dosya adında bazı uzun karakterleri kırpmaktan çekinmeyin.

Adım 2 - MooTools'u HTML belgenize ekleyin

Bu proje için kullanacağınız HTML dokümanını oluşturun ve MooTools kütüphanesini ekleyin. Sayfamın başı şöyle bir şeye benziyor:

Adım 3 - CSS ve HTML'nizi yerleştirin

Sayfayı nasıl oluşturduğumu görmek için aşağıdaki stillere ve HTML'ye göz atın.

CSS kodu:

HTML kodu:

HTML'nin nasıl oluşturulduğuna dikkat edin. Herhangi bir sayfa veya balon ögesi seçmek için ID'leri kullanmayacağım ve bunun yerine, vurgulamak için kaç öge seçtiğinize bakmaksızın bu komut dosyasının  ölçeklenmesini sağlamak için iki sınıfın  tüm ögelerini içeren dizileri oluşturacağım. Tüm balonlar ve sayfalar, site sarıcısı içinde kesin olarak yerleştirilmiş bir sarıcıda bulunur (bunların hepsinin üzerinde bulunduğu arka planımızı içerir).

Adım 4 - Javascript'inizi ekleyin

DOM yüklendikten ve hazır olduktan sonra, window nesnesine bir olay dinleyicisi yerleştiren javascript kodumuz için bir sarıcı işlevi oluşturarak başlayacağız. Bu önemlidir, çünkü script'i hemen kullanıma sunulduktan sonra DOM'u değiştirmeye başlamamız gerekiyor.

Bu sarmalayıcı işlevini kullanmazsak, belirli ögelerin mevcut olmadığını söyleyen hatalar alırsınız. Diğer bir seçenek, gömülü javascript'i belge gövdesinin sonuna yerleştirmek olabilir. Ancak, komut dosyasını harici olarak eklemeye karar verirseniz, bu sorunla tekrar karşılaşırsınız, bu yüzden şimdilik içeriye eklemek iyi bir alışkanlıktır!

'Domready' için başka bir seçenek, sayfa (görüntüler dahil) tamamen yüklendiğinde ateşlenecek 'load' kullanmaktır. Bu özel proje için bunu istemiyoruz çünkü senaryolarımızdaki görüntüler (balonlarımız gibi) komutumuz tarafından gizlenmeden önce ekranda net olarak yanıp sönebiliyor.

Dikkat edilmesi gereken bir diğer önemli nokta ise, bu betiği harici bir '.js' dosyasından bağlamaya KARAR verirseniz, MooTools kütüphanesini belge başlığına bağladığınızdan emin olmanız gerekir.

Ardından, hem sayfamız hem de balon ögeleriniz için diziler oluşturarak başlıyoruz ve bazı başlangıç satır içi stilleri ayarlıyoruz.

Son olarak, karşılık gelen balonar üzerinde morf efektlerini tetiklemek için sayfa simgelerine etkinlik dinleyicileri ekleyeceğiz. HTML'de belirtildiği gibi balonların sırasının sayfa simgeleriyle AYNI sırada olduğunu unutmayın. Bu önemli!

'MyPages' dizisinin tüm ögelerine each() yöntemini kullanarak bir işlev eklediğimizi fark edeceksiniz. Ve her bir işlev için, sayfa ögesini temsil eden 'el' ve bu sayfa elemanının kendi dizisi içindeki yerleşimini temsil eden bir tamsayı 'i' geçirdik. 'MyBubbles' dizisindeki uygun ve karşılık gelen balon ögesi üzerinde morf etkisini çağırmak için 'i' değişkenini kullanırız.

Ve bu kadar! Oldukça acısız değil mi? Çalışma demosunu görüntülediğinizden emin olun ve ileride başvurmak üzere MooTools Docs sayfasını ve MooTools Download sayfasını kısa yollara ekleyin! Umarım bu eğitici yardımcı olmuştur ve MooTools sınıflarının gücünü kullanarak yakın gelecekte biraz daha ileri düzey bir şeyleri bir araya getirmek için sabırsızlanıyorum!




Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.