jQuery UI ile Animasyonlu Dialog Penceresi

Merhaba arkadaşlar, bu dersimizde jQuery UI ile animasyonlu dialog penceresi yapacağız. Yani herhangi bir yazıya, resime yada input nesnesine tıklanınca dialog penceresi gelecek 🙂 Aslında yapı çok basit sadece framework yapılarını web sitemize entegre edip hazır yapılarla dialog penceresi yapıyoruz. Bu dialog penceresini geliştirmek ve daha görsel yapmak tamamen sizin hayalinize kalmış.

İlk önce sayfamıza jQuery ve jQuery UI framework’leri entegre ediyoruz.

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

Ardından jQuery UI’yi kullanabilmek için css dosyasını entegre etmemiz gerek.

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

Yukarıdaki css’de ” smoothness ” teması bulunmakta. Bu tema grimsi bir renkte. Eğer başak tema veya renkler kullanmak istiyorsanız buraya tıklayarak diğer temalara göz atabilirsiniz.

Şimdi sıra geldi hazır jQuery kodlarımızı yazmaya.

 <script>
  $(function() {
    $( "#dialog" ).dialog({
      autoOpen: false, /* Sayfa açıldığında otomatik açılma kapalı. true yazarsanız sayfa açılır açılmaz dialog penceresi açılır */
      show: {
        effect: "blind", /* Açılma Efekti */
        duration: 1000 /* Açılırken efektin hızı */
      },
      hide: {
        effect: "explode", /* Kapanma Efekti */
        duration: 1000 /* Kapanırken efektin hızı */
      }
    });
 
    $( "#opener" ).click(function() { /* buttona basılıp basılmadığını kontrol ediyoruz. Basılmış ise yukarıdaki dialog açma kodları devreye giriyor. Ayrıca button id'imiz #opener olduğu için burayada #opener yazıyoruz */
      $( "#dialog" ).dialog( "open" );
    });
  });
  </script>

jQuery kodlarımızı yazdığımıza göre dialon penceremizin başlığını, içeriğini yazalım.

<div id="dialog" title="Dialog Başlığı">
  <p>Bu bir dialog başlığının içindeki deneme yazısıdır. Bu dialogu kapatmak için " x " işaretine basınız. <br /> AtknUludag.Com</p>
</div>
 
<button id="opener">Dialog Aç !</button>
 

Not : Diğer dialog efektleri için jQuery’nin kendi sitenizi ziyaret edebilirsiniz. Siteye gitmek için buraya tıklayın.


Bir cevap yazın

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.