Yazıya Gradient Renk Uygulama (jQuery)

Bazı tasarımlarda yazıların gradient renkleri oluyor. Bunu css’e dökerken ya imaj olarak alıyoruz ya da tek renk ile yapıyoruz. Ancak bir jquery eklentisi sayesinde yazılara kolayca gradient renk verebileceğiz. Benim çok işime yaradı, eminim sizinde işinize yarayacaktır 🙂

Web adresi: http://www.codefocus.ca/goodies/gradienttext

Nasıl kullanılır?

jQuery kütüphanesini ve eklenti dosyasını sayfaya çağırdıktan sonra elemanı seçip uygualamak kalıyor geriye.. İşte çalışır bir örnek;

$('#text').gradienttext({
	colors: ['#FFF', '#CCC', '#111'],
	style: 'vertical'
});

Dilerseniz style parametresini horizontal yaparak yatay şekilde de gradient verebilirsiniz. Ne kadar renk kodu yazmak isterseniz o kadar belirtebilirsiniz colors parametresinde.

JS ve jQuery’de Girilen Değerleri Büyük/Küçük Yapmak

Anlık olarak kullanıcıdan aldığımız verilerde tamamı büyük ya da tamamı küçük olmasını isteyebiliriz. Bunu bir çok yolla yapabiliriz, ama daha kullanıcı girerken yapıyor olmamız bir avantaj.. Peki nasıl yapacağız?

Örneğin bir inputumuz olsun;

<input type="text" />

Bu input, keyup olduğunda bunu yakalayalım ve mevcut değerleri toUpperCase() ile büyütelim ve yeniden değerini yazdıralım.

$('input').keyup(function(){
    this.value = this.value.toUpperCase();
});

Ya da mesela büyütmek yerine küçültmek istersek bu seferde toLowerCase() işlemini uygulayacağız.

this.value = this.value.toLowerCase();

Hepsi bu kadar, bol kodlu günler.

jQuery UI Datepicker için Gün Filtresi

Geçenlerde sevgili Mert abim, bu konu hakkında benden ufak bir ricada bulundu. Biraz araştırdıktan sonra mantığı kavradım ve kullanmak için basit bir fonksiyon hazırladım. Bu fonksiyon ile datepicker için gün filtresi yapabiliyorusunuz..

Bize lazım olan sadece mevcut zamandan şu kadar gün sonrasını seçememe gibi bir olaydı.. Bende ona göre bir fonksiyon yazdım, ancak fonksiyonu biraz incelerseniz istediğiniz kısımları kendinizde devam ettirebilirsiniz diye düşünüyorum..

Öncelikle fonksiyon kodlarını vereyim;

function gunFiltre(date, dlimit, goncesi, pgun, agun) {
	
	/**
	 * Mevcut günden sonra kaç gün daha gözükebilsin?
	 */
	var gunLimit = dlimit ? dlimit : 0;
	
	/**
	 * Mevcut günden önceki diğer günlerin hepsi gözüksün
	 */
	var gunOncesi = goncesi;
	
	/**
	 * Günleri belirleyip işlem yaptırmak isterseniz bu diziye pasif olmasını istediğiniz günleri yazın
	 */
	var pasifGun = pgun ? pgun : [];
	
	/**
	 * Günleri belirleyip işlem yaptırmak isterseniz bu diziye aktif olmasını istediğiniz günleri yazın
	 */
	var aktifGun = agun ? agun : [];
	
	var bugunTarih = String(new Date()).split(' ');
	var mevcutTarih = String(date).split(' ');
	var ayDogrumu = bugunTarih[1] == mevcutTarih[1];
	
	/** 
	 * belirli günleri pasif eder
	 */
	if ( pasifGun.length > 0 ){
		if ( ayDogrumu && pasifGun.indexOf(parseInt(mevcutTarih[2])) != -1) {
			return [false];
		} else {
			return [true];
		}
	}
	
	/** 
	 * belirli günleri aktif eder
	 */
	if ( aktifGun.length > 0 ){
		if ( ayDogrumu && aktifGun.indexOf(parseInt(mevcutTarih[2])) != -1) {
			return [true];
		} else {
			return [false];
		}
	}
	
	/**
	 * gün limiti belirlenmişse mevcut zamandan o gün limiti kadarından sonrasını pasif yapar
	 */
	if ( gunLimit !== 0 && ayDogrumu ){
		for ( i = 0; i <= gunLimit; i++ ){
			if ( (parseFloat(bugunTarih[2]) + i) == mevcutTarih[2] ){
				return [true];
			}
		}
	}
	
	/**
	 * mevcut zamandan önceki günleri eğer belirlenmiş ise pasif yapar
	 */
	if ( gunOncesi === true && ayDogrumu ){
		if ( mevcutTarih[2] < parseFloat(bugunTarih[2]) ) {
			return [true];
		}
	}
	
	if ( ayDogrumu && gunLimit !== 0 ){
		return [false];
	} else {
		return [true];
	}
	
}

Nasıl kullanacağız?

Örnek kullanımları şöyle;

Sadece bugün ve 3 gün sonrası aktif olsun, diğer günler pasif olsun.

$('#datepicker').datepicker({
	beforeShowDay: function(tarih){
		return gunFiltre(tarih, 3);
	}
});

Bugünden önceki günler ve bugünden sonraki 3 gün hariç diğer günler pasif olsun.

$('#datepicker').datepicker({
	beforeShowDay: function(tarih){
		return gunFiltre(tarih, 3, true);
	}
});

Ayın sadece 1,7 ve 8. günleri pasif olsun;

$('#datepicker').datepicker({
	beforeShowDay: function(tarih){
		return gunFiltre(tarih, 0, true, [1, 7, 8]);
	}
});

Ayın sadece 1,5 ve 12. günleri aktif olsun;

$('#datepicker').datepicker({
	beforeShowDay: function(tarih){
		return gunFiltre(tarih, 0, true, [], [1,5,12]);
	}
});

jQuery ZeroClipboard ile Yazı Kopyalama İşlemi

Bildiğiniz gibi ctrl + c yaparak yazıları kopyalama işlemi yapabiliyoruz.. Ancak bunu herhangi bir butona tıklandığında yapabilsek güzel olmaz mıydı? Evet, bu işlemi yapabilmek için ZeroClipboard eklentisini kullanarak çok kolay bir şekilde bu işlemi kusursuz hale getirebiliriz.. O halde başlamadan önce eklenti yazarı SteamDev‘e teşekkürlerimizi sunalım 🙂 Ve hadi başlayalım..

Adım 1

İlk olarak http://steamdev.com/zclip/ adresine gidelim ve Download altındaki sıkıştırılmış js dosyası ve swf dosyalarını bilgisayarımıza indirelim..

http://steamdev.com/zclip/js/jquery.zclip.min.jshttp://zeroclipboard.googlecode.com/svn-history/r10/trunk/ZeroClipboard.swf

Adım 2

Şimdide jquery kütüphanemizi indirelim.
http://jquery.com/download/

Adım 3

İndirdiklerimizi bir klasör altında toplayalım.. Ve ek olarak index.html ve style.css dosyalarını oluşturalım.

Adım 4

index.html dosyasını açalım ve standart html etiketlerini yazalım. Daha sonra gerekli dosyalarımızı dahil edelim.. Yani kısaca şu kodlarımızı yazalım;

<!DOCTYPE HTML>
<html lang="tr">
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="jquery.zclip.min.js"></script>
	<link rel="stylesheet" href="style.css" />
</head>
<body>

</body>
</html>

Adım 5

Gerekli html kodlarımız ise şu şekilde;

<input type="text" class="input1" value="test et!" />
<button class="kopyala" data-content=".input1">Kopyala</button>

Burada data-content değeri olarak hangi nesneyi belirtirseniz onun içeriğini alır. (Bir form nesnesi olduğu sürece.)

Adım 6

Şimdi geldi jquery kısmına.. Çok basit bir kullanımı var;

$(function(){

	$('button.kopyala').each(function(){
		var content = $(this).data('content');
		$(this).zclip({
			path: 'ZeroClipboard.swf',
			copy: $(content).val()
		});
	});
	
});

Gördüğünüz gibi tüm button.kopyala nesnelerini bir döngüye soktuk ve tek tek content değerlerini alıp zclip() eklentisini uyguladık. Aslında tıklama işlemi ilede bunu yapabilirdik ancak ilk etapta görmeyeceği için sorun olurdu.. Her neyse, şimdi test etmek için butona basalım ve sonucu görelim..

Evet, şimdi şöyle bir sıkıntımız var.. Örneğin input’un içeriğine yeni bir şeyler yazıp kopyala dediğimizde yine eskisi neyse onu kopyalıyor.. Bu yüzden eğer böyle bir durumda güncel olanı almak isterseniz input’a bir keyup() uygulayabilirsiniz. Yani jquery kodlarımızı şöyle değiştireceğiz;

$(function(){

	$('button.kopyala').each(function(){
		var elem = $(this),
			content = elem.data('content');
		elem.zclip({
			path: 'ZeroClipboard.swf',
			copy: $(content).val()
		});
		$(content).keyup(function(){
			elem.zclip({
				path: 'ZeroClipboard.swf',
				copy: $(content).val()
			});
		});
	});
	
});

Ama tabi bunu pek tavsiye etmem orası ayrı 🙂 Bir çok kez ekliyor çünkü zclip’i. Dolayısı ile sabit metinleri kopyalatmak için ideal kullanım ilk örnekteki gibi olanıdır.

İndir

http://yadi.sk/d/197f74Cg7ZDzK

JavaScript ve jQuery’de Fonksiyon Varlık Kontrolü

Bazı durumlarda eklenti kullanmamız gerekir.. Ancak eklentiye her sayfada ihtiyaç olmadığı için sadece ihtiyaç olan sayfada eklenti dosyalarını yükletiriz.. Ancak genel js dosyası tek olduğu için, diğer sayfalarda bu eklenti olmadığından eklenti tanımından sonraki kodlar çalışmaz hale gelir.. Bu gibi durumlarda o kod satırını eğer eklenti var ise çalıştırmak en sağlıklı çözüm olacaktır.. Peki bunu nasıl yapacağız? Öncelikle bu jQuery eklentisi olacağından jQuery’nin bize sunmuş olduğu $.isFunction() fonksiyonunu kullanacağız.. Ve şu şekilde kontrol işlemini yapacağız;

if ( $.isFunction($.fn.eklentiAdi) ){
    /* eklentiAdi adlı eklentiyi uygulamak için gerekli kodlar */
}

Ya da şöylede kontrol edebiliriz;

if ( $().eklentiAdi ){
    /* eklentiAdi adlı eklentiyi uygulamak için gerekli kodlar */
}

Bu şekilde eğer böyle bir eklenti var ise o kod bloğu çalışacaktır ve altındaki kodları etkilemeyecektir.. Bunun bir benzeride jquery fonksiyonlarıdır.. Onun içinde kontrol şöyledir;

$.test = function(){}
if ( $.isFunction($.test) ){
    alert('test fonksiyonu var!');
}

javascript ile fonksiyon kontrolü için ise;

function test(){}
if ( typeof test == 'function' ){
    alert('fonksiyon mevcut!');
}

Ya da;

function erbilen(){}
if ( window.erbilen ){
    alert('erbilen fonksiyonu mevcut!');
}

Kolay gelsin 🙂

jQuery ile Sürükleme (Drag) İşlemi

Aslında başlık tam olarak durumu özetlemiyor.. Ancak en genel tanım bu şekilde sanıyorum 🙂 Biz dersimizde bir nesnenin genişlik ve yüksekliği yeniden boyutlandırsakta aslında yaptığımz şey fare olaylarıydı.. Yararlı olması dileğiyle..Dikkat: Firefox’da drag içinde a olduğunda sorun veriyor.. Direk drag nesnesi ile yaparsanız sorun çözülecektir.

Ajax Hatalarını Bulmak

Bazen jquery’de ajax ile çalışırken hata yapıyoruz.. Özellikle json formatında geriye değer döndürmeye çalıştığımızda ve php dosyasında bir hata yaptığımızda hatanın nerede olduğunu bulamıyoruz.. En azından dosyayı açıp bakmadığımız sürece.. Bu gibi durumlarda ne yapmalı, hataları nasıl kolayca tespit edebilir ve giderebiliriz bu videoda bunları anlatmaya çalıştım..

jQuery Hedef Dışı Tıklama

Mevcut nesnemiz dışında herhangi bir yere tıklandığında bunu yakalayıp işlem yapmak için yani hedef dışı tıklamayı yakalamak için nasıl bir yol izleyeceğimizi bu derste sizlere anlatmaya çalıştım.. Yararlı olması dileğiyle..

İNDİR

Derste dosyalarına aşağıdaki bağlantıdan indirebilirsiniz;
http://yadi.sk/d/M988C-Vq4P518