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
1 2 3 4 | <link href="eklenti/jqueryUi/jquery-ui.min.css" rel="stylesheet"> <link href="eklenti/jqueryUi/jquery-ui.theme.min.css" rel="stylesheet"> |
1 2 3 4 5 | <a href="http://js/jquery-1.11.1.min.js">http://js/jquery-1.11.1.min.js</a> <a href="http://eklenti/jqueryUi/jquery-ui.min.js">http://eklenti/jqueryUi/jquery-ui.min.js</a> <a href="http://calisma.js">http://calisma.js</a> |
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.
1 2 3 4 5 6 7 | <div id="dialog" title="Basit dialog"> Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. </div> |
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.
1 2 3 4 5 6 7 | $(document).ready(function(){ $( "#dialog" ).dialog(); }); |
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).
1 2 3 4 5 6 7 8 9 | $(document).ready(function(){ $( "#dialog" ).dialog({ autoOpen: false }); }); |
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;
1 2 3 | <input type="button" id="uyari" value="Dialog Göster"> |
1 2 3 4 5 | $("#uyari").on("click",function(){ $( "#dialog" ).dialog("open"); }); |
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.
1 2 3 4 5 6 7 8 | $( "#dialog" ).dialog({ autoOpen: false, modal:true, hide:{effect:"fadeOut", duration:800}, show:{effect:"fadeIn",duration:800} }); |
Kodları toparlayacak olursak JavaScript kodlarımız şu şekilde oluyor;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | $(document).ready(function(){ $( "#dialog" ).dialog({ autoOpen: false, modal:true, hide:{effect:"fadeOut", duration:800}, show:{effect:"fadeIn",duration:800} }); $("#uyari").on("click",function(){ $( "#dialog" ).dialog("open"); }); }); |
Daha çok Dialog özelliğine şu linkten ulaşabilirsiniz;
http://api.jqueryui.com/dialog/
