Zincirleme (Chain) Metodu

Bir çoğunuz yazılmış sınıfları incelediğinizde şu şekilde bir yazım tarzıyla karşılaşmış olabilirsiniz.

$text = new Text();
echo $text->write('Tayfun Erbilen')->color('red')->fontSize('20px')->show();

Bu örneğe ait sınıfımızı oluşturalım hemen.

class Text {
	
	private $text;
	private $style;

	public function write($text)
	{
		$this->text = $text;
	}

	public function color($color)
	{
		$this->style .= 'color: ' . $color . ';';
	}

	public function fontSize($size)
	{
		$this->style .= 'font-size: ' . $size . ';';
	}

	public function show()
	{
		return '<div style="' . $this->style . '">' . $this->text . '</div>';
	}

}

Ancak bu örnek hata verecektir. Çünkü bu şekilde bir yazım tarzı için yapmanız gereken $this objenizi geriye döndürmek. Yani sınıfımızı şu şekilde düzenlersek eğer;

class Text {
	
	private $text;
	private $style;

	public function write($text)
	{
		$this->text = $text;
		return $this;
	}

	public function color($color)
	{
		$this->style .= 'color: ' . $color . ';';
		return $this;
	}

	public function fontSize($size)
	{
		$this->style .= 'font-size: ' . $size . ';';
		return $this;
	}

	public function show()
	{
		return '<div style="' . $this->style . '">' . $this->text . '</div>';
	}

}

Artık bu şekilde bir kullanımı yapmaya hazırız.

Chain (zincirleme) metodu aynı zamanda jQuery içinde aynı mantıkta çalışır. Muhtemelen her dil için bu mantıktadır. Örneğin jQuery’de bir örnek vermem gerekirse, basit bir eklenti hazırlayalım.

$.fn.Text = function(text){
  $(this).html(text);
};

$('body').Text('Tayfun Erbilen').css({
    'color': 'red',
    'font-size': '20px'
  });

Bu şekilde bir zincirleme kullanımda çalışmayacaktır. Çünkü bir this objesi döndürmedik eklentimizde geriye. Eğer geriye this’i döndürürsek geriye kalan jQuery metodlarını da zincirleme olarak kullanabilirsiniz. O halde buna göre düzelttiğimizde son kod parçamız şöyle olacak;

$.fn.Text = function(text){
  $(this).html(text);
  return this;
};

$('body').Text('Tayfun Erbilen').css({
    'color': 'red',
    'font-size': '20px'
  });

jQuery Touchswipe Eklentisi ile Parmak Hareketlerini Yakalamak

Telefon ve Tabletlerde ekrana parmak ile dokunduğumuzda bunu yakalayıp işlem yapmamızı sağlayacak güzel bir eklenti tanıtacağım size.
Ben bu eklentiyi kullanarak parmak ile kaydırarak açılıp kapanan bir yan menü örneği hazırladım videoda.
Umarım işinize yarar, zira ben responsive dökümlerde bu eklentisi sıkça kullanıyorum.
Okumaya devam et jQuery Touchswipe Eklentisi ile Parmak Hareketlerini Yakalamak

jQuery ile Nesneleri Efektif Değiştirmek

Öncelikle bu işlemi isotope adında bir eklenti ile yapacağız.
Genellikle portfolyö kısımlarında tab içerikleri değiştiğinde karşılaştığınızı düşündüğüm bir eklentidir.
Bu eklenti sayesinde içerikleri efektif bir şekilde değiştirebiliyorsunuz.
Bende videoda sizin için nasıl kullanacağınızı anlattım.
Okumaya devam et jQuery ile Nesneleri Efektif Değiştirmek

Hangisi daha hızlı? ($().data(xx) ve $.data(xx))

Bildiğiniz gibi data değerlerini almak için .data() metodunu kullanıyoruz. Ancak performans olarak değerlendirdiğimizde aslında $.data() fonksiyon metodunu kullanmak daha avantajlı.
Okumaya devam et Hangisi daha hızlı? ($().data(xx) ve $.data(xx))

jQuery ile Basit Checkbox ve Radio Özelleştirmesi

Çok basit şekilde checkbox ve radio inputlarını özelleştirebilirsiniz. İlk olarak radio ve checkbox için html yapılarına göz atalım;

<label>
    <input type="radio" name="cinsiyet" checked />
    Kadın
</label>
<label>
    <input type="radio" name="cinsiyet" />
    Erkek
</label>

Bu radio inputu içindi. Gördüğünüz gibi label kullanıyoruz. Sebebi ise labele tıklandığında otomatik olarak radio butonunu kendisi seçeceği için jquery’de ekstra bir şey yapmamıza gerek kalmıyor. Aynı şekilde checkbox içinse yapı şöyle;

<label>
    <input type="checkbox" value="1" name="test" checked />
    Kullanım Koşulları'nı okudum, kabul ediyorum.
</label>

Okumaya devam et jQuery ile Basit Checkbox ve Radio Özelleştirmesi

jQuery .trigger() Metodu

Bir nesne için atadığımız olayın gerçekleşmesini sağlıyor. Örneğin yukarı çık örneğimiz olsun.

$('#up').on('click', function(e){
    $('html, body').animate({
        scrollTop: 0
    }, 1500);
    e.preventDefault();
});

Şimdi #up nesnesinin click eventını tıklamadan nasıl tetiklerim? Tabi ki trigger ile.. Yani;

$('#up').trigger('click');

dediğim zaman sanki #up nesnesine tıklanmış gibi yazdığım click eventım çalışacaktır.
Bunu özellikle slider’da çok kullanıyorum ben, sizinde işinize yarayacağına eminim 🙂

Daha geniş kullanımı için: http://api.jquery.com/trigger/

kolay gelsin 🙂

jQuery .not() Metodu

Hariç anlamına gelir. Mesela bir nesne seçtik ama atıyorum 2. indexli nesne hariç. Ya da atıyorum .active classı olan nesne hariç. Hariçler haricinde bize kalan nesnede işlem yapmamızı sağlıyor.
Mesela seçtiğimiz nesneler içinde active classı yoksa tıklama işlemi yaptıralım;

<ul>
    <li>test</li>
    <li>test2</li>
    <li class="active">test3</li>
    <li>test4</li>
</ul>
$('.menu li').not('.active').on('click', function(e){
    alert('ta da!');
});

Verdiğim örnekte 3. lide click işlemi olmayacaktır çünkü active sınıfına sahip ve benim istediğim olayım ona sahip olmayan nesnelerde çalışıyor not sayesinde.

jQuery .filter() Metodu

jQuery’de bulunan metodlar içinde en sevdiğimdir. Çünkü büyük ölçüde işimi kolaylaştırıyor.
Örneğin bir nesneyi değişkene aktardım.

var tab = $('.tab li');

Şimdi burada ilk elemanı seçip addClass metodunu uygulamam gerektiğinde bunu filter ile belirtiyorum.

tab.filter(':first').addClass('active');

Böylece değişkenin taşıdığı nesnelerde filtreleme işlemi yapıp ilk elemanı seçmemi sağlıyor.
Tabi sadece ilk eleman için değil :not(), :eq(), this vb. bir çok şey için geçerlidir. Örneğin küçük bir tab uygulaması yapacak olsaydık işimiz çok kısa olacaktı;

var tab = $('.tab li'),
content = $('.tab-content');

content.filter(':not(:first)').hide();
tab.filter(':first').addClass('active').end().on('click', function(e){
    tab.removeClass('active').filter(this).addClass('active');
    content.hide().filter(':eq(' + $(this).index() + ')').show();
    e.preventDefault();
});

Ya da örneğin daha farklı bir örnek verelim;

$('.item').filter(function(index){
    return $( this ).hasClass('boxed');
}).addClass('active');

http://api.jquery.com/filter/

İşte böyle, kolay gelsin 🙂

jQuery .end() Metodu

Sıkça kullandığım bir metoddur kendisi.
Yaptığı iş ise, ilk seçilen elemana geri dönmesi. Yani örnek vermek gerekirse;

$('.item').find('a').addClass('external-url').end().on('click', function(e){
   alert('test');
});

Burada item içerisinde a nesnelerini bulup sınıf atadık. Eğer end metodunu kullanmamış olsaydık click işlemi a nesneleri için geçerli olacaktı. Ancak end kullandığımız için tekrar başa sardık ve filtreleme işlemlerini önemsemeden eventımızı uyguladık.
http://api.jquery.com/end/

Kolay gelsin.

jQuery Scrollbar Eklentisi

Sizlere perfectScrollbar adında bir jquery scrollbar eklentisini tanıtacağım.. Uzun zamandır kendi projelerimde kullanıyorum, jquery ile özel scrollbar yapmak isteyenler için ideal bir eklenti.
Okumaya devam et jQuery Scrollbar Eklentisi