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/

Son zamanlarda bir çok yerde gözüme çarpan bir menü tipi var; iki kolonlu, üç kolonlu vb. menü tipleri. CSS ile en optimum şekilde bu menüyü nasıl yapabilirim diye araştırdım ve sizlerle paylaşmaya karar verdim. Konuyu inceledikçe çok kolonlu yapıların sadece menülerde değil site içeriklerinde de kullanabileceğimizi gördüm. İlk olarak yapının nasıl olduğunu göstereceğim, sonrada menüde nasıl kullanıldığını.

Web mecrası geliştikçe ihtiyaçlarımızda gelişiyor ve ihtiyaçlarımızı karşılayacak metotlar arıyoruz. Çok kolonlu yapılarda böyle bir metot aslında. Sitemizi kullanan insanlar genelde menü vb. erişim ve gezinti araçlarını kullanarak sitemizi dolaşırlar. Menü gibi gezinti araçları site yapısı düşünüldüğünde sayfamızın en önemli alanlarıdır. Bu alanları en iyi şekilde tasarlanması ve düşünülmesi sitemizi daha kullanışlı ve etkin hale getirecektir. 

Bu düşünceler ile bir çok web site geliştiricisi çeşitli yöntemler denedi ve denemeye devam ediyor. Kullanılabilirliği en üst düzeye çıkarmak için çeşitli metotlar üretilmektedir. Bence bunlardan en güzellerinden biridir çok kolonlu menüler.

Yatay ve dikey örneklerimiz olmasına karşın genelde yatay ve üst menüdeki örnekler daha kullanışlıdır. Kullanıcıya uzun menü alanlarına erişebilmek için kaydırma çubuğunu kullanırlar buda bizim için bir dezavantajdır. Çok kolonlu menüler bu gibi durumlardan bizi kurtarır. Sitemizi daha derli toplu gösterir.

Çok kolonlu menü örneklerini incelediğimizde belli başlı 2-3 yöntem ile oluşturulduğunu görürüz. Bunları aşağıda inceleyeceğiz. Projelerimizde çoklu menü kullanmaya karar verdiğimizde hangisi projemize uygun ise onu kullanacağız. 

Ayrıca javascript yardımı ile ve css3 yardımı ile de çoklu menü oluşturabiliriz bunlarıda göreceğiz.

Burada anlatacağımız metotlar sadece menülerde kullanılmaz, site içeriğindeki benzer yapılar içinde aynı metotlar kullanılabilir. 

1. Yol: float uygulanmış liste ögeleri

Bu yöntemde ul elemanına sabit bir genişlik verip, her bir li elemanına float ve sabit genişlik tanımı yaparak yan yana dizeriz. Çok kolonlu yapılarını oluşturmak için en basit metottur. 

Dezavantajı listelemek istediğimiz ögeleri yan yana dizer. Normalde istenen birinci kolonu bitirdikten sonra ikinci kolona geçmesidir.

<ul>
    <li>Birinci Oge</li>
    <li>İkinci Oge</li>
    <li>Üçüncü Öge</li>
    <li>Dördüncü Öge</li>
    <li>Beşinci Öge</li>
    <li>Altıncı Öge</li>
    <li>Yedinci Öge</li>
    <li>Sekizinci Öge</li>
    <li>Dokuzuncu Öge</li>
    <li>Onuncu Öge</li>
</ul>

CSS kodumuz

ul {
    width: 700px;
    list-style-type:none;
}
li {
    width:180px;
    margin:15px 0 0 0;
    padding:0 10px 0 0;
    line-height:15px;
    float:left;
}

Örneği görmek için tıklayınız.

700px tüm genişlik içindir her ögenin genişliğini 180px verip bide sağdan 10px padding değeri ile yan yana dizeriz. 

Örneği biraz daha geliştirip açılır menü haline getirelim. 

HTML Kodu;

<ul id="menu">
    <li><a href="">Tencere</a>
        <ul class="kapsul">
        <li><a href="">Birinci Oge</a></li>
        <li><a href="">İkinci Oge</a></li>
        ....
        <li><a href="">Onuncu Öge</a></li>
        </ul>
    </li>
    <li><a href="">Tava</a></li>
    <li><a href="">Çaydanlık</a></li>
    <li><a href="">Leğen</a>
        <ul class="kapsulSolda">
        <li><a href="">Birinci Oge</a></li>
        <li><a href="">İkinci Oge</a></li>
        .....
        <li><a href="">Onuncu Öge</a></li>
        </ul>
    </li>
</ul>

CSS kodu;(kodun uzun olduğuna bakmayın çoğu kod menü elemanlarını daha güzel görünmesini sağlamak için eklenmiştir.) Bunu menüye uygulayalım

ul{margin:0; padding:0; list-style:none}
    ul li{float:left; width:180px; border-top:3px solid #fff; position:relative}
    ul li:hover, ul li.over{border-top:3px solid #C30; background-color:#eee; width:180px;}
	    ul li a{ font:12px "Trebuchet MS", Arial, Helvetica, sans-serif; text-decoration:none; display:block; padding:5px 5px 5px 10px; color:#0657ad; font-weight:bold}

İlk menü öğelerini oluşturduk.

ul li:hover ul, ul li.over ul{display:block;}

Burada virgülün ilk kısmı ie6 hariç olan kısmı için ie6 için ise aşağıdaki javascript kodunu yazacağız.

Tabi başımızın belası ie6 için menüyü açmak için javascript yardımı almamız gerekiyor. Çünkü ie6 linklerin haricinde :hover işleyişini uygulamıyor

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("menu");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;

Açılan menü kısmının tam kapsanması için kapsayamama kodu ekleyeceğiz.

ul li ul:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
ul li ul {display: inline-block;}
/*IE-mac de bu bolumu sakla \ */
* html ul li ul {height: 1%;}
ul li ul {display: block;}
/* IE-mac bu bolumu saklam artik */

Açılacak menü ul sinin tanımlarını yapıyoruz.

ul li ul {width: 580px; list-style-type:none; display:none; border-bottom:3px solid #C30; background-color:#eee; padding:5px 0 10px 10px; position:absolute;}
    ul li li {width:180px; margin:5px 0 0 0; padding:0 10px 0 0; line-height:15px; float:left; border:0;}
    ul li li:hover{border:0}
        ul li li a{color:#0657ad; text-decoration:underline; padding:0; font-weight:normal}
        ul li li a:hover{color:#C30; text-decoration:none}
    ul li ul.kapsulSolda{right:0}

Kolonlama için yukarıdaki yöntemi uyguluyoruz.

Örneği görmek için tıklayınız.

2. metot: Margin yönlendirmeleri ile

Çok kolonlu yapıları oluşturmak için diğer bir yöntemde ikinci ve üçüncü kolonlara sağdan ve üstten margin değerleri vererek yapmaktır. Bu metodun avantajı kolon dizilişinin istediğimiz gibi olmasıdır. Bu metotta çoğaltacağımız kolonlara ek sınıflar eklemeliyiz. 

<ul>
    <li class="kolon1"><a href="#">Öğe 1</a></li>
    <li class="kolon1"><a href="#">Öğe 2</a></li>
    <li class="kolon1"><a href="#">Öğe 3</a></li>
    <li class="kolon1"><a href="#">Öğe 4</a></li>
    <li class="kolon1"><a href="#">Öğe 5</a></li>
    <li class="kolon2 sifirla"><a href="#">Öğe 6</a></li>
    <li class="kolon2"><a href="#">Öğe 7</a></li>
    <li class="kolon2"><a href="#">Öğe 8</a></li>
    <li class="kolon2"><a href="#">Öğe 9</a></li>
    <li class="kolon2"><a href="#">Öğe 10</a></li>
    <li class="kolon3 sifirla"><a href="#">Öğe 11</a></li>
    <li class="kolon3"><a href="#">Öğe 12</a></li>
    <li class="kolon3"><a href="#">Öğe 13</a></li>
    <li class="kolon3"><a href="#">Öğe 14</a></li>
    <li class="kolon3"><a href="#">Öğe 15</a></li>
    <li class="kolon3"><a href="#">Öğe 16</a></li>
</ul>

CSS kodumuzu yazalım

ul { margin: 0 0 1em 2em; padding: 0; }
    ul li { line-height: 1.2em; margin: 0; padding: 0; }
    * html ul li { position: relative; }
    ul li.kolon1 { margin-left: 0em; }
    ul li.kolon2 { margin-left: 10em; }
    ul li.kolon3 { margin-left: 20em; }
    li.sifirla { margin-top: -6em; }
        ul li a { display: block; width: 7em; text-decoration: none; }
        ul li a:hover { text-decoration:underline}

Örnek kodu görmek için tıklayınız.

Yukarıdaki kodda ilk li tanımımız bir önceki metot ile neredeyse aynıdır. Tek farklı olan kısım position:relative tanımıdır, bu tanım ie’deki sorunları gidermek için eklenmiştir. Her kolonun soldan mesafesi margin-left değerleri tanımlanarak sağlanmıştır. İkinci ve üçüncü kolonları yukarı çekmek içinde menü yüksekliği kadar eksi margin değeri verilerek yukarı çekilmiştir.

Margin yönlendirmeleri ile menü oluşturmak pek mantıklı değildir. Esnek olmayan bu yöntem menü ekleme ve çıkarmalarında osurn çıkarır.

3. Metot: Kapsayıcı katman ile bölmek

Bu metotta çoklu kolonlara ayrılacak listeler kapsayıcı katmanlar ile ayrılarak her bir kolon oluşturulur. Bu metotta yükseklik ile ilgi bir şey yapmaya gerek yoktur ve esnek bir yapıya sahiptir. 

<div class="licol">
    <ol>
        <li>Let me not to the marriage of true minds</li>
        <li>Admit impediments; love is not love</li>
        <li>Which alters when it alteration finds</li>
        <li>Or bends with the remover to remove</li>
    </ol>
</div>
<div class="licol">
    <ol start="5">
        <li>Oh, no, it is an ever fixed mark</li>
        <li>That looks on tempests and is never shaken;</li>
        <li>It is the star to every wand'ring bark</li>
        <li>Whose worth's unknown, although his height be taken</li>
    </ol>
</div>
<div class="licol">
    <ol start="9">
        <li>Love's not Time's fool, though rosy lips and cheeks</li>
        <li>Within his bending sickle's compass come;</li>
        <li>Love alters not with his brief hours and weeks</li>
        <li>But bears it out even to the edge of Doom</li>
    </ol>
</div>

CSS kodumuzda kısadır.

li {
    margin:15px 0 0 0;
    padding:0 10px 0 0;
    line-height:15px;
}
.licol {
    float: left;
    width: 200px;
}

Örnek kodu görmek için tıklayınız.

Diğer metotlara göre avantajlı görünen bu metodun da kendince sorunları vardır. Menü yaparken kapsayıcı bir katman(div) atayıp bu katman içinde ul’leri float ve genişlik vererek yan yana koyarız.

<ul id="menu">
    <li>
        <a href="">Tencere</a>
            <div class="ucluKolon">
              <ul>
                <li><a href="">Let me not to the marriage of true minds</a></li>
                ...
              </ul>
              <ul>
                <li><a href="">Oh, no, it is an ever fixed mark</a></li>
                ...
              </ul>
              <ul>
                <li><a href="">Love's not Time's fool, though rosy lips and cheeks</a></li>
                ...
              </ul>
            </div>
    </li>
....
</ul>

İlk menü kısmını ilk yaptığımız ile aynı kodlara sahip olacaktır.

ul{margin:0; padding:0; list-style:none}
    ul li{float:left; width:180px; border-top:3px solid #fff; position:relative}
    ul li:hover,  ul li.over{border-top:3px solid #C30; background-color:#eee; width:180px;}
        ul li a{ font:12px "Trebuchet MS", Arial, Helvetica, sans-serif; text-decoration:none; display:block; padding:5px 5px 5px 10px; color:#0657ad; font-weight:bold}

Daha sonra kapsayıcı katman tanımlarını yapıyoruz. Tabi öncesine kapsayamama sorunu kodunu ekleyerek. Kapsayamama sorunu kodlarını başa ekliyoruz çünkü bu kısmı sayfa normal gösteriminde gizlememiz gerekiyor.

    div.ucluKolon:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
    div.ucluKolon {display: inline-block;}
    /*IE-mac de bu bolumu sakla \ */
    * html div.ucluKolon {height: 1%;}
    div.ucluKolon{display: block;}
    /* IE-mac bu bolumu saklam artik */
div.ucluKolon{width:600px; display:none; border-bottom:3px solid #C30; background-color:#eee; padding:5px 0 10px 10px; position:absolute}

Üst menüde en sağdaki menü elemanının altında açılan menü sağ doğru değilde sola doğru açılacak, bunun için

.sagda{right:0}

Üç kolonlu yapıyı oluşturmak için katman içindeki ul’lere genişlik ve float tanımı yapıyoruz.

div.ucluKolon ul{float:left; width:200px}

üst menülerin üzerine gelince açılması için

ul li:hover div.ucluKolon, ul li.over div.ucluKolon{display:block}

ie6 için javascript kodumuzu yazıyoruz. Yukarıdaki kodun aynısı.

Örnek kodu görmek için tıklayınız.

4. CSS 3 column-count özelliği ile

CSS3 ile birlikte gelen yeni bir özellik sayesinde işler çok kolaylaştırıyor. 

<ul id="menu">
    <li>Birinci Oge</li>
    <li>İkinci Oge</li>
    <li>Üçüncü Öge</li>
    <li>Dördüncü Öge</li>
    <li>Beşinci Öge</li>
    <li>Altıncı Öge</li>
    <li>Yedinci Öge</li>
    <li>Sekizinci Öge</li>
    <li>Dokuzuncu Öge</li>
    <li>Onuncu Öge</li>
</ul>

CSS kodumuz ise iki satır

ul#menu{
    width:700px;
    column-count: 3;
    -moz-column-count: 3;
    -webkit-column-count: 3;
}

Örnek kodu görmek için tıklayınız.

Farklı tarayıcılar için yazılan bu kod maalesef ie ve opera’nın desteği olmadığı için uygulaması şimdilik yok.

5. Metot: Javascript yardımı ile

Aslında bu yöntem bir önceki metodun tamamlayıcı bir metodudur.

Bu metotta css3 column-count özelliği ile yine css ile kodu yazacağız, javascript ile de desteklemeyen tarayıcılara uyumlu hale getireceğiz.

Bu javascript kodunu csscripting.com sitende yayınlanmış, ancak bu site yayında değil cvwdesign.com sitesinde kodu buldum. Açıkça söylemek gerekirse bunun dışında çalışan javascript kodu bulamadım. 

Bu kodu kullanırken css kodunuzu harici kullanmalıyız aksi halde kod çalışmıyor. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Çoklu kolon</title>
<link href="kolon.css" rel="stylesheet" />
<!--[if IE]><script type="text/javascript" src="css3-multi-column.js"></script><![endif]-->
</head>
<body>
    <ul class="column">
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
    </ul>
</body>
</html>

Bu javascript dosyasını ekleyince css3 aşağıdaki özelliklere karşılık gelen özellikleri

• column-count 
• column-width 
• column-gap
• column-rule

destekliyor. Mevcut açık kodun boyutu fazla gelince çevrimiçi yui kompresor ile javascript dosyasını sıkıştırdım. Gayet güzel bir oran ile dosya boyutunu 37 kb’dan 19 kb’a kadar düşürdüm.

Örnek kodu görmek için tıklayınız.

jQuery yardımı ile çeşitli çözümler mevcuttur. kaynaklar bölümünde yazdım linklerini.

Kaynaklar

• http://www.useit.com/alertbox/mega-dropdown-menus.html (genel bilgi)
• http://articles.techrepublic.com.com/5100-10878_11-5810687.html 
• http://www.communitymx.com/content/article.cfm?page=1&cid=27F87
• http://www.alistapart.com/articles/multicolumnlists/
• http://archivist.incutio.com/viewlist/css-discuss/88422
• http://www.cssplay.co.uk/menus/drop_lists.html (örnek)
• http://www.cssplay.co.uk/menu/column.html (farklı bir bakış)
• http://blog.pengoworks.com/index.cfm/2008/4/3/Preview-jQuery-Multicolumn-Dropdown-Plugin
• http://green-beast.com/experiments/css_double_lists.php
• http://css-discuss.incutio.com/?page=MultipleColumnLists
• http://welcome.hp.com/country/tr/tr/welcome.html
• http://css.flepstudio.org/en/css3/multi-column.html (css3 multi column)
• http://www.smashingmagazine.com/2009/03/24/designing-drop-down-menus-examples-and-best-practices/
• http://www.cvwdesign.com/txp/article/360/multi-column-layout-with-css3-and-some-javascript
• http://www.sohtanaka.com/web-design/mega-drop-downs-w-css-jquery/ (jquery yardımı işle güzel)
• http://codeasily.com/jquery/multi-column-list-with-jquery (jquery multi kolon eklentisi)
• http://welcome.totheinter.net/columnizer-jquery-plugin/ (jquery multi kolon eklentisi)
• http://www.zenelements.co.uk/blog/css3-multiple-columns/ (css3 multi-kolon ve destekleme listesi)
• http://www.americanstandard-us.com/ (örnek)
• http://www.gatesfoundation.org/Pages/home.aspx (örnek)
• http://www.cssplay.co.uk/menus/multi-column.html (örnek)
• http://www.whitehouse.gov/ (Örnek)
• http://www.wittysparks.com/2009/09/21/build-multi-level-multi-column-multi-menus-with-pure-css/
• http://www.smileycat.com/design_elements/mega_dropdown_menus/#001915

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

Artık neredeyse tüm projelerimde jQuery olmazsa olmaz oluyor. Bu nedenle javascript ile değil jQuery ile kodluyorum bu tip alanları. Sekmeli içerik yapımı jQuery ile çok basit. Bunu burada beraber göreceğiz.

XHTML kodumuz:

<div class="sekmeAlani">
<!--[if !IE]>sekmeler<![endif]-->
<ul class="sekmeler">
<li class="s1"><a href="javascript:void(0);" class="s1">Sekme1</a></li>
<li class="s2"><a href="javascript:void(0);" class="s2">Sekme2</a></li>
<li class="s3"><a href="javascript:void(0);" class="s3">Sekme3</a></li>
<li class="s4"><a href="javascript:void(0);" class="s4">Sekme4</a></li>
</ul>
     
<!--[if !IE]>sekme icerikleri<![endif]-->
<div class="s1">...</div>
<div class="s2">...</div>
<div class="s3">...</div>
<div class="s4">...</div>
</div>

Burada aslında href=”javascript:void(0);” özelliğini kullanmayabiliriz, ancak ie6 ve 7 bu durumda link tanımlarında sorun çıkarıyor. HTML’de dikkat edeceğimiz bir kaç yer var. Link sınıf tanımı(örn: class=”s1″) ve sekme içeriği sınıfları birbiri ile aynı olmalıdır.

Hemen uygulamaya geçersek.

Kodumuza jQuery kütüphanesini ekleyelim. Firefox’un YSlow eklentisinin belirttiği gibi javascript kodlarını sayfamızın altına koyalım.

  <script type="text/javascript" src="jquery.js"></script>
  </body>
  </html>

jQuery kodumuzu yazmaya başlayalım. Mantık olarak sekmeli menüler olsun, sekmeli içerikler olsun aynıdır. Sekmelere tıklayınca o sekmeye ait içerikler görünecek, diğerleri görünmez olacaktır. bu mantığa göre kodumuzu yazalım.

$(document).ready(function() {      
  $('div.sekmeAlani ul.sekmeler li a').click(function(){    
     $(this).parent('li').addClass('sekmeSecili').siblings().removeClass('sekmeSecili');                                            
     var mevcutSinif = this.className.slice(0,2);    
     $('div.sekmeAlani > div').hide().filter('div.'+mevcutSinif).show();        
   });
  $('.sekmeAlani ul.sekmeler li a:first').click();
});

Kodumuz sadece bu kadar.

$(document).ready(function() { .. }); jQuery’nin stadart kodu.

5. satırdaki kodda; sekme linklerine tıklanınca yapılacak işlemleri tetikliyoruz.

6. satırda tıklanan sekmeyi seçili hale getiriyoruz. Burada kullandığımız yöntem jQuery’nin bize sunduğu güzelliklerden biridir. Hem tıklanan sekmeyi seçili hale getiriyoruz hemde bu arada diğer sekmeleri(siblings() fonksiyonu sayesinde) normal hale getiriyoruz. Tek satır kod ile bunu bize sağlaması jQuerynin güzelliği

7. satırda tıklanan linkin sekme içeriği ile ilişkisini sağlayan sınıfını yakalıyoruz. Burada slice(0,2) ile sınıfın iki kelimesini alıyoruz, birebir sınıf karşılaştırması yapamıyoruz çünkü bu linke başka sınıflarda atanmış olabilir. Bu sınıf adı bize ilişkili sekme içeriğini göstermek için yardımcı olacaktır.

8. satırda içerikleri gizleme ve gösterme işini çözüyoruz. $(‘div.sekmeAlani > div’) kodu bize sekmeAlani‘nının birincil div’lerini yani sekme içeriğini kapsayan katmanları gizlememizi sağlıyor. Böylelikle sekme içinde div kullansak bile bunlar görünmez olmuyor bu bir çok sekme kodunda göz ardı edilen bir husustur. CSS’de de olan çocuk seçiciler(>) jQueryde gönül rahatlığı ile kullanabiliyoruz çünkü ie6 desteğini jQuery hallediyor. jQuery’nin bize sunduğu avantajlardan biride filter() fonksiyonudur. Bu sayede biz tüm sekme içeriğini kapsayan div’leri gizle ama bu tıkladığımzın(bu tıkladığımızda yukarıdan aldığımız sınıf tanımlaması ile anlıyoruz, aynı sınıf atamamızın sebebi de budur.) içeriği hariç diye biliyoruz. Bize bu kadar kolaylık sağlayan jQuery bundan dolayı çok seviyorum, pardon seviyoruz galiba.

10. satır sekme linki tıklamasını bitirdikten sonra sayfa ilk açıldığında ilk linkin tıklanması ve içeriğinin gösterilmesi için kodumuzu yazıyoruz. Buradaki a:first yine CSS’den bildiğimiz ama ie6 nedeni ile kullanamadığımız bir özellik. click() fonksiyonuda sanki biz tıklamışız işlevi görüyoruz.

Evet koda baktığımızda 5-6 satırlık bir jQuery kodu ile sekmeli bir yapı oluşturduk. jQuery’yi bu yüzden çok güzel. Bende öğrenmeye devam ediyorum. Öğrendikçe sizlerle paylaşacağım. bu konuda ve bir çok yerde yardımlarından dolayı Orhan Ekici‘ye(şu an yapım aşamasında) teşekkürlerimi sunmadan geçemeyeceğim. İnşallah yakında sitesini açarda internet alemine güzel bilgiler sunar.

jQuery UI içinde sekme ekelentisi var onuda tercih edebilirsiniz. jQuery tab eklentisi çok ayrıntılı ve bir çok özellikleri var. Bu bir bakıma avantaj olsada bazen dezavantaja dönüşebiliyor. Ben ufak bir sekmeli içerik yapmak için jQuery UI tab eklentisini kullanmayı uygun görmüyorum açıkçası.

Sekmeli içerik ve sekmeli menülerde farklı şekillerde örnekler var. Stil dosyasını değiştirerek bu örnek üzerinden istediğimiz birçok sekmeli içerik üretebiliriz.

Örnek kodu görmek için tıklayınız.

Örnek kodu IE (6-7-8), Firefox 3.0.10, Opera 9.6, Googel Chrome 1.0 ve Safari 3.2.2 sürümlerinde test ettim.

Kaynaklar

• http://jqueryfordesigners.com/jquery-tabs/
• http://broadcast.oreilly.com/2008/10/how-to-create-tabs-with-css-an.html
• http://justintadlock.com/archives/2007/11/07/how-to-create-tabs-using-jquery
• http://www.barelyfitz.com/projects/tabber/index.php
• http://www.thetruetribe.com/jquery/3-jquery-widgets/77-how-do-i-make-tabs-in-jquery-without-jq-tabs-plugin

Iframe kullanımında en çok yaşanan sorunlardan biridir içeriğin yüksekliğine göre iframe yüksekliğinin artması veya azalması. Daha önce ben bunu javascript ile yapmıştım. Ancak farklı tarayıcılarda bazı sorunlar yaşamıştım. Şimdide javascript ile bunu halledebiliriz. Ancak son zamanlarda(o kadar da yeni sayılmaz :D) popüler olan javascript kütüphaneleri(benim için bunun adı jQuery) ile bu daha basit.

Burada ufak bir ipucu var. Ben bir çok projelerimde jquery kütüphanesini kullandığım için jQuery autoHeight eklentisini kullandım. Eğer projemde jQuery kütüphanesi yüklü değilse javascript ile yapmak daha mantıklı. Javascript ile yapacaklar için bir link jQuery ile yapmanın bir kaç avantajıdaha var tabii

Ben burada jQuery autoHeight eklentisinin nasıl kullanılacağını anlatacağım.

Sayfamıza ilk olarak jQuery kütüphanesini eklemeliyiz. Bu script dosyasının ilk sırada olması önemli jQuery için.

<script type="text/javascript" src="script/jquery.js"></script>

Iframe otomatik yükseklik vermek için kullandığımız eklenti kodu.

<script type="text/javascript" src="script/jquery.autoheight.js"></script>

Sayfaya eklediğimiz iframe kodunda yapmamız gereken sadece class="autoHeight" eklemek.

<iframe id="listeCercevesi" name="listeCercevesi" class="autoHeight" scrolling="auto" frameborder="0" src="/liste.aspx"></iframe>

Örnek sayfayı görmek için tıklayın. (sonspring.com alınmıştır)

Uyarılar:

• İlk uyarımız bu metot aynı alan adı üzerindeki sayfa eklemelerinde çalışıyor. İçreriğini farklı siteden aldığımız iframe’ler güvenlik nedeniyle çalışmayacaktır.
• İkinci uyarım ise içeriği yüklü olan iframe sayfalarında yükleme zaman aldığı için ve scriptimiz sayfa yüklendikten sonra çalıştığı için sayfa yüksekliği ilk açılıştı küçük geliyor ve sonradan gerçek boyutuna geliyor. Ben bunu engellemek için iframe’e ortalama bir yükseklik değeri girdim. Script yüklendiğinde zaten beni girdiğim değeri değiştiriyor.
• Üçüncü olarak bu yöntem javascript yönteminden daha kullanışlı yapan özelliklerden biri de kullanımının kolay olması ve her iframe e id vermek zorun olmuyor olmamız.

Kaynaklar

• http://www.lost-in-code.com/programming/jquery-auto-iframe-height/
• http://lib.mobius.tw/jquery/myplugin/iframe_autoHeight/api.htm
• http://jbscdev.blogspot.com/2007/08/automatic-iframe-height-sizing-using.html
• http://sonspring.com/journal/jquery-iframe-sizing

Tabi jquery ve mootools ile birlikte kullanmamdan dolayı hata vermeye başladı.

Çözüm çok basit $ işareti yerine jQuery yazmak yeterli.

$.ajax

yerine

jQuery.ajax