jquery dersleri olarak etiketli yazılar
jConfirmAction | jQuery Onay Kutusu
9 Haz
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ı]
Google maps için jQuery eklentileri
5 Şub
Google maps artık birçok interaktif sitede yerini aldı ve almaya devam ediyor. Sizler de sitelerinizde google maps kullanmak istiyorsanız aşağıdaki jquery eklentileri ile bunu kolaylıkla gerçekleştirebilirsiniz…
gMap
PHP ve jQuery ile yapılmış yapışkan notlar
22 Oca
PHP ve jQuery kullanarak yapılmış bir yapışkan notlar örneği. Örnek geliştirilerek farklı projelerde kullanılabilir. Devamı >
