“Dünya eskisinden kötü değil. Sadece iletişim çok gelişti.”

jQuery ile Tablomuzdan Satır Silelim

Tarih: Mart 2nd, 2010 | Yazar: | Kategoriler: jQuery | Etiketler: | 1 Yorum »

Bu yazımda sizlere çok kolay bir şekilde jQuery kullanarak tablomuzda ki satırları nasıl sileceğimizi göstereceğim. Ancak satır silme işlemini sadece istemci tarafında çalışacak. Tabi isterseniz ajax ile silme işlemini sunucu tarafına da göndererek tamamlayabilirsiniz.

<table width="100%" border="1" bordercolor="#000000" cellspacing="2" cellpadding="2">
<tr>
<td>Sutun1</td>
<td>Sutun2</td>
<td>Silme İşlemi</td>
</tr>
<tr>
<td>Değer1</td>
<td>Değer2</td>
<td><a href="#" class="silinicekSatir">Sil</a></td>
</tr>
<tr>
<td>Değer3</td>
<td>Değer4</td>
<td><a href="#" class="silinicekSatir">Sil</a></td>
</tr>
<tr>
<td>Değer5</td>
<td>Değer6</td>
<td><a href="#" class="silinicekSatir">Sil</a></td>
</tr>
<tr>
<td>Değer7</td>
<td>Değer8</td>
<td><a href="#" class="silinicekSatir">Sil</a></td>
</tr>
</table>

Yukarıdaki kod da klasik bir tablo oluşturduk. Tek fark içerisine bir adet link yerleştirdik. Bu linke silinicekSatır olarak sınıf tanımladık. Bu sınıfı tanımlama nedenimiz jQuery ile yapacağımız sorgularda bize yardımcı olması.

$(document).ready(function() {
$('.silinicekSatir').click(function (){
if (confirm('Silmek istediğinizden emin misiniz?')){
$(this).parent('td').parent('tr').remove();
}
});
});

Yukarıdaki kodu satır satır değerlendirirsek.

  1. Numaralı satırda: Döküman hazırsa ise fonksyionu çalıştır emri veriyoruz. Yani sayfamızın yüklenmesi bittiğinde fonksiyon çalışacaktır.
  2. Numaralı satırda: .silinicekSatır sınıfına sahip elementlere tıklandığında çalışacak olayı tanımladık.
  3. Numaralı satırda: Kullanıcıya yapmak istediği işlem hakkında emin olup olmadığını soruyoruz. Kullanıcı Tamam butonuna basar ise true değeri dönüyor.
  4. Numaralı satırda: Tıklanan linkin ait olduğu satırı aile metodunu kullanarak buluyoruz ve bu satırı siliyoruz.

Hepsi bu kadar! Demo’ya bakmak isterseniz aşağıdaki link den faydalanabilirsiniz.

DEMO


Tarih ve zaman ile ilgili JavaScript eklentileri

Tarih: Şubat 24th, 2010 | Yazar: | Kategoriler: Javascript | Etiketler: | Yorum Yok »

Kullanıcılardan tarih veya zaman ile ilgili bilgi almamız gerekebilir bunu klasik metin kutuları veya dropdown menüler ile yapmaktansa daha görsel şekilde yapmamamız gereken durumlar olabilir. Bu ihtiyacımızı karşılayan birçok  JavaScript eklentisi mevcut bu yazımda bu eklentilerden 17 tanesinin paylaşacağım.

1. iCal-like calendars with jQuery

2. jDigiClock

3. jQuery UI Datepicker

4. jQuery date picker plug-in

5. Date Range Picker using jQuery UI 1.7

6. Date Picker jQuery Plugin from eyecon.ro

7. jQuery Date Input

8. simple jQuery date-picker plugin

9. jquery.timepickr

10. MooTools DatePicker

11. Vista-like Ajax Calendar

12. Calendar – A Javascript class for Mootools

13. MooGenda

14. Datejs

15. Nogray JavaScript Calendar Component

16. Monket Calendar

17. Calender Eightysix


8 Adet Online Güvenlik Kodu Uygulaması

Tarih: Şubat 18th, 2010 | Yazar: | Kategoriler: Dışlananlar | Etiketler: , | Yorum Yok »

Güvenlik kodu uygulamasını kimse sevmese de kötü niyetli insanların sistemlerimize zarar vermesini engelleyeceğimiz en iyi çözümlerden biri. Güvenlik kodu uygulamasını kendi yazacağımız servisler ile yapabiliyoruz olsak bile bu işi bizim adımıza yapan online servisler var. Online servislerin en büyük avantajı anlamlı kelime grupları oluşturması ve bu sayede kullanıcıların güvenlik kodlarını daha rahat çözmesi. Bu yazımda bu servislerden 8 tanesini tanıtacağım.

Captchator

Captchas

Open Captcha

Recaptcha

Spamerator

Text Disguise

VidoopCAPTCHA

WebSpamProtect


12 Adet Online Kod Editörü

Tarih: Şubat 18th, 2010 | Yazar: | Kategoriler: Dışlananlar | Etiketler: , | Yorum Yok »

Bir geliştirici olarak zaman zaman masaüstü IDE programımızın bulunmadığı durumlar veya kodlarımızı online olarak paylaşma gereği duyabiliriz. Bu işlemi online kod editörleri ile halledebiliyoruz. Hemde birçok masaüstü uygulamasıyla yarışacak seviyede. Bunlardan 12 tanesini aşağıda bulabilirsiniz.

Amy Editor

http://www.amyeditor.com/

JSBin

http://jsbin.com/

Bespin

https://bespin.mozilla.com/

Kodingen

http://kodingen.com/

EditPad

http://www.editpad.org/

TypeIt

http://www.typeit.org/

PractiCode

http://www.landofcode.com/online-code-editor.php

9ne

http://robrohan.com/projects/9ne/

jsvi

http://gpl.internetconnection.net/vi/

HTMLedit

http://htmledit.squarefree.com/

DarkCopy

http://darkcopy.com/

SimpleText

http://www.simpletext.ws/


Google ile döviz kurlarını öğrenelim

Tarih: Şubat 7th, 2010 | Yazar: | Kategoriler: Javascript | Etiketler: , , | Yorum Yok »

Google bir çok alanda çok farklı uygulamaları mevcut bugün bunlardan birini tanıtacağım. Döviz kurlarını öğrenmemiz değişik sebepler ile karşımıza çıkar kimi zaman e-ticaret sistemimizde kullanırız kimi zaman döviz kurları hakkında ziyaretçiye bilgi göstermemiz gerekebilir. Döviz kuru hizmeti veren birkaç servis mevcut ancak çoğu veriyi ayıklayabileceğimiz şekilde sunmuyor buda bize sorun olarak geri dönüyor. Google bu hizmetinde veriyi JSON ile kolayca ayıklayabileceğimiz şekilde gönderiyor. İstersek ayıklama işini tarayıcıda istersek sunucuda yapabiliriz.

Google dan bu veriyi almak oldukça basit. Veriyi almaya başlamadan önce buraya tıklayarak para birimlerinin kısalmasına bakalım.

http://www.google.com/ig/calculator?hl=en&q=(Dönüştürülcek miktar ve Para birimi)=?(Dönüşecek Para Birimi)

Yukarıda gördüğümüz adres üzerinden döviz kurlarını sorguluyoruz çalışan bir örneğe bakmak için aşağıdaki url ziyaret ediniz.

http://www.google.com/ig/calculator?hl=en&q=100USD=?TRY

Hepsi bu kadar!