Bu yazıyı okumadan önce bir önceki yazımda (
Kişiselleştirilebilir LightBox üretimi) bahsettiğim konuya göz atmanızı öneririm. Çünkü genel şablonumuzu ona göre oluşturacağız.
Şimdi bu pencerelerin içinde nasıl Ajax çağrısı yapabileceğimizi incelemeye başlayalım. Bir önceki örnekten yola çıkarsak penceremizin genislik,uzunluk,baslik ve icerik adlarında 4 parametre aldığını hatırlıyoruz. icerik isimli parametreyi, çağıracağımız sayfanın adı olarak değiştirip ufak bir modifikasyonla ajax çağrısı yapalım.
Bu sefer bize 1 adet yükleniyor imajı ve ajax ile çağırılacak bir sayfa gerekecek (Bu server side bir dosya olabilir). Bunun için aşağıdaki imajı ve kodları kullanabilirsiniz.
Yükleniyor imajımız :
Ajax ile çağıracağımız sayfa :
<html>
<head>
<title></title>
</head>
<body>
bu sayfa ajax isteği sonucunda gönderilmiştir.
</body>
</html>
Eski
pencereGoster() javascript fonksiyonumuzu şu şekilde değiştirelim :
var pencereAcikmi = false;
function pencereGoster(genislik,uzunluk,baslik,sayfa) {
var apSec = $("#pencere");
if(pencereAcikmi == false) {
$("#karart").css("display","block");
var winH = $(window).height();
var winW = $(window).width();
$("#pencerebasliksol").html(baslik);
$("#pencereicerik").html("<div style='text-align: center;'><br /><br /><img src='ajaxLoading.gif' width='220' height='19'></div>");
$.ajax({
type: "GET",
url: sayfa,
cache: false,
success: function(msg){
$("#pencereicerik").html( msg );
}
});
apSec.css("width",genislik);
apSec.css("height",uzunluk);
apSec.css('top', winH/2-apSec.height()/2);
apSec.css('left', winW/2-apSec.width()/2);
pencereAcikmi = true;
}
else {
pencereAcikmi = false;
}
apSec.css("display","block");
}
pencereGoster() fonksiyonumuz yine 4 parametre alıyor. Fakat bu sefer son parametremiz değişik. Bunlar
genislik, uzunluk, baslik ve
sayfa. Tek değişen
sayfa parametremiz. Bu da çağıracağımız sayfayı temsil ediyor.
Herşey bittiğinde pencere açma fonksiyonumuzu artık şu şekilde çağırıyoruz.
<a href="javascript:pencereGoster(350,100,'Penceremizin başlığı','ajaxSayfa.html');">Pencere aç</a>
Bunları uygulamak için yazının başında söylediğim gibi
şu sayfadaki genel şablona ihtiyacınız olacak.
Bittiğinde şöyle gözükecek.
Daha önce de söylediğim gibi siz kendi tasarımınıza göre özelleştirip daha güzel bir görüntüye dönüştürebilirsiniz fakat bu haliyle de güzel görünüyor.
Penceremizin çalışan halini buradan indirebilirsiniz.LightBox pencereleri çoğumuzun hazır olarak alıp kullandığı klasik popup veya uyarı pencerelerinin sıkıcılığı ve tasarımını özelleştirememe problemlerini çözen client side uygulamalardır. Basit bir tanımla anlatmaya çalıştığım lightbox pencereleri hazır olarak geldiğinden birçoğu kişiselleştirmeye pek uygun yapıda değillerdir. İşte böyle bir durumda kendi pencelerimizi üretmek isteyebiliriz. Bu ihtiyaçtan yola çıkarak kendi lightbox pencerelerimizi nasıl üretebiliriz sorusuna çözüm arayacağız. Kendi geliştirdiğim lightbox penceresi çok sade ve kişiselleştirilebilirliğe olanak sağlıyor.
jQuery i indirip projemize dahil ettikten sonra, hemen işe koyulalım ve yazmaya başlayalım:
Önce penceremizin şemasını html olarak çıkartalım :
<head></head> taglarinin arasına jQuery i ekleyelim.
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<body></body> taglarının içine :
<div id="karart"></div>
<div id="pencere">
<div id="pencerebaslik">
<div id="pencerebasliksol"></div>
<div id="pencerebasliksag"><a href="javascript:pencereKapat();">[kapat]</a></div>
</div>
<div id="pencereicerik"></div>
</div>
karart isimli div penceremizin modal olarak açılmasını sağlayacak kararan arkaplan,
pencere isimli div ise penceremizi kapsayacak genel taşıyıcımız. Bizi ilgilendiren ve dışarıdan parametre alacak
pencerebasliksol ve
pencereicerik isimli divler.
pencerebasliksol isimli div e title ımızı,
pencereicerik isimli div e iceriğimizi yazdıracağız. Css imizi yazarak lightboxımızı oluşturmaya devam ediyoruz.
#karart {
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #000;
opacity: .75;
filter: alpha(opacity=75);
-moz-opacity: 0.75;
z-index: 1; }
#pencere {
font-family: Arial;
font-size: 12px;
position: absolute;
border: 2px solid #ccc;
display: none;
background: #fff;
z-index: 2; }
#pencerebaslik {
background: #e3e3e3;
padding: 5px;
border-bottom: 1px solid #ccc;
height: 18px; }
#pencerebasliksol {
float: left;
font-weight: bold; }
#pencerebasliksag {
float: right; }
#pencereicerik {
padding: 5px; }
#pencere a {
margin-left: 10px;
color: #333; }
Css imiz genel şablumuzun bütün elementlerini yakalayacak şekilde olacak. Siz kendi tasarımınızın renklerine göre değiştirebilirsiniz. Hemen penceremizi çağıracak ve kapatacak javascript fonksiyonlarımızı yazıp tamamlayalım. Aslında işin can alıcı kısmı aşağıdaki kodlarda.
<script type="text/javascript">
var pencereAcikmi = false;
function pencereGoster(genislik,uzunluk,baslik,icerik) {
var apSec = $("#pencere");
if(pencereAcikmi == false) {
$("#karart").css("display","block");
var winH = $(window).height();
var winW = $(window).width();
$("#penceresol").html(baslik);
apSec.css("width",genislik);
apSec.css("height",uzunluk);
apSec.css('top', winH/2-apSec.height()/2);
apSec.css('left', winW/2-apSec.width()/2);
$("#pencereicerik").html(icerik);
pencereAcikmi = true;
}
else {
pencereAcikmi = false;
}
apSec.css("display","block");
}
$(window).resize(function () {
var winH = $(window).height();
var winW = $(window).width();
if(pencereAcikmi == true) {
$("#pencere").css('top', winH/2-$("#pencere").height()/2);
$("#pencere").css('left', winW/2-$("#pencere").width()/2);
}
});
function pencereKapat() {
if(pencereAcikmi == true) {
pencereAcikmi = false;
$("#pencere").css("display","none");
}
$("#karart").css("display","none");
}
$(document).keyup(function(event){
if (event.keyCode == 27) {
if(pencereAcikmi == true) {
pencereKapat();
}
}
});
</script>
pencereGoster() fonksiyonumuz 4 parametre alıyor
genislik, uzunluk, baslik ve
icerik. Adlarından anlaşılacağı şekilde pencereyi çağırırken genislik, uzunluk, baslik ve içerik parametreleri gönderiyoruz. Pencere açma fonksiyonumuzu şu şekilde çağırabiliriz.
<a href="javascript:pencereGoster(350,100,'Penceremizin başlığı','Penceremizin içeriği buraya gelecek');">Pencere aç</a>
pencereKapat() fonksiyonu penceremizin açık olup olmadığını kontrol edip pencereyi kapatıyor.
(window).resize fonksiyonumuz browser penceresini herhangi bir şekilde küçültüp, büttüğümüzde veya boyutlarını değiştirdiğimizde penceremizi browser penceresinde ortalıyor.
(document).keyup fonksiyonumuz ise
escape tuşunu yakalayıp bu tuşa basıldığında pencereyi kapatan fonksiyonumuzu tetikliyor ve penceremizi kapatıyor. Projenin bitmiş halinde şu şekilde bir görüntü alıyoruz.
Siz kendi tasarımınıza göre özelleştirip daha güzel bir görüntüye dönüştürebilirsiniz fakat bu haliyle de gayet kullanışlı ve güzel görünüyor. Bir sonraki yazımda bu pencerelerin içinden ajax ile başka bir sayfayı nasıl çağırırız konusunu inceleyeceğim. Görüşmek üzere.
Projenin bitmiş ve çalışan halini buradan indirebilirsiniz.