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.
[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ı]
Güzel eklentiymiş. Silme işlemini ajax ile yapacaksak eklentiye nasıl uyarlayabiliriz?
Ş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.
http://labs.abeautifulsite.net/projects/js/jquery/alerts/demo/
Recep, çok teşekkür ederim bu paylaşımın için. Gerçekten daha kapsamlı ve güzel bir uygulama ;)
Hiç önemli değil her zaman :)
Çok işime yarayabilir,Teşekkürler.
İşine yaramasına asıl ben sevindim :)
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
Çok güzel bir uygulama olmuş.Recep’in adresidekide harika.Teşekürler
Şimdi anladım AJAX kullanımı derken neyi kastettiğinizi. Recep’in veriği adresteki uygulama dilediğiniz gibi bir kullanıma daha müsait ;)
cok iyi güzel bir uygulama teşekurlar
Teşekkürler. mükemmel bir makale olmuş
Teşekkürler Paylaşım İçin.
Güzel olmuş ellerine sağlık.
Böyle güzel paylaşımları bekliyoruz.
ne güzel bir makale olmuş teşekkürler çok işimizi görecek
Güzel bir makale olmuş. Teşekkürler
teşekkür ederim hocam anlatımın için gerçekten makalen güzel olmuş.
Güzelmiş Teşekkürler
Çok başarılı teşekkürler
Öncelikle çok saol güzel bir eklenti çok işime yaradı.
Bu eklenti bir tabloya ekledim tablodan silmek istenilen satır olduğunda onay için bu plugini kullanıyorum.Yanlız bu plugini geliştirmem gerekiyor, tablodaki bir satırı silmek için tıkladığımda açılan uyarı açıkken cancel butonuna tıklanmadan sayfanın herhangi bir yerine tıklandığında ve tablonun başka bir satırını silme butonuna tıklandığında diolog penceresi kapansın istiyorum.Bunu ben yapamadım, bu konuda yardımcı olursan sevinirim.
recep kardeşim teşekkürler :) güzel paylaşım
çok teşekkürler bunu arıyordum.
güzel yazı olmuş eline sağlık.