jQuery ipuçlarını yayınlamaya devam ediyorum.

1- Dinamik oluşturulan elementlere live() ile olay atama

Sayfaya dinamik olarak eklenen içeriklerde veya ajax ile doldurduğumuz içeriklerdeki elemanlara bir olay atadığımızda(click, mouseover vd.) çalışmayacaktır. jQuery geliştiricileri bunun için live() fonksiyonunu geliştirmiş.

$('a.acilSusam').live('mouseover', function() {
 // yapilacak islemler
});

2 – Tarayıcı Penceresinin Boyutlarını Değişmesini Yakalamak

Belki ara sıra lazım olacak bir kod ama bazen gerekiyor işte. Pencere boyutu her değiştiğine bazı işlemleri yapmak sistemimizi yorabilir diye setTimeout yardımı ile belli aralıklarla bunu yaptırıyoruz.

function pencereBoyutuDegisti() {
	alert("Değişti");
};

var resizeTimer = null;
$(window).bind('resize', function() {
    if (resizeTimer) clearTimeout(resizeTimer);
    resizeTimer = setTimeout(pencereBoyutuDegisti, 100);
});

3 – Element miktarını bulmak

Bir dokümanda seçilen elemandan kaç adet olduğu bulmak için;

	$('element').size();

4 – Bir elemanın index değerini bulmak

index değerini bulmanın farklı bir yolu

$("ul > li").click(function () {
	var index = $(this).prevAll().length;
});

5- Bir elemanın görünür olup olmadığını yakalamak

if($(".eleman").is(":visible")) {
    alert('Burda');
}

6- Kaç tane alt elemanı(çocuk elemanı) var

<div id="foo">
<div id="bar"></div>
<div id="baz">
<div id="biz">
</div>
<span><span>
</div>

//kac tane alt elemanı oldugunu bulmak icin
$("#foo > div").length

7- jQuery Kopya Kağıdı(Cheat Sheet)

jQuery’nini bir çok özelliği var ve bunları aklımızda tutma imkanımız yok. Bir kopya kağıdı işimize yaraya bilir.

http://www.futurecolors.ru/jquery/

Burada son sürümün kopya kağıdı mevcut. Bende css3 özelliklerini kullanarak biraz renklendirdim. Benim renklendirdiğim(CSS3 içerir, herisi göremez)

8 – Select Elemanı ipuçları

// secili olan ögenin metnini almak
$("#myselect option:selected").text();

// secili olan ögenin degerini almak icin
$("#myselect option:selected").val();

// secili ogenin index degeri
$("#myselect option").index($("#myselect option:selected"));

// indeksi 2 olan ögeyi seçili hale getirmek
$("#myselect option:eq(2)").attr("selected", "selected");

Kaynaklar

• http://blog.kenmoredesign.com/2009/02/02/useful-jquery-snippets/
• http://tympanus.net/codrops/2010/01/07/some-useful-javascript-jquery-snippets-part-2/
• http://www.catswhocode.com/blog/10-jquery-snippets-for-efficient-developers
• http://tympanus.net/codrops/2010/01/08/some-useful-javascript-jquery-snippets-part-3/
• http://www.opensourcehunter.com/2010/02/27/26-cool-and-usefull-jquery-tips-tricks-solutions/

Aslında ben sIFR kullanımını daha önce anlattım.  Metin Yerine Resim/Flash Ekleme Teknikleri (Image Replacement) yazısının içinde sIFR kullanımını anlattım. Burada sIFR’ın yeni sürümünü ve ipuçlarını yazacağım. 

sIFR3′ün son sürümünü http://dev.novemberborn.net/sifr3/nightlies/ adresinden en üstteki bağlantıdan son sürümü indirebilirsiniz.

Metin Yerine Resim/Flash Ekleme Teknikleri (Image Replacement) yazısında genel olarak sIFR’ın nasıl ekleneceği konusunda bilgi verdik. Bu nedenle işin bu kısmını geçip sIFR3 ile yeni ne geldi onu göstereceğiz ve artı ipuçları vereceğiz.

sFIR 2 ile sIFR 3 eklenen dosya farkları

İlk olarak sIRF 2′den farklı olarak sIFR 3 eklene dosyalar farklıdır ve özellik tanımları için ek olarak sifr-config.js dosyası ile daha bir düzen getirilmiştir.

sIFR için sayfamıza eklememiz gereken dosyalar.

• style/sIFR-print.css
• style/sIFR-screen.css
• js/sifr-config.js
• js/sifr.js
• swf/humanist.swf (Sizin oluşturduğunuz swf dosya ismi)

sifr-debug.js dosyasını sadece deneme yaparken kolay hata yakalamak için kullanmamız içindir, yayına atarken bu dosyayı eklemeye gerek yok.

sIFR örneklerimizi kendi bilgisayarımızda çalıştırmaya çalıştığımızda görünmeyecektir, sadece web sunucusu kurulu makinelerde çalışacaktır. Bu daha önceden meydana gelen bazı sorunları gidermek için eklenmiş bir özelliktir.

<link rel="stylesheet" href="style/sIFR-screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style/sIFR-print.css" type="text/css" media="print" />
<script type="text/javascript" src="js/sifr.js"></script>
<script type="text/javascript" src="js/sifr-config.js"></script>

Yukarıdaki bir ekleme ile sIFR harici dosyalarını sayfamıza eklemeliyiz.

Bu dosyaları yerlerine koyup sayfamıza kodu ekledikten sonra yapacağımız ilk şey sifr-config.js dosyasını açıp swf dosyamızın yerini doğru bir şekilde eklemek olmalıdır.

var yazi_tipi = {
     src: '/dosya_yolu/yazi_tipi.swf'
};
sIFR.activate(yazi_tipi);
sIFR.replace(yazi_tipi, {
       selector: 'h2'
});

Şeklinde örnek aldığımız kodlardan yazi_tipi adı geçen yerlere kendi dosya ismimizi yazmalıyız.

sIFR metnine Stil Vermek

sIFR ile eklediğimiz metinlere css kodları ile özellik tanımı yapabiliriz. Alışık olduğumuz CSS özellik tanımlarını kullanma olanağı vererek bize çok büyük avantaj sağlıyor.

sIFR.replace(yazi_tipi, {
      selector: 'h2',
      css: [
      '.sIFR-root { font-size:36px; font-weight:bold; color:#ff0000; letter-spacing: -1.5}'
      ]
});

Örnek olması için yukarıda kodları yazdım, ancak bu kısma istediğimiz kodları ekleyebiliriz. letter-spacing tanımı ile harfler arası mesafeyi ayarlayabiliriz. Değeri verirken birimini yazmıyoruz. Benzer şekilde bir çok özellik ekleyebiliriz.

Satır yüksekliğini ayarlamak

sIFR.replace(yazi_tipi, {
      selector: 'h2',
      css: [
      '.sIFR-root { font-size:36px; font-weight:bold; leading: 1; letter-spacing: -1.5}'
      ]
});

leading: 1 tanımı satır yüksekliğini(line-height tanımı yerine kullanılır) ayarlamak için kullanılır. Değer verilirken birim kullanılmaz. Eksi değer alabilir.

sIFR metinlerine bağlantı eklemek ve stil tanımlarını yapmak

sIFR uygulana metinlere bağlantı(<a>) ekleyebiliriz, bağlantı eklediğimizde bunun için birde stil tanımı yapmalıyız.

HTML kodu

<h2><a href="#">Başlık</a></h2>

sifr-config.js dosyasında

sIFR.replace(yazi_tipi, {
  selector: 'h2'
  ,css: [
    '.sIFR-root { text-align: center; font-weight: bold; }'
    ,'a { text-decoration: none; }'
    ,'a:link { color: #000000; }'
    ,'a:hover { color: #CCCCCC; }'
  ]
});

Yukarıdaki tanımlama ile eklediğimiz bağlantının farklı durumları içinde tanım yapabiliyoruz. 

Benzer şekilde sIFR uyguladığımız eleman içindeki elemanlarada stil ekleyebiliriz. Örneğin

sIFR.replace(yazi_tipi, {
       selector: 'h2',
       css: [
       '.sIFR-root { font-size:24px; font-weight:normal; color:#9f0000; }',
       'em { font-style:italic; }',
       'strong { font-weight:bold; color:#333333; }'
       ]
});

Böylece sIFR içindeki her elemana farklı renk tanımı yapabiliriz.

Saydam(transparent) Özelliği Vermek

sIFR ile eklediğimiz metnin altında kalan alanlar nedeni ile bazen saydam olarak eklemek isteriz.  Yapmamız gereken çok basittir. Bir satır kod ile ardalanı saydam yapabiliriz.

sIFR.replace(yazi_tipi, {
      selector: 'h2',
      css: [
      '.sIFR-root { font-size:36px; font-weight:bold; color:#ff0000; }'
      ],
wmode: 'transparent'
});

wmode: ‘transparent’ eklemesi işimizi görecektir.

Dinamik Oluşturulan İçerikteki Metinlere sFIR Uygulamak

Örneğin sekmeli bir içeriğin içindeki başlıklara sIFR uyguladığımızda sFIR sayfa yüklendiğinde uygulandığından diğer sekmelerdeki metinlere uygulanmayacaktır. Diğer sekmelerdeki metinlerede uygulamak için her sekme için uygulanan sFIR fonksiyonu çağırmalıyız.

$(tabs).click(function () {
    // her sekme icin uygulana tanimlar
    //diger eylemler

    // uygulana sFIR fonksiyonunun tetikliyoruz.
    sIFR.replace(baslik, {
        selector: 'h1'
        ,wmode: 'transparent'
        ,css: [
          '.sIFR-root { margin:0; color: #009200; font-size:20px;}'
        ]
    });

});

Sonuç

Birçok projemde kullandım sFIR metodunu. Gördüklerim buraya yazmayaçalıştım. Eğer sizinde eklemek istediğiniz ipuçları varsa yorum kısmınaeklerseniz güzel bir dokümantasyon oluşturmuş oluruz.

Kaynaklar

• http://v4.designintellection.com/this-is-how-you-get-sifr-to-work/
• http://net.tutsplus.com/tutorials/javascript-ajax/how-to-implement-sifr3-into-your-website/

1- toggle() ile kolayca gizle/göster yapmak.

Javascript ile en çok yaptığımız işlerden biriydi bir bağlantıya veya elemana tıklayınca açılan bir daha tıklayınca kapanan alanlar oluşturmak. jQuery bu iş için bize toggle() fonksiyonunu tanımlamış. Çeşitli kullanım şekilleri olsada ben size burada en basit şeklini anlatacağım.

$('p.hidden').toggle ();

Bu kadar basit bir kod ile işlem tamamdır. toggle() fonksiyonuna çeşitli animasyonlar ve işler ekleyebiliyoruz. Gayet kullanışlı bir özellik.

2- toggleClass() ile toogle uyguladığımız elemanlara sınıf tanımlama

Yukarıda yaptığımız uygulamaya ek olarak tetiklenen elemana bir sınıf tanımlamak için

$('p.hidden').toggleClass ("acik");

bu kod sayesinde mesela çok basit şekilde aç-kapa butonu yapabiliriz.

3- click() ile tetiklenen bağlantılarda ie6 sorununu gidermek

Bir bağlantıya jquery ile erişip click() metodunu uyguladığımızda ie6 ile sorun yaşıyoruz. Ben bu sorun için bir çözüm bulmuştum ancak Hüseyin Mert daha iyi bir çözüm buldu. Ben bu çözümü burada sizlerle paylaşmak istedim.

$("a").click(function(event){
    event.preventDefault();
    // yapılacaklar
});

Böylece sorunu aşmış oluyoruz. Hüseyin Mert’e teşekkürler tekrar.

4 – Metot Zincirleme özelliği ile daha kısa kodlar üretmek

Bir çok metodu ard arda aynı elemana yazmaktansa zincirleme kullanabilme özelliği sunuyor bize jQuery.

$('p.ilkParagraf').css ('color', '#ff0000').text ('Giriş').addClass ('yazi').fadeTo (1000, 1);

Yukarıdaki örnekte görüldüğü gibi ard arda metotları kullanabiliriz. Ancak çok fazla kullanmanın performansı etkilediğini unutmadan bu özelliği kullanalım.

5- Kontrol kutularının(checkbox) kontrolü

jquery ile kontrol kutularını kontrol etmenin bir kaç yolu var

if($('#deneme:checked').val() != null)
{
	// işaretli ise bunu yap
}
//veya
if($('#deneme:checked').length != 0)
{
	// işaretli ise bunu yap
}
//veya
$('input[name=deneme]').is(':checked')
$('input[name=deneme]').attr('checked')
// işaretli veya degil
$('input[name=deneme]').attr('checked', true);

6 – Arama metinlerini değiştirmek

Arama kutuları içine açıklayıcı metinler yazarız. “Anahtar Kelime”, “Arama” vb. gibi. bu metinleri yazarız, ancak kullanıcı bu alana odaklandığında bu metni kaldırmalıyız ve kullanıcı bir şey yazmadan çıkarsa o zamanda genel yazdığımız metni geri getirmeliyiz.

var aramaKutusu = $("#aramaAlani");
var aramaKutusuBasDeg = "Aranacak Kelime";
aramaKutusu.attr("value", aramaKutusuBasDeg);

aramaKutusu.focus(function(){
	if(jQuery.trim($(this).attr("value")) == aramaKutusuBasDeg) $(this).attr("value", "");
});

aramaKutusu.blur(function(){
	if(jQuery.trim($(this).attr("value")) == "") $(this).attr("value", aramaKutusuBasDeg);
})

Güncelleme: Bu kullanımın daha basit bir şekli var. yedincisenol’un yazdığı kod daha basit ve kullanışlı.

function doldur(o){ if (o.value==o.defaultValue){o.value="";} else if(o.value==""){o.value=o.defaultValue;}o.onblur=function(){doldur(o)}}

ve kodu sonra çağırmak için (jquery ile)

$("#inputId").focus(function(){ doldur(this) });

veya html içinden

<input name="adınız" value="Adınızı girini" onfocus="doldur(this)"/>

Kod için yedincisenol’a teşekkürler

7- Zebra tablo yapmak

Tablo okunabilirliğini arttırmak için bir satır farklı bir renk veya stil tanımlarız. Bunu javascript ile uzun yoldan yaparken jquery ile tek satır kod ile yapabiliyoruz

$("tr:nth-child(odd)").addClass("farkliSatir");

8 – Çok tekrarlanan seçicileri bir değişkene tanımlamak

$('p.ilkParagraf').css ('color', '#000000');
$('p.ilkParagraf').text ('Giriş');
$('p.ilkParagraf').addClass ('yazi');
$('p.ilkParagraf').fadeTo (1000, 1);

Yukarıdaki gibi bir kullanımda çok fazla tekrarlayan bir seçiciye bir değişkene atayıp daha optimum bir kod elde edebiliriz.

var $p = $('p.ilkParagraf');
$p.css ('color', '#000000');
$p.text ('Giriş');
$p.addClass ('yazi');
$p.fadeTo (1000, 1);

Bu kullanım ile eleman ilk başta bir değişkene atanıp ön belleğe alınıyor ve daha hızlı erişiliyor.

Kaynaklar

• http://ff.im/dAPK6
• http://www.myinkblog.com/2009/08/04/10-tips-for-writing-better-jquery-code/
• http://drupal.org/node/116548
• http://snipplr.com/view/25148/jquery-search-text-replace/
• http://docs.google.com/Doc?docid=0AXwjxxctLLc5ZGZwYnQ3Z2RfNTBkZjZ3MnJmOA&hl=tr

1- jQuery kütüphanemizi Google’da host etmek: google bize jQuery kütüphanesini kendi hostu üzerinden yüklememizi sağlıyor. Bu bize ön belleğe alınana dosyanın daha hızlı yüklenmesini sağlar.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
 $(document).ready(function() {
	//isler burada
 });
</script>

Bu sayede jquery kütüphanesini her projeye eklerken kopyala yapıştır ile de uğraşmak zorunda kalmıyoruz. İstediğimiz her yerde jQuery kullanma imkanıda veriyor bize bu kod.

2- jquery kısaltması: jquery kodlarımzı yazarken bazen 

$(document).ready(function (){});

aklımıza gelmeye bilir

$(function (){});

bu daha kolay ve akılda kalıcı bence

3- fare üzerinde iken ve üzerinden gittiğinde

$("li").hover(
function () {
  // fare üzerinde iken bunu yap
},
function () {
  // fare kaçınca bunu yap
}
);

4- not seçicisi: Bir seri elemana yaptırdığımız bir işi aradan bir tane elemanın yapmasını istiyorsak bu seçiciyi uygulayabiliriz.

$('ul#sekme li a').not("ul li#diger a").click(function(){
    // yapılacak işler
});

Yukarıdaki kodlamada biz sekmelere bir tanım yapıyoruz ama en son sekmeye tıklayınca bu işlemin yapılmasını istemiyoruz. Bu iş için biçilmiş kaftan :not seçicisi

5- siblings seçicisi liste ve benzeri aynı seviyedeki elemanlar üzerinde etkileşimli erişim sağlayan güzel bir seçici. Daha önce http://www.fatihhayrioglu.com/jquery-ile-basit-sekme-yapimi/ anlatırken kullanmıştım.

$(this).parent('li').addClass('sekmeSecili').siblings().removeClass('sekmeSecili');

Bu kodda da görüldüğü gibi tıklanan sekmeye sekmeSecili sınıfı atıyoruz diğer sekmelerde aynı sınıf varsa onları kaldırıyoruz.

6- HTML içine jQuery den eleman eklemek:

var ekleBunu = $('<div></div>');
ekleBunu.attr("id","yeniKatman").appendTo("body");

7- Bir elemanın varlığını kontrol etmek

if ($("#someDiv").length) {
  // eğer varsa bunu yap
}

8- Kolay kullanılan tarayıcıyı yakalama

$.browser.safari
$.browser.msie
$.browser.mozilla

tarayıcı sürümünü yakalamak için

if ($.browser.msie && $.browser.version <= 7 ) 

Kaynaklar

• http://www.ajaxlines.com/ajax/stuff/article/_reasons_why_you_should_let_google_host_jquery_for_you.php
• http://stackoverflow.com/questions/182630/jquery-tips-and-tricks
• http://docs.jquery.com/Events/hover
• http://docs.jquery.com/Selectors/not
• http://jquery-tr.blogspot.com/search/label/tips