jQuery UI Nedir ?

jQuery UI, jQuery javaScript kütüphanesi ile yazılmış, kullanıcı arayüzü bileşenleri , web sitesi efektleri ve form elemanları gibi web programlama unsurlarını içinde barındıran, oldukça sık kullanılan bir API yapısıdır. Ön yüz geliştiricisi birçok yazılımcı bu UI yapılarını kullanarak çeşitli işlemleri gerçekleştirmektedir. Form yapılarını ve bazı basit efektleri bu yapılar ile gerçekleştirmek oldukça pratiktir.

jquery ui

Yazımızda Bulunan İçerikler

 1- User Interface (Kullanıcı Arayüzü) Widget Unsurları

  • Sortable
  • Selectable
  • Draggable
  • Droppable
  • Resizable

2- jQuery UI Widget Kullanımları

  • Accordion
  • Autocomplete
  • Checkboxradio
  • Controlgroup
  • Datepicker
  • Dialog
  • Menu
  • Progressbar
  • Selectmenu
  • Slider
  • Spinner
  • Tooltip

3- Bazı jQuery UI Efektleri

  • Add Class
  • Remove Class
  • Switch Class
  • Toggle
  • Toggle Class
  • Color Animation
  • Effect
  • Show
  • Hide
4- Nereden ulaşabilirsiniz?

 User Interface (Kullanıcı Arayüzü) Widget Unsurları

Sortable: HTML sayfası içerisinde liste şeklinde tasarlanan ve liste elemanlarını fare yardımıyla sıralamanızı sağlayan javascript yapılarıdır.

Selectable: Liste elemanlarını tek tek veya grup olarak seçme imkanı sunan kullanıcı arayüzü bileşenlerindendir.

Draggable: HTML etiketlerini fare yardımıyla hareket ettirebilmemizi sağlayan Jquery UI bileşenidir.

Droppable: Hareket ettirilen HTML etiketleri için hedef belirlemizi sağlar. Bu elemanın üstüne geldiğimizde istenilen olay tetiklenebilir.

Resizable: HTML elementlerine istediğimiz yüksekliği ve genişliği verebilmemizi sağlar. Metin kutusu şeklinde yapılarda sıklıkla kullanılır.

Bu beş Jquery UI bileşeninin örnek uygulamasına buradan ulaşabilirsiniz

jQuery UI Widget Kullanımları

Accordion

Tıkladığınız başlığın altında yer alan içeriği gösterebildiğiniz Jquery UI bileşenleridir. İçeriği belli bölümlere ayırarak kullanıcı dostu bir arayüz oluşturabilirsiniz. Örnek bir “accordion” uygulamasına aşağıda yer alan kodlardan ulaşabilirsiniz.

http://www.tolgasariyildiz.com.tr/jquery/accordion.html

Form Bileşenleri

Autocomplete: Girilen ilk harflere göre form elemanını çeşitli değer ile tamamlamaya yarayan UI bileşenidir. Bazı işlerin hızlı bir şekilde yapılması için kritik öneme sahiptir.

Form elemanı için örnek uygulamaya buradan ulaşabilirsiniz.

Checkboxradio: Checkbox ve radio button form elemanlarının stil ve hover değerleriyle kolay bir biçimde oynamamıza yardımcı olan bu bileşen oldukça kullanışlıdır. ( Tüm form elemanlarının kullanımının yer aldığı örnek uygulamaya aşağıda vermiş olduğumuz linkten ulaşabilirsiniz. )

Form elemanı için örnek uygulamaya buradan ulaşabilirsiniz.

Controlgroup: Butonları ve açılır menuleri belli gruplara ayırmamıza yarayan bu bileşen, aynı sayfada pek çok form bileşenini gruplara ayırmamıza yardımcı olur.

Controlgroup ve diğer form bileşenlerinin anlatıldığı orjinal kaynağa ulaşmak için tıklayınız

Datepicker: Tarih değerleri girebilmeye yarayan bu bileşen oldukça kullanışlıdır. İstediğiniz şekli ve dili kullanabildiğiniz bu yapıyı kullanmanızı tavsiye ederiz.

Datepicker için örnek uygulamaya buradan ulaşabilirsiniz.

Selectmenu: Form içerisinde seçim yapabilmenizi sağlayan, genellikle aşağı yönde açılır menü şeklinde kullanılan yapılardır. Belirlenen seçim değerleri ile kullanıcı arayüzünde seçim yapabilmesini sağlar.

Örnek bir uygulamaya bu adresten ulaşabilirsiniz.

(Sitede kodları görmeniz için aşağı kısımda bulunan “view source” bağlantısına tıklamanız gerekir.)

Örnek UI Bileşenleri

Dialog: Diyalog penceresi içerisinde belli içerikleri gösterebilmenizi sağlar.

http://jqueryui.com/dialog/

Menu: Html sayfasına fare veya klavye ile kontrol edilebilen, stilleri değiştirebilir menüler eklemenizi sağlar.

http://jqueryui.com/menu/

Progressbar: Web sayfasına yükleme çubuğu eklemeyi sağlayan UI bileşendir.

http://jqueryui.com/progressbar/

Slider: Web sayfasına kaydırabilir HTML elementi eklemeyi sağlayan jQuery bileşenidir.

http://jqueryui.com/slider/

Tooltip: Form elemanları üzerine odaklanıldığı zaman çeşitli bilgilendirmeler yapılmasını sağlayan jQuery yapılarıdır.

http://jqueryui.com/tooltip/

NOT: Sitede kodları görmeniz için sayfanın alt tarafında bulunan “view source” bağlantısına tıklamanız gerekir.

Bazı jQuery UI Efektleri

Add Class: İstediğiniz HTML elemanına farklı bir sınıf eklemenize ve  çeşitli efektler oluşturmanıza olanak sağlar.

Remove Class: Yukarıda UI bileşenin tam tersi mantıkta çalışır. Belirtilen sınıfı silerek HTML elemanını temel durumuna döndürür. Genellikle “Add Class” yapısı ile birlikte kullanılır.

Örnek uygulamaya ulaşmak için tıklayınız.

Switch Class: HTML elemanı üzerinde uygulanmakta olan sınıf başka bir css sınıfı ile değiştirmeye yarayan UI yapısıdır. Burada da yukarıdaki bileşenle benzer mantık olduğu için linkte direkt olarak sitedeki örneği paylaştık.

Örnek uygulamaya ulaşmak için tıklayınız.

Toggle: Çeşitli efektler kullanarak elemanların gösterilmesini veya saklanmasını sağlar.

http://jqueryui.com/toggle/

Toggle Class: Yukarıda bahsettiğimiz efekt kullanıldığında HTML elementi üzerinde hangi sınıfın etki edeceğini belirlemeye yarayan bileşendir.

Örnek uygulamaya ulaşmak için tıklayınız.

Color Animation: HTML elementi üzerinde renk özelliğini değiştirmeye yarayan bazı kullanıcı arayüzü bileşenleri kullanılabilmektedir.

Örnek uygulamaya buradan ulaşabilirsiniz.

Effect: Bir element üzerinde herhangi bir animasyon kullanmanıza olanak sağlar.

http://jqueryui.com/effect/

Show: Gizlenmiş olan HTML elementini göstermeye yarayan UI yapısıdır.

http://jqueryui.com/show/

Hide: HTML elementini gizlemeye yarayan UI yapısıdır.

http://jqueryui.com/hide/

Nereden ulaşabilirsiniz?

Bu adresten diğer bütün kullanıcı arayüzü ( User Interface ) bileşenlerine ulaşabilirsiniz: http://jqueryui.com/

Buradan indirebilirsiniz: http://jqueryui.com/download/

Yazımızın sonuna geldik. Jquery konusundaki yazılarımız devam edecektir. Değerli fikir ve yorumlarınızı bekliyoruz. Kolay gelsin.