eray aydoğdu

jQuery and ASP.NET MVC fanatic.

Gözüküp Saklanabilir Pop-up

İşlerin yoğunluğundan ikinci plana attığım blog yazılarına nihayet uzun bi aradan sonra dönüş yapıyorum. Bundan sonra işlerim ne kadar yoğun olursa olsun blog yazılarına zaman ayırmaya çalışacağım. Hızlı ve kısa blog yazıları yolda demek oluyor bu…

Yakın zamanda bir projede ihtiyacım olan bir jquery plug-ini göstereceğim. Adı Meerkat sitede tanıtılandan çok enteresanfarklı bir yerde kullandım ancak ihtiyacınıza çok farklı durumdalarda işe yarayabilir.

Sitesinde de inceleyebileceğiniz gibi ekranın 4 tarafında bir çeşit pop-up açabiliyor, en önemlisi bunu yanlızca tek sefer gösterebiliyorsunuz (Browser session ı sonlanana kadar).

Kullanımına şu şekilde göz atalım:

Öncelikle jquery kütüphanesini ve tabi merkaat ı çağırıyoruz.

<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.meerkat.js" type="text/javascript"></script>

Merkaat ın çalışması için gerekli HTML kodlarımızı da aşağıdaki gibi ayarlıyoruz. Gerekli olan html elemanları body etiketinin kapanmasından hemen öncesine classı merkaat olan bir div yerleştiriyoruz.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Meerkat: A jQuery Plugin (Basic Demo)</title>
  <script src="jquery.min.js" type="text/javascript"></script>
  <script src="jquery.meerkat.js" type="text/javascript"></script>
  <script type="text/javascript">
     $(document).ready(function(){
        //Meerkat
     });
  </script>
</head>
<body>
  <div id="wrapper">
      Web sayfa içeriği burada
  </div>
  <div>
      Meerkat içeriği burada
  </div>
</body>
</html>

Şimdi merkaat kodlarını document ready ye ekleyelim.

$('.meerkat').meerkat({
     background: 'url(images/meerkat-bot-bg.png) repeat-x left top',
     height: '120px',
     width: '100%',
     position: 'bottom',
     close: '.close-meerkat',
     dontShowAgain: '.dont-show',
     animationIn: 'slide',
     animationSpeed: 500
});

Dökümantasyon dosyası ingilizce ancak bilmesenizde belli başlı ayarlar için yardımcı olacaktır. Onun dışında takıldığınız veya sormak istedikleriniz için yorum yazarsanız yardımcı olmaya çalışırım.

No Responses to “Gözüküp Saklanabilir Pop-up”

Bu yazıya yapılan yorumlar için RSS beslemeleri. TrackBack URL

Leave a Response