"Çalışmadan, öğrenmeden, yorulmadan rahat yaşamanın yollarını aramayı alışkanlık haline getirmiş milletler, evvela haysiyetlerini, sonra hürriyetlerini ve daha sonra da istikballerini kaybetmeye mahkumdurlar."

Mustafa Kemal ATATÜRK

yakuter


08 Temmuz 2006

Sitemize Pencere Yapalım

Kategori Ajax, Web |

Sitemin en üstündeki "Pencere" yazısını farketmişsinizdir. Ona tıkaldığınız zaman yukarıdan aşağıya doğru yeni bir pencere açılıyor. Önceleri çok kompleks bir şey gibi gelirdi bu gözüme. Uğraşmak gerek derdim bunun için. Meğer o kadar basitmiş ki bittiğinde bumuymuş yani dedim. Nahnu'da ve Teknoseyir'de de kullanılmış bu açılır pencereler. Basitçe anlatmaya çalışayım.

Prototype ve mo.fx ayarı

Öncelikle hazırlayacağımız pencerenin bir Ajax ürünü olduğunu söylemeliyim. Bu sebeple bize iki dosya lazım, Prototype ve moo.fx Bunların son versiyonlarını sitelerinden indirerek işleme başlıyoruz. Sitemizde temamızın klasörünün içine js adında bir klasör oluşturuyoruz ve bu iki dosyayı oluşturduğumuz js klasörüne gönderiyoruz.
(örn. siteniz/wp-content/themes/temanız/js/)

Daha sonra temamızın header.php dosyasını açıyoruz < head >.. arasına şu kodları ekliyoruz.

Duz Metin
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/prototype.js"> </script>
<script type="text/javascript" xsrc="<?php bloginfo('template_directory'); ?>/js/moo.fx.js"></script>
<script type="text/javascript">
Event.observe(window, 'load', initShelf, false);
function initShelf()
{
shelffx = new fx.Height("pencere", {duration: 300});
shelffx.hide();
}
</script> 

Stil dosyası ayarı

Bu açılan penceremizin nasıl görüneceğini stil dosyamıza(style.css) ekleyeceğimiz kod ile belirlyoruz. Ben şunu kullandım. Siz kendinize göre değiştirebilirsiniz. Fakat sakın #pencere yazan kısmını ellemeyin yoksa çalışmaz.

Duz Metin
#pencere {
width: 900px;
height: 300px;
text-align: left;
margin-left: 40px;
margin-top:-8px;
} 

Diğer ayarlar

Yine header.php dosyamızı açıyoruz. Bu sefer taginin hemen altına şunu yazıyoruz.

Duz Metin
<div id="pencere">
Pencerenin içeriğini buraya yazıyoruz</div>
<a xhref="http://www.yakuter.com/#" onclick="shelffx.toggle();return false;">Pencere(buraya resim de koyabiliriz)</a>

Hepsi bu kadaaaarr... Umarım başarıyla tamamlarsınız işlemleri. Kolay gelsin hepimize...


Benzer Yazılar

“Sitemize Pencere Yapalım” için 2 Yorum

  • 1 serdar
    12 Haziran 2007, 14:49

    hocam kodları doyalarda nereye gireceğiz kafa basmadı prd. birde örnek sitelerde gösterim yok güncellermisin rica etsem örnek siteleri. tam olarak görmek istiyorumda.

  • 2 yakuter
    16 Haziran 2007, 15:40

    Merhaba Serdar, bu yöntem aslında o kdar da kullanışlı değil. Bunun çok daha pratikleri çıktı. Bir ara onlardan bahsedeceğim Şimdi bu örnek için kasmayalım ;)


Yorum Yapın

yakuter.com © 2006-2008 Erhan Yakut. Tasarım Fallendesign.
Site içerisindeki içerikler izinsiz veya kaynak gösterilmeksizin kopyalanamaz, alıntı yapılamaz.

Wordpress Valid XHTML 1.0 Valid CSS