jQuery UI
Bazen projemizde sekmeli bir açıklama alanı, akordiyon menü, otomatik tamamlama formu, ipucu bildirimleri ya da takvimden gün seçimi gibi uygulamalar kullanmak isteyebiliriz. jQuery UI bu tür uygulamaları biz daha rahat kullanalım diye oluşturulmuş bir JavaScript kütüphanesidir. UI, user interface‘in yani kullanıcı arayüzü‘nün kısaltmasıdır. Bu terimi kullanmayı genellikle programcılar sevmektedir. Bir web sitesinin görünümü aynı zamanda bir kullanıcı arayüzüdür. Ama biz tasarımcılar bunun yerine “site arayüzü” terimini kullanmayı daha çok seviyoruz. Şimdi lafı uzatmadan jQuery UI’yi projemize nasıl dahil edebileceğimizi öğrenelim.
Projeye jQuery UI Dahil Etme
İlk olarak jquery.com adresine gidiyoruz. Daha sonra sol üstteki sekmelerden jQuery UI ikonuna tıklıyoruz.
jqueryui.com adresi açılacaktır. Buradan Custom Download bağlantısına tıklıyoruz.
Bu sayfada mutlaka Stable versiyonunu seçin. Stable jQuery UI yeniliklerini içeren kararlı sürümdür. Legacy ise eski sürümlerin yeni tarayıcılara uyarlanmış bir sürümüdür. Eğer projenizde jQuery’nin 1.8.3 gibi bir sürümünü kullandıysanız Legacy versiyonunu indirmenizi öneririm.
Sürüm seçimini yaptıktan sonra Toggle All seçeneğini kaldırın ve bileşenlerden sadece sizin ihtiyacınız kadarını seçin. Eğer ileride başka bileşenleri de kullanabilirim diyorsanız ya da “Ben Türk’üm abi. Beleşse hepsini alırım.” mantığı ile hareket ediyorsanız Toggle All seçeneğini etkinleştirin.
Bileşenleri seçtikten sonra sitenize uygun bir tema seçin. Temaları görmek için ya da temalar sizin sitenize uygun değilse design a custom themebağlantısına tıklayın ve temalara göz atın. Gerekirse özelleştirilmiş bir tema yapın.
Ben size ders anlatacağım için Toggle All seçeneğini seçiyorum ve temalardan varsayılanı seçiyorum. Tema özelleştirmelerini CSS ile kendim yapacağım.
Her şey tamamsa Download düğmesine tıklayın ve dosyayı masaüstüne kaydedin.
İnen zip dosyasınının içindekileri WinRar ya da WinZip yardımı ile çıkartın.
İlk olarak css klasörünü açın ve image klasörü ile jquery-ui-1.x.x.custom.css stil dosyasını sürükle – bırak yöntemi ile projemizdeki css klasörüne bırakın.
js klasörüne dönün ve jquery-x.x.x.js dosyası ile jquery-ui-x.x.x.custom.js dosyasını projemizdeki Scripts klasörüne sürükleyip bırakın.
İki dosya da bu şekilde eklenmiş olmalı.