jQuery ile Açılır Pencere

Vatanay Özbeyli jQuery

jQuery ile Açılır Pencere

Sitenizde yapmak istediğiniz duyurular mı var? Ziyaretçilerinize küçük bir ipucu vermek mi istiyorsunuz? Canlı sohbet ve iletişim için uygun açılır pencere yapamıyor musunuz? Bu makalemiz sizler için geliyor!

tabSlideOut sayesinde web sayfamıza açılabilen pencereler ekliyoruz. jQuery‘nin bu yeni yardımcısı penceremize mükemmel özellikler katmamızı sağlıyor. Lafı uzatmaya gerek yok, sizler için hazırladığım örneği görüntüleyerek işe başlayabilirsiniz.

ÖRNEĞİ GÖRÜNTÜLE

Nasıl hazırlanır?

Hazırlayacağımız pencere jQuery ve tabSlideOut dosyalarına ihtiyaç duymaktadır. Dolayısıyla sayfanızın <head></head> tagları arasına aşağıdaki kod satırlarını eklemeniz gerekmekte.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script><script type="text/javascript" src="https://www.adobewordpress.com/tasarim/include/jquery.tabslideout.v1.3.js"></script>

Ayrıca kendinize pencereyi açması için bir görsel seçmelisiniz. Biz aşağıdaki WordPress anahtarını kullandım.

Örnek Resim

Şimdi tasarımımıza şekil verelim. Tabii ki bu işlemi CSS Kodları ile yapacağız.

.duyuru-penceresi {
padding: 20px;
width: 350px;
height:100px;
background: #ccc;
border-radius:0 15px 15px 0;
background: #282537;
background-image: -webkit-radial-gradient(top, circle cover, #f1dbbc 0%, #6b5437 100%);
background-image: -moz-radial-gradient(top, circle cover, #f1dbbc 0%, #6b5437 100%);
background-image: -o-radial-gradient(top, circle cover, #f1dbbc 0%, #6b5437 100%);
background-image: radial-gradient(top, circle cover, #f1dbbc 0%, #6b5437 100%);
color:white;
text-shadow:1px 1px #41311c;
}

Penceremizi ekleyerek devam edelim. Aşağıdaki HTML Kodlarını <body><body> tagları içerisine yerleştiriyoruz.

</pre>
<div class="duyuru-penceresi"><a class="js-yoksa" href="https://www.adobewordpress.com">Neden AdobeWordPress.com?</a>
<h3>Neden AdobeWordPress.com?</h3>
Sizlere tamamıyla Türkçe ve özgün bir içerik sunuyoruz.

Photoshop derslerimiz ile tasarıma bir adım önde başlıyoruz.

WordPress'in temeline inerek sayfamızı geliştiriyoruz.

SEO, CSS3 ve HTML5 dersleriyle günceli yakalıyoruz!</div>
<pre>

Sırada ise Javascript Kodlarını eklemek var. Bu kodları daiçine eklemekte fayda var.

$(function(){
$('.duyuru-penceresi').tabSlideOut({
tabHandle: '.js-yoksa',
pathToTabImage: 'https://www.adobewordpress.com/wp-content/uploads/2013/06/wordpress-secure.gif',
imageHeight: '191px',
imageWidth: '100px',
tabLocation: 'left',
speed: 300,
action: 'click',
topPos: '200px',
leftPos: '50px',
fixedPosition: false});
});

Üstteki önemli alanları tanıyalım.

  • Satır 3 : JavaScript çalıştırmayan kullanıcılar için varsayılan div classını tanıtıyoruz.
  • Satır 4 : Pencereyi açan resmi belirtiyoruz.
  • Satır 5 : Resmin uzunluğunu belirtiyoruz.
  • Satır 6 : Resmin genişliğini belirtiyoruz.
  • Satır 7 : Pencereninin bulunmasını istediğimiz alanı seçiyoruz (Left-Right)
  • Satır 8 : Animasyon hızını belirliyoruz.
  • Satır 9 : Tetikleyici hazırlıyoruz. (click-hover)
  • Satır 10 : Pencerenin sitenin üstüne uzaklığını belirtiyoruz.
  • Satır 11 : Pencerenin sitenin soluna olan uzaklığını belirtiyoruz.
  • Satır 12 : Pencerenin poziyonunu belirtiyoruz. (false-true)
Bu da ilginizi çekebilir  CSS ve jQuery Yardımıyla Resimlere Caption

Kapanış

Evet, her şey hazır. jQuery ile açılır pencerenizi hazırlarken ufak tefek sorunlarla karşılaşmanız çok şaşırtıcı olmayacaktır. Çünkü parçalı JS kodları ve tasarımın yerleşimi ilk bakışta karışık gelebilir. Sorularınızı çekinmeden yorum bölümünden bizlere yöneltebilirsiniz.