jQuery UI Kullanımı

JQueryUI, jQuery JavaScript kütüphanesi üzerine inşa edilmiş güçlü bir Javascript kütüphanesi. UI kullanıcı arayüzü anlamına gelir, jQuery için çekirdek kitaplığa yeni işlevler ekleyen bir dizi eklentidir. Web tasarımları için sunduğu widget nesneleri ile kolay bir şekilde modüller hazırlama imkanı sunmaktadır.

Bu yazı ile Jquery UI kütüphanesi, Jquery UI CSS, Jquery UI eklentilerinin kullanımı hakkında bilgi sahibi olacaksınız. Yine bu sayfada hazırlanmış basit örneklerle birlikte site içinde anlatılmış olan diğer UI eklentilerine ulaşacaksınız.

Jquery UI Kütüphanesini Tanıyalım

Jquery UI web sitesine girdiğimizde karşımıza aşağıdaki gibi bir ekran çıkar. Resimde numaralandırılmış bölümleri açıklayarak başlayalım.

1- Jquery UI Özellikleri Bölümü : Bir ile gösterilen bölümdür. JqueryUI, interactions, widgets, effects, utilities olmak üzere dört gruba ayrılmıştır.

Interactions: Bu bölüm sürükleme, bırakma, yeniden boyutlandırma vb. eklentileri içerir. Yine bu bölüm kullanıcıya DOM ile etkileşimde bulunma olanağı verir.
Widgets : Jquery UI eklentilerinde en çok kullanılan bölümdür. Bu bölümde accordian, datepicker vb. kullanıcı ara birimleri mevcuttur.
Effects : Dahili jQuery efektleri üzerine inşa edilmiştir. DOM öğeleri için özel animasyonlar ve geçişler içeren bir paketi sunar
Utilities : Jquery UI kitaplığının dahili olarak kullandığı bir dizi modüler araçtır.

2- İndirme Bölümü : İki ile gösterilen bölümdür. Jquery kütüphanesini Stablebutonuna basarak standart indirme yada Custom Download butonuna basarak ihtiyacımız olan bölümleri indirebiliriz. Custom bölümünde ihtiyacımız olan bölümleri seçtikten sonra sayfanın altında bulunan Theme bölümünden istediğimiz temayı seçip download butonuna basarak indirme işlemini gerçekleştirebiliriz.

CDN olarak da kullanabiliriz. https://developers.google.com/speed/libraries/adresine girip Jquery veJquery UI dosyalarını CDN olarak projeye eklenebilir.

3- Menü Düzeni : Üç numara ile gösterilen bölümde ise Jquery UI nesnelerinin nasıl kullanıldığı ile ilgili demolara, iki numaralı bölümdeki indirme bağlantısına, UI kütüphaneleri ile ilgili dökümantasyona ve en önemli kısım olan UI Temaları için gerekli menü bağlantısına ulaşabilirsiniz.

Themes linkine tıklandığında aşağıdaki gibi tema bölümü gelecektir. Gerekli tema seçilip, üzerinde istenilen düzenleme yapıldıktan sonra download ile güncel temalı UI kütüphanesi indirilebilir.

Jquery UI Dosya Yapısı

İndirme yapıldıktan sonra Jquery UI kütüphanesini kullanabilmek için UI ile gelen 2 dosya ve Jquery kütüphanesi olmak üzere 3 tane dosyayı projeye dahil etmek zorundayız. Tema kullanılacaksa dosya sayısı 4 olacaktır. CDN üzerinde özelleştirilmiş olmayacağı için temaya ait olan dosyayı yerelden dahil etmeniz gerekecektir. Yereldeki temayı eklerken yanındaki images klasörünü de dahil etmeyi unutmayın.