Web Sitelerinde En Çok Kullandığım Javascriptler

Bugün web sitelerinin vazgeçilmez javascript kütüphanesi haline gelen Jquery’nin, javascript dünyasında tek başına liderliğe oturması hiç de tesadüf değil. Özellikle client-side çalışmalarımızda az kodla çok iş yapmamızı sağlaması, sade ve anlaşılır diliyle tam bir kullanıcı dostu olması Jquery’nin bu kadar yaygınlaşmasındaki sebeplerin başında geliyor. Artık her web sitesinde mutlaka karşılaştığımız Jquery pluginleri ve küçük javascript kütüphaneleri var. Özellikle bazı Jquery pluginleri benim için vazgeçilmez oldu. Bu vesile ile ben de her web projesinde alışkanlık haline getirdiğim javascriptleri bir araya getirip ne işe yaradıklarını açıkladım.

Modernizr

Çalışmalarımda projenin en başına mutlaka eklediğim küçük bir javascript kütüphanesi ile başlayalım. Modernizr, adından da anlaşılabileceği üzere tarayıcının modern olup olmadığını tespit ediyor. Böylece HTML5 & CSS3 ile kodlanmış bir web sitesini tarayıcının düzgün gösterip göstermeyeceğini tespit ederek bir uyarı mesajı ile html kodunun tarayıcıda hata vermesini engeller. Sadece bununla da kalmaz; HTML5 kodlarını desteklemeyen Internet Explorer 7 gibi eski tarayıcılar için ayrıca kod yazabilmenize de imkan verir.

ASP.Net MVC geliştiricileri Visual Studio’da yeni bir proje açtığında script dizini içine Modernizr’ın otomatik olarak eklendiğini görebilir. (Sanırım Microsoft, eski IE versiyonlarından dolayı bize karşı bayağı mahçup:)

Modernizr demo & indir: http://modernizr.com/

Jquery UI (Datepicker, tabs, accordion, auto fill vs)

Bu kütüphane tüm projelerimde adeta hayat kurtarıyor. Takvim, akordiyon menü, tablar, otomatik tamamlama gibi birçok arayüzü bir araya getirmiş bir kütüphane Jquery UI. Kütüphaneyi indirirken sadece ihtiyacınıza göre seçmenize de  imkan veriyor.

Jquery UI indir: http://jqueryui.com/

Easy Dropdown

Patrick Kunka tarafından geliştirilen bu Jquery eklentisi, select menuleri standart arayüzünden kurtarıp istediğiniz gibi tasarlayabilmenizi sağlıyor. <select> elementine dropdown class’ını eklemeniz yeterli. Daha sonra tasarımını CSS ile düzenleyebilirsiniz.

Easy Dropdown demo & indir: https://github.com/patrickkunka/easydropdown

Lazy Load

Kullanmayan kaldı mı bilmiyorum, resim dosyalarının sayfayı scroll ettikçe açılmasını sağlayan, böylece sayfanın hız performansı konusunda olumlu bir etkisi olan önemli bir eklenti. Çalışma yapısı olarak başlangıçta her resmin yerinde 1 piksellik küçücük bir resim dosyası gösteren, sayfada aşağı doğru indikçe orijinal resimleri yükleyen bir mantığa sahip. özellikle liste sayfalarında pagination yerine sonsuz scroll özelliği kullanırken Lazy Load mutlaka kullanılmalı.

Lazy Load demo & indir: http://plugins.jquery.com/lazyload/

Form Validation Engine

Web sitelerine eklediğiniz iletişim ve sipariş gibi formlarda, alanları boş bıraktığınızda uyarı mesajı çıkmasını sağlayan oldukça kullanışlı bir jquery plugini. Güzel yanı uyarı mesajını her form elementine özgün olarak belirleyebiliyorsunuz. Örneğin e-mail alanına girilen bir yazının e-mail formatına uygunluğunu kontrol edebilir, telefon alanına ise sadece sayılardan oluşması gerektiğine dair bir mesaj çıkarabilirsiniz.

Validation Engine demo & indir: http://plugins.jquery.com/validationengine

Mousewheel

En basit tanımıyla Mousewheel, mouse’un ortasındaki tekerleğin hareketini algılayan bir javascript kütüphanesidir. Özellikle parallax arayüzler ile hazırladığım sitelerde çok işime yarıyor.

Mousewheel demo & indir: http://plugins.jquery.com/mousewheel

Cycle Slider

Herhalde web sitelerinde en çok kullanılan slider pluginlerinin başında Cycle Slider geliyordur. Hem kolay ve sade kullanımı, hem küçük dosya boyutu, hem de istediğimiz gibi geliştirebileceğimiz esnek yapısı ile özellikle sitelerin ana sayfasında vazgeçilmez bir jquery eklentisi.

Cycle Slider demo & indir: http://jquery.malsup.com/cycle/

Flex Slider

Cycle Slider kullanmaktan sıkıldıysanız ya da Cycle’ın sade yapısı size yetmiyorsa; aynı zamanda bir foto galeri şeklinde de kullanmak istiyorsanız; thumbnail resimleri, kontrol navigasyonu ve responsive gibi özellikleri ile siteye daha gelişmiş bir slider eklemek isteyenler için oldukça kullanışlı bir plugin.

Flex Slider demo & indir: http://flexslider.woothemes.com

FancyBox

Kullanım kolaylığı ve özellikleri bakımından en çok tercih ettiğim modal window scripti Fancy Box. Resim galerisi hazırlamanın haricinde modal window içinde inline html, iframe, swf, video, ajax gibi birçok içeriği desteklemesi ile işinizi fazlasıyla görüyor. Açıkçası FancyBox varken alternatiflerine ihtiyaç duymuyorum.

FancyBox demo & indir: http://www.fancybox.net