Kardan adamlar yaptım, hepsini kahramanım sandım. Avuçlarımda eridiler..

jQuery – Yardımcı Siteler

10 sene önce Enes Turan tarafından yazılmıştır.
anasayfa
anasayfa
anasayfa

jQuery öğrenmek isteyip adam akıllı kaynak bulamayan sayın okuyucularım, işte size iki güzel site 🙂

http://www.tutsdeck.com/c/jQuery/1/

http://jquery-howto.blogspot.com/

Bunlar ingilizce, ben ingilizce bilmem derseniz, yapıcak bişey yok 🙂

1.381 Kere okundu
Yorum Yok :(

jQuery – Başlangıç 2

10 sene önce Enes Turan tarafından yazılmıştır.
anasayfa
anasayfa
anasayfa

Bir önceki yazımda anlattığım çalışmamı bugün biraz daha uğraşarak tamamladım. Çalışmanın son halini buradan inceleyebilirsiniz. http://www.izmittelekom.com/domain-tescil.html

Neler var neler yok, şimdi onları bir inceleyelim.

İlk yazıda, bir grup seçim kutusunu (checkbox) her beraber seçmek ve tümden kaldırmak üzerine bir uygulama yapmıştık. Bu yazıda anlatacağım olay ise, İzmit Telekom’un domain sorgulama sisteminin ara yüzü tasarımı ile ilgili. Şöyleki; aramak istediğiniz domain adresini yazdıktan sonra istediğiniz uzantıları seçiyor ve ara düğmesine tıklıyorsunuz. Tıklamanız ile birlikte jQuery devreye giriyor ve arama sonuçlarının gösterileceği bölümü hazırlıyor, ardından sunucuya bağlanıp sorgulama yapıyor ve sonuç durumuna göre sonuç alanlarını renklendiriyor. Sitede denedikten sonra ne demek istediğimi anlayacaksınız 🙂

Şimdi kullandığımız kodlara gelelim.

$(‘#d_ara’).click( function() {

// sonuçlar başlığını ayarlıyoruz
if(document.domainara.domain.value == ”) {
alert(“Lütfen alan adı bölümüne bir isim giriniz.”);
return false;
}

$(‘#sonucbas’).html(“Arama Sonuçları”).hide().fadeIn(1000);

var konum = “”;
// aranan uzantıları ekliyoruz
$(“#group_1 input[type=checkbox][checked]”).each(
function() {
konum += ‘<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″ id=”‘ + $(this).val().replace(“.”, “”) + ‘tablo”><tr><td>’ + $(this).val() + ‘</td><td><div id=”‘ + $(this).val().replace(“.”, “”) + ‘sonuc”><img src=”resim/spinner.gif”> Kontrol ediliyor</div></td></tr></table>’;

sorgula(document.domainara.domain.value, $(this).val());
}
);

$(‘#sonuclar’).html(konum).hide().fadeIn(1000);

return false;
});

Daha önceki yazımda seçicilerden bahsetmiştim. Ne ile ilgili işlem yapmak istiyorsak onu seçmemiz gerekli. İlk mavi renkli satır bunu sayfadaki d_ara isimli resmin click olayını etkinleştiriyor. Sondaki mavi bölümse click blogunu kapatıyor

Kırmızı renkli alanda, aranması için bir ismin yazılıp yazılmadığını kontrol ediyor. Eğer boşsa hata veriyor. Burada jQuery seçicisi kullanmadım, doğrudan javascript kodu ile yazdım.

Yeşil bölümde, tıkladığımız her seçim kutusu için bir satırın ekrana eklenmesi işlemini gerçekleştiriyoruz. Ben satırları tablolar halinde düzenledim, siz div vs kullanabilirsiniz. Genel mantık şu; tüm satırları html kodu halinde konum değişkenine aktarıyoruz, arkasından mor renk ile belirttiğimiz alanda id’si “sonuclar” olan div alanının içine html() fonksiyonu ile yerleştiriyoruz. html() istediğimiz bir alanın içeriğini değiştirmeye yarar.

Bu arada yeşil satırlarda kalın yazdığım alanlara dikkat edin. İlk önce replace(“.”, “”) komutunu neden kullandığımı anlatayım. Alan adı sorgulamasında com.tr uzantısı gibi seçeneklerde, ortada yer alan noktanın id alanında kullanılması sorunlara sebep oluyor. O yüzden bu komutu kullanarak com.tr yi comtr ye çevirdim. Kalın yazıların ilki tablo ile bitiyor, diğeri sonuc ile bitiyor. Bunları ilerde kullanacağız.

sorgula() fonksiyonunu çağırıyoruz, bu fonksiyonun detayları aşağıda. Ancak dikkat edin, her satır için bir kere çağırıyoruz. Bu şekilde olunca birden fazla alan adını aynı anda sorgulayabiliyoruz. Zaten bu uygulamanın amacıda bu.

function sorgula(domain, uzanti) {
jQuery.post(‘ds.php’, {d: domain, u: uzanti}, function(data) {
var sonuc = data.split(“|”);
$(“#” + uzanti.replace(“.”, “”) + “sonuc”).html(sonuc[1]);
if(sonuc[0] == ‘0’) {
$(‘#’ + uzanti.replace(“.”, “”) + ‘tablo’).toggleClass(‘dkutu2’);
} else {
$(‘#’ + uzanti.replace(“.”, “”) + ‘tablo’).toggleClass(‘dkutu3’);
}

});
}

Bu bölüm kısmen daha basit. Fonksiyona parametre olarak gelen domain adresi ve uzantıyı sunucuya post ile gönderiyoruz. Kırmızı satır bu işi yapmaktadır. jquery.post fonksiyonunda ilk önce nereye göndereceğinizi (bizim uygulamada ds.php), sonra neler göndereceğinizi (yazım şekli gördünüz gibi; alan1: deger1, alan2: deger2) yazıyoruz ve sonucun nasıl değerlendirileceğini function içine yazıyoruz. function(data) diye belirttiğimizde sunucudan gelen cevap data değişkenine yüklenir.

Bizim kullandığımız ds.php domain adresi müsaitse 1|… şeklinde, değilse 0|… şeklinde sonuç döndürmektedir. Yeşil satırda sunuudan gelen sonucu | ile ikiye bölüyoruz. Bu şekilde elimizde 2 alanlı bir dizi elemanı oluşuyor. Mavi satırda daha öncede kullandığımız .html() fonksiyonu ile | den sonra kalan bölümü ekrana yerleştiriyoruz. Turuncu bölümde ise | den önceki değerin 0 veya 1 olmasına göre satırları oluştururken kullandığımız tablonun css sınıfını, yani rengini değiştiriyoruz. $tablo.toggleClass(‘yeni sınıfın ismi’) şeklinde kullanıma sahip olan bu fonksiyon, seçtiğimiz html nesnesinin css sınıfını değiştirir. Örneğin sonuç 0 ise dkutu2, 1 ise dkutu2 css sınıfı etkinleştiriliyor.

Kodlar ile ilgili anlatacaklarım bu kadar.

Son olarak, uygulamayı denediğinizde domain adresinin müsait olma veya olmama durumuna göre satırdalarda farklı içeriklerin gösterildiklerini göreceksiniz. Bu içerikleri jQuery değil, ds.php üretir. jQuery sadece ds.php ürettiği html kodlarını ekrana yerleştirir.

Kolay gelsin 🙂

1.444 Kere okundu
Yorum Yok :(

jQuery – Başlangıç

10 sene önce Enes Turan tarafından yazılmıştır.
anasayfa
anasayfa
anasayfa

jQuery ile ilgili ilk çalışmam, bir grup seçenek kutusunu toplu halde seçtirmek idi. İlgili uygulamayı burada görebilirsiniz.

1. Adım

Her yerde ve her zaman sayfanızın <head></head> etiketleri arasında jQuery kütüphanesini yüklemeniz gerekmektedir. Ben google’ın kütüphanelerinden çekiyor. Siz dilerseniz kendi hosting paketinize ekleyin, src=”…” kısmını düzenleyerek kendi sunucunuzdan kullanın.

Örnek kullanım şekli;

<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-9″ />
<title>İzmit Telekom</title>
<link href=”main.css” rel=”stylesheet” type=”text/css” />
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js”></script>
</head>

2. Adım

Aklıma takılan 2. soru şu oldu; İş yaptırmak istediğim kodları sayfanın neresine yazmalıyım. Örneğin bir fonksiyon tanımlayacağım, sayfada nerede olacak. Cevap; nerede istersen orada 🙂 <body></body> etiketleri arasına yazabilirsiniz mesela. Bu önemli bir adım arkadaşlar.

3. Adım

Uygulamamız seçim kutularını seçtirme olayı idi. O zaman kutuları ayarlayalım.

Örnek kod:

<div id=”group_1″>
<input type=”checkbox” name=”com”  id=”com” value=”1″>
<input type=”checkbox” name=”net” id=”net” value=”1″>
<input type=”checkbox” name=”org” id=”org” value=”1″>
</div>

Dikkat Dikkat!!! <div> etiketine bir id atadık. Bu id “Tümünü Seç” bağlantısına tıkladığımızda sistemin nerede çalışacağına belirliyor. Önemlidir, es geçmeyin.

4. Adım

Şimdi bağlantıları oluşturuyoruz.

Örnek kod:

<a rel=”group_1″ href=”#select_all”>Tümünü Seç</a>

rel bölümünde uygulamaya ekstra bir bilgi verdiğimizi düşünebilirsiniz. Elbette burada dikkat çeken yer, “div id” ile “a rel” alanlarının aynı değeri taşımasıdır.

5. Adım

Sayfanın istediğiniz bir yerine aşağıdaki kodu koyabilirsiniz. Ben bağlantılardan hemen sonra koydum.

<script type=”text/javascript”>
$(document).ready( function() {

$(“A[href=’#select_all’]”).click( function() {
$(“#” + $(this).attr(‘rel’) + ” INPUT[type=’checkbox’]”).attr(‘checked’, true);
return false;
});

});
</script>

Burada belirli kalıplar var. Kırmızı renkli alanlar standart, değişmiyor. Ortada kalan kısım ise ne demek onu inceleyelim. 1. satırda seçici ismi verilen bir fonksiyon var (Seçiciler için detaylı bilgi). Diyorki; <a ile başlayan ve href=”..” değeri #select_all olan tüm html nesnelerine tıklama olayını ekle. .click(), tıklama olayını ekle demektir. Tıklama olayı olduğunda çalıştırılacak fonksiyonu ise () içine yazıyoruz. 2. satırı özel olarak inceleyelim.

$(“#” + $(this).attr(‘rel’) + ” INPUT[type=’checkbox’]”).attr(‘checked’, true);

Bakın, mavi ile belirttiğim kısım bir seçicidir. Hatta iç içe seçiciler kullanılmış. $(this), tıkladığımız <a> nesnesini belirtiyor. .attr(‘rel’), tıklatığınız a nesnesinin rel değerini al demektir. Sonra buna seçim kutularını ekliyor (checkbox). Tıkladığımız <a> nesnesinin rel değeri group_1 idi, bu durumda ne oldu seçici: gruop_1 içindeki seçim kutuları 🙂

Yeşil yazıda seçim kutularının bir özelliğini ayarlıyoruz. Hepsini seçmek istiyorduk, bu durumda “checked, true” kullanıyoruz. Eğer seçimi kaldırmak istiyorsak, “checked, false” yapmamız gerekli.

Son satır, “return false” sayfa bir yere gitmesin diye kullanılan komuttur.

Hepsini seç kısmını bu örnekte yaptık. Sizde seçimleri kaldır seçeneğini kendiniz yaparsınız artık.

Umarım ufkunuzu açan bir eğitsel yazabilmişimdir.

3.010 Kere okundu
Yorum Yok :(

jQuery

10 sene önce Enes Turan tarafından yazılmıştır.
anasayfa
anasayfa
anasayfa

Bu aralar film izlemekten fırsat buldukça jQuery ile ilgileniyorum. jQuery bir javascript kütüphanesi. Sloganı “az kodla çok iş yap”. Nette birçok açıklama sayfada genel tanıtımlar veya eğitseller bulunmakta. Bense bir acemi olarak bu işi nasıl kıvırdığımı anlatmaya gayret edeceğim.

Hadi bismillah 🙂

1.181 Kere okundu
Yorum Yok :(

Warning: file_get_contents(http://www.oyunkolu.com/js/son_oyunlar_widget3.htm): failed to open stream: HTTP request failed! HTTP/1.1 404 Not Found in /home/enestura/public_html/wp-content/themes/genegri/category.php on line 40