Erhan Yakut Software Developer @Binalyze | Founder @Passwall | Golang Enthusiast | Open Sorcerer

jConfirmAction | jQuery Onay Kutusu

2 min read

jConfirmAction | jQuery Onay KutusuProjelerimizde 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.
[html]<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>[/html]
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.
[html]<script type="text/javascript">
$(document).ready(function() {
$(‘.sil’).jConfirmAction({question : "Silmek istiyor musunuz?", yesAnswer : "Evet", cancelAnswer : "Hayır"});
});
</script>[/html]
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;
[html]<a href="delete.html" class="sil">Sil Beni</a>[/html]

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.
[html]<script type="text/javascript">
$(document).ready(function() {
$(‘.sil’).jConfirmAction({question : "Silmek istiyor musunuz?", yesAnswer : "Evet", cancelAnswer : "Hayır"});
});
</script>[/html]

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ı]

Erhan Yakut Software Developer @Binalyze | Founder @Passwall | Golang Enthusiast | Open Sorcerer