javascript alert fancy

Dikkat: Bu yazının yazılma tarihinin üzerinden en az 60 gün geçmiş. İçerisindeki bilgiler güncelliğini yitirmiş olabilir. Yorumları ve güncellemeleri göz önünde bulundurarak yazıyı takip ediniz.
Javascript alert'in tarayıcılara göre farklı pencere şekillerinde çizdirildiğini biliyorsunuz. Sadece farklı pencere şekilleri değil aynı zamanda içinde sistem fontu kullanılması, pencere başlığına veya onay tuşunda yazan yazıya müdahale edilememesi veya sayfanın çalışmasını durdurması gibi engelleri olduğunu zaten biliyorsunuz.

Şimdi gelelim çok basit bir kullanımıyla
alert('Mesajınız başarıyla iletildi. En kısa sürede cevaplamaya çalışacağım.');
şeklinde ürettiğiniz onay/hata/mesaj kutusunu



çok benzer kullanımla
alertf('<h3>Mesajiniz başarıyla iletildi.</h3> En kısa sürede cevaplamaya çalışacağım.\
<br /><br /> Bu sırada <a href="/blog">blogumu</a> inceleyebilirsiniz.');
şeklinde kullanabileceğiniz daha zengin içeriğe sahip bir kutuya



çevirmeye.

Gereksinimler

Projenizde jQuery kullandığınızı varsayıyorum. jQuery ile kullanabileceğiniz hatta belki halihazırda kullanmakta olduğunuz lightbox kütüphanesi olan fancybox'u kullanarak basit bir javascript alert fonksiyonu hazırlayacağız. fancybox yerine kendi lightbox kütüphanenizi veya jquery dışında kullandığınız framework'ü de kullanabilirsiniz. Aşağıda kodu doğrudan vererek açıklayacağım.
function alertf(html){
	if (arguments[1]) closehref = arguments[1];
	else closehref = 'javascript:$.fancybox.close();';

	contentHTML  = '<div style="text-align:center; font-size: 18px; min-width: 200px; margin: 20px 40px;">'+ html +'</div>';
	contentHTML += '<div style="text-align:center;"><a href="' + closehref + '" class="button">Tamam</a></div>';

	$.fancybox({
		content: contentHTML
	});
}
Hem alert fonksiyonuna yakın olması hem de "alert fancy" yani süslü/havalı mesaj kutusu anlamına geldiği için de "alerf" adında bir fonksiyon yazarak, zorunlu tek parametre tanımlayacağız. Zorunlu olan tek ve ilk parametre mesajınızın içeriği olacaktır. Bu parametre HTML de olabilir düz metin de olabilir.

Her lightbox kütüphanesinin, bir şekilde sadece javascript çağrısı yapılarak bir kullanımı vardır. fancybox'un bu şekildeki kullanımı için, basitçe $.fancybox fonksiyonu çağrılıp içeriği "content" parametresiyle belirtiyoruz.
$.fancybox({
	content:"Merhaba dostlar"
});
alertf fonksiyonunda aslında basitçe içinde mesaj ve buton olan bir lightbox kutusu çizdiriyoruz. "button" sınıfıyla da link olarak tanımlanan elementi buton görüntüsüne çeviriyoruz. Bunun için herhangi bir css buton stili yeterli olacaktır. Mesaji çevreleyen div'i, stillerini, butonu temsil eden linki ve onu çevreleyen div'i ve stillerini javascript fonksiyonumuzda string olarak kodluyoruz. Sonrasında zaten fancybox ile ekrana çizdirmek kalıyor.

Fonksiyonun ilk satırlarında dikkatinizi çekeceği üzere, basit bir kontrolle, bu fonksiyon cağırıldığında ikinci bir parametre belirlenip belirlenmediğini kontrol ediyoruz. Bunun nedeni ise, tek buton olan "Tamam" butonuna basıldığında yapılacak aksiyonu değişitebilme kabiliyeti eklemek. Bir çok noktada ihtiyacınız olabilecek olan bu özellik, bir mesaj kutusu çizdirdiğinizde butona basıldığında başka bir sayfaya yönlendirme veya kutuyu kapatmak yerine başka bir javascript cağrısı yapmak gibi şeyler yapmanızı sağlayacak. Bunu da alertf fonksiyonunun ikinci parametresini kullanarak yapabileceksiniz.

Örneğin
alertf('<h3>Mesajiniz başarıyla iletildi.</h3>', 'tesekkurler.html');
kullanımı, "Tamam" butonuna basıldığında kullanıcıyı tesekkurler.html sayfasına yönlendirecektir.

Bu methodla normal alert fonksiyonu yerine alertf fonksiyonunu kullanarak çok daha zengin bir mesaj kutusu çizdirebilirsiniz. Bu noktadan sonra projenizdeki tüm alert çağrılarınızda fonksiyon adına f eklemeniz, javascript kutularını havalı hale getirmeye yeterli olacaktır.

Yorumlar

19 Eylül Çarşamba ´12 22:58
Güzel bir anlatım olmuş, alert(); i normal kullandığımızda bence de site uyumu bozuluyor, jquery bu konuda güzel.

Bir ara mootols kullanıyordun jquery geçtiğinden beri hiç mootols yada diğer kütüphanelerden örnek vermiyorsun.

bir de Jquery i kararlı sürüm kullanmak lazım bu tarz basit fonksiyonlarda pek olmaz da bazı fonksiyonlarda çakışma oluyor her sürüm yenilendikçe.

http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

gibi kullanım da 1.7 de sorunsuz çalışan 1.9 da çalışmıyor, kararlı dememin sebebide bu yani. Her seferinde jquery ye göre düzenlemek olmuyor, FBConnect gibi sürekli değiştiyorlar onlarda mecbur içeriği değiştirmek zorunda kalıyorsunda Jquery de en azından kararlı yapıyı seçiyorsun.
Üye Resmi Ecem Ulusoy
9 Kasım Cuma ´12 18:03
Çok güzel bir anlatım olmuş ellerinize; beyninize sağlık.
Üye Resmi Ömer Batuhan
13 Şubat Cumartesi ´16 13:23
<script>
document.write("yazılcak yazı sayı");
</script>

diye kullanıyoruz şuan toplma çıkarma gibi farklı işlemler bu kodu bir yere tıkladığımızda çalışmasını nasıl ayarlıyabiliriz ?
Üye Resmi cevizli
28 Nisan Perşembe ´16 02:48
ne lan bu
Üye Resmi Hidayet
27 Nisan Perşembe ´17 06:49
$text1=" Merhaba";
$text2=" Nasıldın";
<script <type="text/javascript">
alert(" '.$text1.' \n'.$text2.' " )
</script>';

Selamlar
'.$text1.'  font unu nsıl <h3></h3> ayarlayabilirz.
Yeni Yorum *
İletişim Bilgileri
*
*
E-Posta adresiniz gösterilmeyecektir.
(unut)
Güvenlik Kodu *

Gönderiliyor