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.
Dialogu modal olarak kullanmanın dışında sweetAlert gibi hazır modal eklentileri ile de daha ilgili çekici jquery modal nesneleri oluşturabilirsiniz.
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.)
1.Adım: Temel HTML yazımı ve kütüphanelerin yüklenmesi
|
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 26 27 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Dialog Örneği</title> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> </head> <body> <!-- html kodlarını buraya yazacağız --> <!-- sayfanın daha hızlı yüklenmesi için script dosyasını sayfanın altına koyun --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <script> /*script kodlarını buyara yazacağız*/ </script> </body> </html> |
2.Adım: Tıklama işlemi için bir tane buton nesnesini eklenmesi
|
1 2 3 |
<button id="tikla"> Uyarı için tıklayın</button> |
3.Adım: Butona tıklama işlemini yapan Jquery kodu ve window.alert() ile uyarı verdirme
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> $(function(){ $("#tikla").click(function(){ window.alert("eski uyarı"); }); }); </script> |
4.Adım: Dialog nesnesinin oluşturulması (HTML)
|
1 2 3 4 5 6 7 |
<div id="uyari" title="Dialog Başlığı"> <p> Bu bölüm açıklama kısmını içermektedir. Açıklamalarınızı buraya yazabilirsiniz. </p> </div> |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script> $(function(){ /*sayfa yüklendiğinde dialog çalıştırılması ve otomatik açılmasının engellenmesi*/ $("#uyari").dialog({ autoOpen: false }); /*butona tıklayınca uyarı verilmesi*/ $("#tikla").click(function(){ $("#uyari").dialog("open"); }); }); </script> |
6.Adım: Kodların toparlanmış hali
|
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 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Dialog Örneği</title> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> </head> <body> <button id="tikla"> Uyarı için tıklayın</button> <div id="uyari" title="Dialog Başlığı"> <p> Bu bölüm açıklama kısmını içermektedir. Açıklamalarınızı buraya yazabilirsiniz. </p> </div> <!-- sayfanın daha hızlı yüklenmesi için script dosyasını sayfanın altına koyun --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <script> $(function(){ /*sayfa yüklendiğinde dialog çalıştırılması ve otomatik açılmasının engellenmesi*/ $("#uyari").dialog({ autoOpen: false }); /*butona tıklayınca uyarı verilmesi*/ $("#tikla").click(function(){ $("#uyari").dialog("open"); }); }); </script> </body> </html> |
Jquery Dialog Ek Düzenlemeler:
Model olarak çalıştırma
|
1 2 3 4 5 6 7 |
/*sayfa yüklendiğinde dialog çalıştırılması ve otomatik açılmasının engellenmesi*/ $("#uyari").dialog({ autoOpen: false, modal:true }); |
Dialog Nesnesinin Sürüklenmesi
Sürükleme aktif olması için draggable: true, pasif olması için draggable: false
|
1 2 3 4 5 6 7 8 |
/*sayfa yüklendiğinde dialog çalıştırılması ve otomatik açılmasının engellenmesi*/ $("#uyari").dialog({ autoOpen: false, modal:true, draggable: false }); |
Gösterme Efekti – Gösterme Animasyonu
show: { effect: “blind”, duration: 500 } şeklinde kullanılır
effect: alabileceği animasyon türleri. fadeIn, blind, 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.
|
1 2 3 4 5 6 7 8 9 |
/*sayfa yüklendiğinde dialog çalıştırılması ve otomatik açılmasının engellenmesi*/ $("#uyari").dialog({ autoOpen: false, modal:true, draggable: false, show: { effect: "fadeIn", duration: 500 } }); |
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.
|
1 2 3 4 5 6 7 8 9 10 |
/*sayfa yüklendiğinde dialog çalıştırılması ve otomatik açılmasının engellenmesi*/ $("#uyari").dialog({ autoOpen: false, modal:true, draggable: false, show: { effect: "scale", duration: 500 }, hide: { effect: "scale", duration: 1000 } }); |
Son Olarak
Daha fazla özellik için jquery ui dialog sayfasını ziyaret edebilirsiniz.
[…] 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. […]
[…] Jquery UI Dialog Kullanımı […]