jQuery UI Kullanımı

Bu dersimizde jQuery UI'nin ne anlama geldiğini ve projemizde nasıl kullanabileceğimizi öğreneceğiz. Oldukça kısa bir ders olacak.

jquery-ui-logo

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

jQuery UI Kullanımı
Büyütmek için resme tıklayınız.

İlk olarak jquery.com adresine gidiyoruz. Daha sonra sol üstteki sekmelerden jQuery UI ikonuna tıklıyoruz.

jQuery UI Kullanımı
Büyütmek için resme tıklayınız.

jqueryui.com adresi açılacaktır. Buradan Custom Download bağlantısına tıklıyoruz.

jQuery UI Kullanımı
Küçültmek için resme tıklayınız.

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 theme bağ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.

jQuery UI Kullanımı

İnen zip dosyasınının içindekileri WinRar ya da WinZip yardımı ile çıkartın.

jQuery UI Kullanımı
Büyütmek için resme tıklayınız.

Çıkarttığınız klasörü açın. css ve js olmak üzere iki klasör göreceksiniz. İşimize yarayacaklar bu klasörlerin içersinde. css'tekileri projemizdeki css klasörüne, js'tekileri ise projemizdeki Scripts klasörüne aktaracağız.

jQuery UI Kullanımı
Büyütmek için resme tıklayınız.

İ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.

jQuery UI Kullanımı
Büyütmek için resme tıklayınız.

Dosyalar bu şekilde eklenmiş olmalı.

jQuery UI Kullanımı
Büyütmek için resme tıklayınız.

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.

jQuery UI Kullanımı
Büyütmek için resme tıklayınız.

İki dosya da bu şekilde eklenmiş olmalı.

jQuery UI Kullanımı
Büyütmek için resme tıklayınız.

Şimdi jQuery UI'yi projemize tam anlamıyla dahil etmek kaldı. İlk olarak css klasöründeki jQuery UI stil dosyasını <title> etiketinin altına sürükleyip bırakın.

jQuery UI Kullanımı
Büyütmek için resme tıklayınız.

Ve son olarak Scripts klasöründeki jquery-ui-x.x.x.custom.js dosyasını jquery-x.x.x.js dosyasının altına sürükleyip bırakın.

jQuery UI projemize tam anlamıyla dahil olmuş oldu.

Bu dersin videosunu 1080p HD kalitesinde izleyebilirsiniz.

Bu derslik bu kadar. Bir sonraki dersimizde jQuery UI ile sekme yapımı ve özelleştirmesi konusuna değineceğiz.

Diğer derse geçmek için tıklayınız. >>>
Come to the Dark Site!