Pazartesi , 23 Ocak 2017
Anasayfa » JavaScript » Jquery » Jquery Dialog Kullanımı

Jquery Dialog Kullanımı

JavaScript ile uyarı vermek (popup pencere açmak)  için window.alert() metodu kullanılırdı. Gelişen teknoloji ile artık alert() yerini daha modern tasarım ve tekniklere bırakmıştır. Bunlardan bir tanesi olan Jquery UI Dioalog nesnesinin kullanacağız. Modern popup penceresi olarak Jquery Dialog Nesnesini , window.alert()’in alternatifi olarak düşünebilirsiniz. 

Jquery Dialog Nesnesini kullanmadan önce 3 tane kütüphanenin ve gerekli olan resim dosyalarının dahil edilmesi gerekir. (CDN kullanıyorsanız resim dosyaları internetten alınacaktır.)

uyarı tıkla

DEMO

1.Adım:  Temel HTML yazımı ve kütüphanelerin yüklenmesi

 

2.Adım: Tıklama işlemi için bir tane buton nesnesini eklenmesi

 

3.Adım: Butona tıklama işlemini yapan Jquery kodu ve window.alert() ile uyarı verdirme

 

4.Adım: Dialog nesnesinin oluşturulması (HTML)

 

 

5.Adım: Sayfa yüklendiğinde dialog için oluşturulan (yukarıda uyari adı verildi) nesnenin çalıştırılması ve butona tıklayınca dialog nesnesinin uyarı olarak ekrana gelmesi

 

 

6.Adım: Kodların toparlanmış hali

 

Jquery Dialog Ek Düzenlemeler:

Model olarak çalıştırma

 

Dialog Nesnesinin Sürüklenmesi

Sürükleme aktif olması için draggable: true, pasif olması için draggable: false

 

Gösterme Efekti – Gösterme Animasyonu

show: { effect: “blind”, duration: 500 } şeklinde kullanılır

effect: alabileceği animasyon türleri. fadeInblind, fold, puff, pulsate, scale, shake animasyonlarını alır. Jquery effect kütüphanesi yüklenirse daha fazla animasyon kullanılabilir.

duration: animasyonun yapılacağı toplam süre.

 

Gizleme Efekti – Gizleme Animasyonu

hide: { effect: “explode”, duration: 1000 } şeklinde kullanılır.

effect: alabileceği animasyon türleri. fadeOut, explode,slideUp, puff, fold, pulsate, scale, shake animasyonlarını alır. Jquery effect kütüphanesi yüklenirse daha fazla animasyon kullanılabilir.

duration: animasyonun yapılacağı toplam süre.

 

Son Olarak

Daha fazla özellik için jquery ui dialog sayfasını ziyaret edebilirsiniz.

 

 

Hakkında Hayri

İlginizi Çekebilir

jquery ile oluşturulan nesneye tıklama

Jquery ile Oluşturulan Nesneye Olay Atama

Jquery ile sonradan oluşturulan yada ajax ile çekilen nesnelere tıklamak için yazılan jquery kodlarını makalenin …

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Wordpress Tema indir