JQuery UI Dialog Kullanımı – Ahmet Cansever
Salı , 24 Ekim 2017
Anasayfa » Javascript » JQuery UI Dialog Kullanımı

JQuery UI Dialog Kullanımı

Bu örneğimizde JQuery’nin UI eklentisini kullanarak butona basıldığında açılan dialog kutusu yapacağız.
İlk olarak JQuery’nin sitesinden JQuery dosyasını ve UI eklentisini indiriyoruz ve index sayfamıza bağlıyoruz.

Head etiketlerinin arasına ui.css ve theme.css dosyalarını ekliyoruz.
Body etiketlerinin arasına da ilk olarak JQuery dosyasını daha sonra JQuery-ui dosyasının yolunu yazarak çalışma dosyamıza ekliyoruz. Varsa kendi JavaScript dosyamızı en sona ekliyoruz

HTML: Dialog oluşturmak için ilk olarak div açıyoruz. Bu dive ‘id’ ve ‘title’ veriyoruz (‘Title’ divin başlık kısmında görülecek). Daha sonra bu divin içerisine ‘p’ etiketi ile yazı yazıyoruz.

JQUERY: JQuery kodlarının sayfa yüklendikten sonra yüklenmesi sayfanın yüklenme süresini kısaltır. Bu yüzden ilk olarak ‘.ready’ olayını ve fonksiyonunu yazıyoruz. Kodların tamamını bu fonksiyonun içerisine yazacağız.
Oluşturduğumuz divi dialog’a dönüştürmek için ilk olarak id’si ile çalışma sayfamızda tanımlıyoruz ve ‘dialog’ özelliğini atıyoruz.

Dialog Nesnesiyle kullanılan özelliklere gelelim. İlk olarak yapacağımız örnekte dialog nesnesinin sayfa açıldığında değil de bir butona basıldığında görünmesini sağlayalım. Bunun için dialog nesnesinin ‘autoOpen’ yani otomatik açılma özelliğini ‘false’ olarak ayarlıyoruz (varsayılan değeri ‘true’dur).

Daha sonra HTML dosyamıza bir buton ekliyoruz. JavaScript dosyamızda da bu butona tıklanma yani ‘click’ olayını atıyoruz.‘Click’ olayını gerçekleştiren fonksiyonun içerisine dialog nesnesinin açılmasını sağlayan metodu yazıyoruz. Bunun için kullanacağımız metod ‘open’ metodu şu şekilde kullanılır;

Son olarak göze hitap etmesi için ‘hide’, ‘show’ ve ‘modal’ özelliklerini kullanıyoruz. ‘hide’ ve ‘show’ özelliklerine iki değer yazacağız. 1. değer ‘effect’ yani açılırken/kapanırken oluşacak animasyon, 2. değer ise animasyonun süresini ayarlamak için kullanacağımız ‘duration’ özelliği. ‘Modal’ ise sayfadaki diğer ögelerin devre dışı bırakılmasını sağlamaktadır.

Kodları toparlayacak olursak JavaScript kodlarımız şu şekilde oluyor;

Daha çok Dialog özelliğine şu linkten ulaşabilirsiniz;
http://api.jqueryui.com/dialog/

Hakkında Sinem Çimen

İlginizi Çekebilir

JQuery Vize Final Notu Ortalaması Hesaplama

Bu örneğimizde JQuery ile Vize ve Final Notu Girilen bir öğrenciye ait Ortalama hesaplayarak ve …

Yorum Yap

Wordpress Tema indir