Jquery İpuçları - 2

Uzun bir aradan sonra bir jquery yazısıyla daha karşınızdayım. Fazla uzatmadan devam edelim.

1) Linklerde "target=_blank" alternatifi
Bildiğiniz gibi XHTML 1.0 Strict tipinde DOCTYPE kullanırsanız, web sayfanız W3C'nin doğrulamasından geçemiyor. Bu durumdan kurtulmak için aşağıdaki Jquery kod parçasını kullanabilirsiniz.

$('a[@rel$='external']').click(function(){
this.target = "_blank";
});

/*
Kullanım:
<a href="http://jquery-tr.blogspot.com/" rel="external"></a><a href="http://jquery-tr.blogspot.com/" rel="external">JQuery-Tr</a>
*/

2) Sağ Tıklamanın Açılan Menüyü Engelleme
Mouse'un sağ tuşuna tıklayınca açılan menüyü pasif hale getirmek için:

$(document).ready(function(){
$(document).bind("contextmenu",function(e){
return false;
});
});

3) Eşleşen Eleman Sayısını Bulmak
Çok küçük ama işe yarayan bir kod. Eşleşen eleman sayısını döndürür:

$('element').size();

Şimdilik bu kadar. Devamı gelecek...

JQuery İpuçları-1

Uzun bir aradan sonra bir jquery makalesiyle karşınızdayım :)

1) Çakışmayı engelleme
Eğer projelerinizde JQuery ile birlikte mootools, dojo vs... gibi bir javascript kütüphanesi de kullanıyorsanız işaretini kullanmanız bir karmaşa yaratacaktır. Bunu için dolar işareti yerine başka bir değişken atayabilirsiniz:

var $j = jQuery.noConflict();
$j('#myDiv').hide();

2) Seçilen elemanların toplamı
Seçtiğiniz nesnelerin sayısını aşağıdaki metodu kullanarak bulabilirsiniz:

$('.someClass').length;

3) Checkbox'ın işaretli olup olmadığını kontrol etme
Bir checkbox'ın seçili olup olmadığının kontrolunu aşağıdaki gibi sağlayabilirsiniz:

// 1. Yol
$('#checkBox').attr('checked');

// 2. Yol
$('#edit-checkbox-id').is(':checked');

// 3. Yol
$("[:checkbox]:checked").each(
function() {

}
);

ORJİNAL MAKALE

Lightbox Clone

Bugün lightbox'ın artık ne kadar sıkıcı olmaya başladığından bahsediyorduk. Artık kafamızı nereye çevirsek lightbox görür olduk. Bende bunu üzerine biraz araştırma yapıp Lighbox benzeri eklentiler aradım ve kayda değer 3 tane buldum.

Bunlardan birincisi prettyPhoto:
Lightbox'la aynı görevi görüyor diyebiliriz.
Kullanımı Demo

İkincisi FancyZoom:
Zoombox ve benzerleri tarzında bir klon.
Kullanımı Demo

Bir diğer klon Gallerific:
Aslında tam olarak bir klon denemez. Adı üstünde galeri dememiz daha dogru olabilir.
Kullanımı Demo

Dördüncü, son ve benim en çok hoşuma giden eklenti popeye:
Hem galeri, hem lightbox klonu diyebiliriz.
Kullanımı Demo

s3Slider Slideshow JQuery Plugin

Bugünkü eklentimiz flashın pabucunu dama atacak cinsten :) Adı s3Slider. Görsel olarak güzel slideshowlar hazırlamamıza yarıyor. Hatta bu slideshowları rahatlıkla header olarak da kullanabiliriz.

Kullanımı:
Link

Demo

JCrop Image Cropping Plugin

Benim gibi web yazılım geliştiricilerinin en çok uğraştığı işlerden biridir görsel boyutlandırma ve kırpma. Hatta bazen istediğimiz sonucu elde etmek için uzun süreler uğraşmamız gerekebilir. JCrop ise bu işleri tamamen kullanıcıya bırakıp bizi zahmetten kurtaran bir jquery eklentisi. Kullanımı da işlevine nazaran oldukça kolay.

Ayrıntılı bilgi için :
Link

Örnek ve demolar

JQuery Corner

Son zamanlarda en çok kullandığım Jquery eklentisi diyebilirim Corner için. Seçilen div'in köşeleri yuvarlamak için kullanılıyor JQuery Corner. Yani sizi uzun Css işlemlerinden kurtarıyor bir satırlık kodla. Yok ben yuvarlak köşeler istemiyorum daha farklı şeyler denemek istiyorum diyorsanız, sizin için de çok seçenek var Corner'da.

Kullanımı:

$("#div-id").corner();

Ayrıntılı Bilgi:
Link
Kaynak

Eğitseller ve JQuery Delay Plugin

Aslında JQuery temellerini anlamadan buradaki Pluginleri kullanmak çok kolay değil. Ama daha önce dediğim gibi burdaki amacım kaynakları biraraya toplamak. Çünkü internet'te bir Google'ladığınız zaman JQuery ile ilgili sonsuz sayıda kaynak bulabilirsiniz. Ayrıca JQuery'nin resmi sitesindeki İngilizce ve Türkçe Eğitsellerden de yararlanabilirsiniz.

Neyse biz dönelim konumuza. JQuery Delay Plugin geçen hafta böyle birşey lazım olduğunda rastladığım, JQuery fonksiyonlarının arasına gecikme süresi koymaya yarayan bir eklenti.

İndir

Kullanımı:

// #link tıklandığında çağrılacak fonksiyon...
$("#link").click(function(){

// 1 saniye bekle
$(this).delay(1000,function(){

// #hello göster
$("#hello").css("display","block");

// Sonra 3 saniye bekle...
$(this).delay(3000,function(){

// Yazı rengini mavi yap
$("#hello").css("color","blue");

});
});
});