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, Jqery 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 Stable butonuna 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.
Google CDN üzerinden şekildeki gibi kopyalayıp kullanabilirsiniz. CDN https://developers.google.com/speed/libraries/
Jquery UI Örnekeleri
- CDN üzerinden Jquery UI kullanımı ile dialog nesnesini gösterme
- Özel tema ile dialog nesnesini gösterme
- Jquery Dialog Kullanımı
- Jquery UI Accordion Panel Kullanımı
- Jquery UI Tabs Kullanımı
- Jquery UI Sürükle Bırak Örneği
- Jquery UI Datepicker Kullanımı
- Jquery Autocomplete Kullanımı
Örnek 1
CDN üzerinden Jquery UI kullanımı ile dialog nesnesini gösterme
Ekran Çıktısı:
Adım 1: CDN üzerinden dosyaları dahil ediyoruz.
|
1 2 3 4 5 |
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> |
Adım 2: Belge yüklendikten sonra ekrana uyarı vermesi için gerekli olan nesneyi seçip, UI dialog nesnesi olmasını sağlıyoruz.
|
1 2 3 4 5 6 7 |
<script type = "text/javascript"> $(function () { $('#uyari').dialog(); }); </script> |
Adım 3: Script kodları yazıldıktan sonra gerekli olan HTML kodlarını da aşağıdaki gibi sayfaya ekliyoruz.
|
1 2 3 4 5 6 7 |
<body> <div id = "uyari" title = "İlk UI Uygulaması"> <p>Merhaba: yazilimbilisim.net </p> </div> </body> |
Sonuc: İşte hepsi bu kadar. Sayfanın tamamlanmış kodları şu şekilde olacak.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Yazılım Bilişim Jquery UI Kullanımı</title> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script type = "text/javascript"> $(function () { $('#uyari').dialog(); }); </script> </head> <body> <div id = "uyari" title = "İlk UI Uygulaması"> <p>Merhaba: yazilimbilisim.net </p> </div> </body> </html> |
Örnek 2
Dialog örneğini kişiselleştirilmiş tema ile yapalım. Bunun için indirdiğimiz Jquery UI dosyaları içindeki theme stil dosyasını ve CDN üzerinden script dosyalarını kullanıyoruz. Benim indirdiğim klasörde bu şekilde görünüyor. klasör içindeki jquery-ui.theme.min.css dosyasını projeye dahil ediyorum.
Ekran Çıktısı:
Adım 1: Özel tema dosyası ve CDN üzerinden gerekli dosyaları aşağıdaki gibi projeye dahil ediyorum. Özel jquery-ui.theme.min.css dosyasını CDN ile çektiğim jquery-ui.min.css dosyasının altına ekledim.
|
1 2 3 4 5 6 7 |
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> <!-- özel temanın yolu --> <link rel="stylesheet" href="jquery-ui-1.12.1.custom/jquery-ui.theme.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> |
Adım 2: Belge yüklendikten sonra ekrana uyarı vermesi için gerekli olan nesneyi seçip, UI dialog nesnesi olmasını sağlıyoruz.
|
1 2 3 4 5 6 7 |
<script type = "text/javascript"> $(function () { $('#uyari').dialog(); }); </script> |
Adım 3: Script kodları yazıldıktan sonra gerekli olan HTML kodlarını da aşağıdaki gibi sayfaya ekliyoruz.
|
1 2 3 4 5 6 7 |
<body> <div id = "uyari" title = "İlk UI Uygulaması"> <p>Merhaba: yazilimbilisim.net </p> </div> </body> |
Sonuc: İşte hepsi bu kadar. Sayfanın tamamlanmış kodları şu şekilde olacak.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Yazılım Bilişim Jquery UI Kullanımı</title> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> <!-- özel temanın yolu --> <link rel="stylesheet" href="jquery-ui-1.12.1.custom/jquery-ui.theme.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script type = "text/javascript"> $(function () { $('#uyari').dialog(); }); </script> </head> <body> <div id = "uyari" title = "İlk UI Uygulaması"> <p>Merhaba: yazilimbilisim.net </p> </div> </body> </html> |
Örnek 3
Jquery Dialog Kullanımı, Jquery Dialog nesnesinin kullanımı, butona tıklayınca uyarı vermesi ve sayfa açılışında çalışması örneklerini içerir.
Örnek 4
Jquery UI Accordion Panel Kullanımı, akordiyon yapısının kullanımını temel bir şekilde anlatır.
Örnek 5
Jquery UI Tabs Kullanımı, tab sekmelerinin kullanımı ile ilgili temel örnekleri içerir.
Örnek 6
Jquery UI Sürükle Bırak Örneği , drag ve drop kavramlarını açıklayan örneği içerir. Sürükle bırak örneği jquery çekirdeği ve ui kütüphanelerinin DOM nesneleri ile birlikte kullanımını içerir.
Örnek 7
Jquery UI Datepicker Kullanımı, Türkçe tarih formatı başta olmak üzere veri tabanı için gerekli olan tarih formatlarını içeren uygulama örneğidir.
Örnek 8
Jquery Autocomplete Kullanımı, AJAX işlemleri ile PHP veri tabanından veriyi JSON formatında çekip ekranda göstermeyi hedefleyen örneği içerir.
