Kategori: JavaScript

21. Gün – jQuery Dersi 21

Yirmi birinci jQuery dersimizde aşağıdakileri öğrendik;
– jQuery $.browser Nesnesi
– jQuery $.contains Fonksiyonu
– jQuery Resize Metodu

$.browser Nesnesi (jQuery 1.9 sürümü ile bu metod kalkmıştır.)
Bu nesne tarayıcı tipini ve versiyonunu elde etmemizi sağlar. Mevcut tarayıcı tipleri şunlardır;– opera
– msie
– safari
– mozilla
– webkit

Örnek bir kullanımı ise şöyledir;

if ($.browser.opera) {
	alert("Opera tarayıcısı ile giriş yaptınız..");
}

Versiyon öğrenmek için ise örnek kullanım;

alert($.browser.version);

$.contains Fonksiyonu
Bu fonksiyon 2 parametre alır.. Bu paremetrelerde html nesneleri olmalıdır.. İlk nesne içerisinde, 2. nesnenin olup olmadığının kontrolünü yapar.. Örnek bir kullanım;

var sonuc = $.contains($("div#tarayici")[0], $("strong")[0]);
if (sonuc) alert("Nesne bulunuyor!");
else alert("Nesne bulunamadı!");

Burada html nesnesine çevrilmesi için [0] ifadesini seçtiğimiz nesnenin sonuna ekliyoruz.

.resize() Metodu
Bu metod seçilen nesne yeniden boyutlandırıldığında bunu yakalayıp işlem yapmamızı sağlar.. Genelde pencere için kullanılan bir metoddur.. Örnek kullanımı;

$(window).resize(function() {
	var width = $(this).width();
	var height = $(this).height();
	$("#sonuc").html("<strong>Width: </strong>" + width + "<br /><strong>Height: </strong>" + height);
});

Mevcut penceremiz yeniden boyutlandırıldığında yeni genişlik ve yüksekliğini sonuc divinin içerisinde yazdırmış olduk.

Kaynak dosyayı indirin;
http://yadi.sk/d/-FJIc5jr0HfHZ

20. Gün – jQuery Dersi 20

Yirminci jQuery dersimizde aşağıdakileri öğrendik;
– jQuery Stop Metodu
– jQuery :contains Filtresi
– jQuery $.isNumeric Fonksiyonu

jQuery Stop Metodu Kullanımı

$("div.ac").click(function(){
   $("div.kutu").stop().slideToggle();
});

jQuery :contains Filtresi Kullanımı

$("ul.filtre li:contains('erbilen')").css("color","green");

contains filtresi, büyük küçük harfe duyarsız olduğu için pek kullanışlı sayılmaz.. Ancak bunun çözümü basit bir fonksiyon ile hallediliyor, aşağıdaki örnek büyük küçük harfe duyarsız şekilde kullanılabilinir bir filtredir.

$.expr[':'].icontains = function(obj, index, meta, stack){
	return (obj.textContent || obj.innerText || jQuery(obj).text() || '').toLowerCase().indexOf(meta[3].toLowerCase()) >= 0;
};

$("ul.filtre li:icontains('erbilen')").css("color","green");

jQuery $.isNumeric Fonksiyonu Kullanımı

$("#btn").click(function(){
   var $sayi = $("input[name=sayi]").val();
   if ($.isNumeric($sayi)) {
      alert("Girdiğiniz Sayı: " + $sayi);
   } else {
      alert("Bir sayı girmediniz!");
   }
   return false;
});

Ders Kaynak Dosyasını İndirin;
http://yadi.sk/d/LY7dErYJ0D-T2

19. Gün – jQuery Dersi 19

On dokuzuncu jQuery dersimizda aşağıdakileri öğrendik;
– jQuery $.ajax Metodu
– jQuery ajaxStart, ajaxStop, ajaxComplete, ajaxSuccess, ajaxSetup Metodları
– jQuery Ajax Üye Ekleme Uygulaması

$.ajax Metodu Kullanımı;

$.ajax({
	// parametreler gelecek..
});

Girebileceğimiz belli başlı parametreler;
– url = Ajax dosyasının yolu
– type = Gönderim timi (post – get)
– data = Gönderilecek veriler
– dataType = Gelen içeriğin tipi
– success = Ajax isteği başarıyla tamamlanınca çalışır ve verileri alırız.
– error = Bir hata oluştuğunca bu parametre ile yakalayıp işlem yaparız.
– statusCode = Hata kodlarına göre işlem yapmamızı sağlar.
Daha fazlası için: http://api.jquery.com/jQuery.ajax/

Yardımcı Ajax Metodları;
– ajaxSetup() = Değişmeyecek ajax parametrelerini bu yardımcı metodda tanımladığımız taktirde, her ajax isteği için aynı şeyleri yazmamış oluruz..

$.ajaxSetup({
	type: "post",
	url: "ajax.php",
	dataType: "json"
});

– ajaxStart() = Ajax isteği başladığında çalışan metoddur.
– ajaxStop() = Ajax isteği bittiğinde çalışan metoddur.
– ajaxComplete() = Ajax isteği başarılı/başarısız tamamlandığında çalışan metoddur.
– ajaxSuccess() = Ajax isteği başarıyla tamamlandığında çalışan metoddur.
– ajaxError() = Ajax isteğinde hata olduğunda çalışan metoddur.

$("#loader").ajaxStart(function(){
	$(this).fadeIn(); // ajax isteği başlayınca göster
}).ajaxComplete(function(){
	$(this).fadeOut(); // ajax isteği bitince gizle
});

İlk Ajax Örneğini İndirin;
http://yadi.sk/d/Tv2R6rHa05P6Y

Ajax Üye Ekleme Örneğini İndirin;
http://yadi.sk/d/Kns-mNee05PBC

18. Gün – jQuery Dersi 18

On sekizinci jQuery dersimizde aşağıdakileri öğredik;
– jQuery $.post Metodu
– jQuery $.get Metodu
– jQuery Success, Error ve Complete Metodları

jQuery $.post / $.get Metodları Kullanımı;

Bu metodun yapısı şu şekildedir;

$.post(AJAX_URL, GONDERİLECEK_VERİLER, GELEN_VERİ, VERİ_TİPİ)

Buna göre dolduracak olursak;

$.post("ajax.php", {"isim":"tayfun","soyisim":"erbilen"}, function(cevap) {
   alert(cevap);
});

Ajax dosyamız ise şu şekilde olacak;

<?php

	$isim = $_POST["isim"];
	$soyisim = $_POST["soyisim"];
	
	echo $isim." ".$soyisim;

Dizi halinde değer göndermek için;

$.post("ajax.php", {"id[]", ["1","2","3","4","5","6"]}, function(cevap) {
   alert(cevap);
});

JSON çıktısı almak isteseydik, 4. parametre olarak (veri tipini) json yapmamız gerekirdi.. Yani;

$.post("ajax.php", {"isim":"tayfun","soyisim":"erbilen"}, function(cevap) {
   if (cevap.hata) {
      alert(cevap.hata);
   } else {
      alert(cevap.ok);
   }
}, "json");

Buna bağlı olarak ajax.php dosyası ise şöyle olmalıydı;

<?php

 $isim = $_POST["isim"];
 $soyisim = $_POST["soyisim"];
 
 if (!$isim || !$soyisim) {
    $array["hata"] = "Boş alan bırakmayın!";
 } else {
    $array["ok"] = $isim." ".$soyisim;
 }
 
 echo json_encode($array);

Success: Bu metod ajax isteği başarılı bir şekilde tamamlanırsa çalışır.
Error: Bu metod ajax isteğinde herhangi bir hata alınırsa çalışır. (örneğin ajax dosyasının bulunamaması gibi ya da isteğin zaman aşımına uğraması gibi..)
Complete: Bu metod ajax isteği başarılı ya da başarısız olduğu her iki durumda da çalışacaktır.

Yukarıdaki metodlarla ilgili örnek kullanımları videoda bulabilirsiniz.

$.get metodunun kullanımı da $.post metodu ile tamamen aynıdır.. Tek farkı ajax.php dosyasında verileri $_POST metodu yerine $_GET metoduyla almamızdır.. İsterseniz $_REQUEST metodu ile her iki metod için geçerli şekilde değerleri alabilirsiniz.Bu dersi anlayabilmek için PHP bilginizin iyi olması gerekiyor. jQuery’nin html sayfasındaki nesnelere müdehale etmesi gibi, güzelde bir ajax sınıfı bulunuyor.. Henüz hepsini görmedik ancak iyi bir başlangıç yaptık ????


Ders Dosyalarını İndirin;
http://yadi.sk/d/0fINV-O202dJ2

16. Gün – jQuery Dersi 16

On altıncı jQuery dersimizde aşağıdakileri öğrendik;
– jQuery Error Metodu
– jQuery One Metodu
– jQuery Submit Metodu

Error Metodu Kullanımı

$("img").error(function(){
$(this).attr("src","http://www.uzmancevap.org/lib/theme/v1/images/noavatar_erkek.gif");
});

One Metodu Kullanımı

$("button").one("click", function(){
	$("span").toggle();
});

Submit Metodu Kullanımı

$("#deneme").click(function(){
	$("form").submit(function(){
		var deger = $("input[name=deneme]").val();
		if (deger == '') {
			alert("değer boş");
			return false
		}
		return true;
	}).submit();
});

Kaynak Dosyayı İndirin;
https://docs.google.com/open?id=0BxX-AwfGLF5vMkphbTRwOFlWQzg

jQuery Font Eklentisi (pFont)

Merhaba arkadaşlar, bugün sizlerle jquery ile hazırladığım basit font eklentisini paylaşacağım.. Bu eklenti ile kolay bir şekilde belli bir nesne ya da nesnelerde font değerlerini büyültüp küçültebilirsiniz.. Max ve min değerlerini belirleyebilirsiniz..

Eklenti için kullanabileceğiniz parametreler;
artir : Artırmak için hangi nesneyi kullanacaksanız o nesneyi bu parametreye atayın..
azalt : Azaltmak için hangi nesneyi kullanacaksanız o nesneyi bu parametreye atayın..
orjinal : Orjinaline döndürmek için hangi nesneyi kullanacaksanız o nesneyi bu parametreye atayın.. (isteğe bağlı)
min : Minimum kaç font azalacağını belirleyin.
max : Maksimum kaç font artacağını belirleyin.
alert_max : Maksimum sınır aşıldığında kullanıcıya alert ile bilgi verdirmek isterseniz bu parametreye mesajı yazın.
alert_min : Minimum sınıra ulaşıldığında kullanıcıya alert ile bilgi verdirmek isterseniz bu parametreye mesajı yazın.
standart : Standart fontun değerini belirleyebilirsiniz.. (Eğer css’de belirlemişseniz buna gerek yok)

Kullaımı;
jQuery ve eklenti dosyasını sayfanıza çağırıp ready işlemi yaptıktan sonra uygulamak istediğiniz nesneyi ya da nesneleri seçip aşağıdaki gibi parametreler girerek işleminizi yapabilirsiniz;

$(".nesne, h1, h2").pFont({
	artir: 'a.fontArtir',
	azalt: 'a.fontAzalt',
	orjinal: 'a.fontOrj',
	min: 10,
	max: 30,
	alert_max: 'Sınırı aştınız',
	alert_min: 'Minimuma ulaştınız'
});

İndirin;
http://yadi.sk/d/lGdbc1U_19q14