Wordpress

Wordpress Yakuter

Yakuter bundan böyle bir Vargonen mutlu müşterisidir :) Not: Sadece slogan olarak değil gerçekten mutlu ;) Twitter

1182 takipçi

jConfirmAction | jQuery Onay Kutusu

KategoriJavascript

16 Mayıs 2010

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

Ali Görkem
19 Mayıs 2010

Çok güzel bir uygulama olmuş.Recep’in adresidekide harika.Teşekürler

yakuter
19 Mayıs 2010

Ş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 ;)

oyuncu
30 Mayıs 2010

cok iyi güzel bir uygulama teşekurlar

nokta
31 Mayıs 2010

Teşekkürler. mükemmel bir makale olmuş

Ceyhun Artan
31 Mayıs 2010

Teşekkürler Paylaşım İçin.

Necdet
02 Haziran 2010

Güzel olmuş ellerine sağlık.
Böyle güzel paylaşımları bekliyoruz.

Burak
06 Haziran 2010

ne güzel bir makale olmuş teşekkürler çok işimizi görecek

yakuter
08 Haziran 2010

İşine yaramasına asıl ben sevindim :)

Ahmet
10 Haziran 2010

Güzel bir makale olmuş. Teşekkürler

oyuncu
14 Haziran 2010

teşekkür ederim hocam anlatımın için gerçekten makalen güzel olmuş.

Kemal
01 Temmuz 2010

Güzelmiş Teşekkürler

Coşkun Gün
04 Eylül 2010

Çok başarılı teşekkürler

Dogan
09 Şubat 2011

Ö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.