Wordpress

Wordpress Yakuter

Tatilde sona mı yaklışıyoruz ne :( Twitter

546 takipçi

jConfirmAction | jQuery Onay Kutusu

KategoriJavascript

16 Mayıs 2010

847 Okunma

jConfirmAction | jQuery Onay Kutusu Projelerimizde dinamik bir sistemimiz varsa veritabanı ile işlemler yapıyorsak bazen öğelerin silinmesini kullanıcı kontrolüne bırakırız. Tabi bu durumda karşımıza bir sakınca doğuyor. Ya kullanıcı yanlışlıkla silme bağlantısına/düğmesine tıklarsa? İşte bunu önlemek için silme düğmelerine kullanıcıyı uyarmak için bir onay kutusu ekleriz. Daha önce bunun sade javascript kullanarak basit bir şekilde nasıl yapılacağını anlatmıştım. Fakat gördüm ki jConfirmAction isimli jQuery eklentisi kullanarak çok daha basit, etkili ve görsel açıdan zengin bir şekilde bu işlem yapılabiliyormuş.

Örnek ve İndirme

Eklentinin nasıl çalıştığını görmek için buraya bakabilirsiniz. Bu örneği indirmek için de şuraya tıklayınız.

Eklentinin Siteye Eklenmesi

Yukarıdaki örneği indirirseniz aslında çok rahat bir şekilde görebilirsiniz ama ben yine de anlatmak istiyoum. jConfirmAction‘ı kullanabilmek için öncelikle CSS dosyasının, jQuery javascript sınıfının ve ardından eklentinin dosyasının (jconfirmaction.jquery.js) sitemize, <head> </head> etiketleri arasına eklenmesi gerekir.

<link rel="stylesheet" type="text/css" media="screen, projection" href="demo.css" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jconfirmaction.jquery.js"></script>

Ardından bu onay kutusunun çalışmasını sağlayacak olan javascript kodunu yukarıdaki satırların hemen altına yazıyoruz. Ben sil seçicisi atanmış olan (class=”sil”) bağlantılarda bu eklentini çalışmasını istediğim için aşağıdaki kodu ona göre yazdım.

<script type="text/javascript">
	$(document).ready(function() {
		$('.sil').jConfirmAction({question : "Silmek istiyor musunuz?", yesAnswer : "Evet", cancelAnswer : "Hayır"});
	});
</script>

Tabi burada şunu da unutmadan söyleyeyim. Bu onay kutusunun iki adet görseli var. Bu görselleri sitenizdeki resimler (veya images vb.) kutusuna yüklemeniz ve ardından CSS dosyasında bu görsellerin yerini doğru olarak girmeniz gerekiyor. Yukarıdaki örneğin içinde zaten bulacaksınız bu görselleri.

Eklentinin Çağırılması

İşte olayın en güzel noktası burası. Eklentiyi çağırmak yani silme onayını göstermek için tek yapmanız gereken normal bir bağlantıya class=”sil” kodunu eklemek. Örnek;

<a href="delete.html" class="sil">Sil Beni</a>

Ayarlar

Öncelikle eklentideki soruyu ve cevapları değiştirebiliyorsunuz. Yani Evet, Hayır yerine, Doğrudur ve Asla yazabilirsiniz. Tek yapmanız gereken sitenin üst kısmına eklediğiniz şu kodu düzenlemek.

<script type="text/javascript">
	$(document).ready(function() {
		$('.sil').jConfirmAction({question : "Silmek istiyor musunuz?", yesAnswer : "Evet", cancelAnswer : "Hayır"});
	});
</script>

Bununla birlikte onay kutusunu dilediğiniz gibi şekillendirebilirsiniz. Bunun için CSS dosyasındaki seçicileri düzenleyebilir ve hatta görselleri değiştirebilirsiniz.

Sonuç

jConfirmAction gerçekten çok basit bir uygulama ama yerine getirdiği hizmet gerçekten çok önemli. Bu nedenle projelerimde bizzat kullanmaya karar verdiğim bu güzel eklentiyi hepinize tavsiye ederim.

[Test Et] [İndir] [Eklenti Sayfası]

Benzer Yazılar

Erhan Yakut

www.yakuter.com

Genç yaşlarda programlama ile tanıştı ve Delphi ile başladığı programlama macerasına şuanda PHP, SQL, Javascript, AJAX, CSS, XHTML teknolojileri ile devam etmektedir. Elektrik - Elektronik bölümü mezunu olan "yakuter" 2006 yılından itibaren yakuter.com'un yazarlığını yapmaya başlamıştır.

Sponsor Olmak İstiyorum!

Bu Yazıya Ait Yorumlar

yedincisenol
17 Mayıs 2010

Güzel eklentiymiş. Silme işlemini ajax ile yapacaksak eklentiye nasıl uyarlayabiliriz?

Recep Yüksel
17 Mayıs 2010

http://labs.abeautifulsite.net/projects/js/jquery/alerts/demo/

yakuter
17 Mayıs 2010

Recep, çok teşekkür ederim bu paylaşımın için. Gerçekten daha kapsamlı ve güzel bir uygulama ;)

Recep Yüksel
17 Mayıs 2010

Hiç önemli değil her zaman :)

yakuter
17 Mayıs 2010

Şenol, bu eklentinin yapmış olduğu olay bir bağlantıyı (linki) aktif hale veya pasif hale getirmesi. AJAX işlemleri sonuçta bağlantı aktifken yani Silmek istiyor musunuz sorusuna Evet cevabı verilmişken çalışır. Kısacası eklenti olduğu gibi kullanılır. Fakat şunu da söylemeliyim ki denemedim ama mantık olarak doğrudan çalışması lazım.

yedincisenol
18 Mayıs 2010

Çok işime yarayabilir,Teşekkürler.

Recep Yüksel
18 Mayıs 2010

Bu kod bir js confirm sunuyor ama confirm in yanıtına göre cevap yapma olanağını js ile tanımıyor.Demek istediğim confirm true dönerse şunu yap diyemiyorsun koda bu yüzden ajax kullanılamaz diye düşünüyorum.Yukarıda ki yorumumda verdiğim adresi kullanırsan içerisine kolayca ajax ekleyebilirsin.yapamazsanız yardımcı olabilirim