Öncelikle menümüzün HTML kısmını hazırlayalım.

Menümüzde önemli nokta, iç içe geçmiş

etikleri. Önce yatay bir menü hazırlıyoruz.

<ul id="menu">
	<li><a href="#">Anasayfa</a></li>
	<li> <a href="#">Madde 1</a></li>
	<li> <a href="#">Madde 2</a></li>
</ul>

Anasayfa’nın altında herhangi bir link olmayacağı için Madde 1 ile açılır menümüzü hazırlamaya başlıyoruz.
<li> etiketi altına bir tane
<ul> etiketi açıyoruz. Bu etiket içerisine açılacak menüyü yerleştireceğiz. Şimdi Madde 1′in altında açılacak olan menümüzün kodlarını yazalım.

<li> <a href="#">Madde 1</a>
	<ul>
		<li><a href="#">Madde 1-1</a></li>
		<li><a href="#">Madde 1-2</a></li>
	</ul>
</li>

Peki bu menü nasıl açılacak? Bu açılma ve tekrar kapanma işlemlerini CSS ile yapacağız. ID’si “menu” olan ul etikenine ait li etiketlerinin içerisinde yer alan ul etiketlerinin varsayılan(default) display değerini “none” olarak belirliyoruz. Tek cümlede anlatınca biraz karışık olduğunu biliyorum o yüzden bir çizim ile bunu anlatarak pekiştirelim.

Bu grafiğe ait olan CSS kodlarını yazalım. Yukarıdada belirttiğim gibi <li> içindeki etiketinin değerini atayacağız.

ul#menu li ul{
display:none;
border:solid 1px #ccd6e5;
padding:0px;
margin-left:-10px;
padding-bottom:5px;
}

Yukarıda stil olarak vermiş olduğumuz kodları geçersek ilk sırada yer alan “display:none;” koldarı bizim işimizi gören kısım. Şimdi en işlevsel kısıma geldik. Bu alt menümüz ne zaman açılacak. Genel olarak “<a” etiketlerinde kullanılan “hover” özelliğini kullanacağız. Yani “li:hover” da altındaki “ul” etiketinin display özelliğini “block” yapacaz.

Şimdi CSS kodlarını yazalım :

ul#menu li:hover ul{
display:block;
position:absolute;
width:150px;
background:#fff;
}

Sanırım sadece yazı değil, yanında videolar ile anlatımlarımda olacak.

jQuery dökümanları ile paralel olarak yazmaya çalısacağım ancak içerisinde atlayacağım alanlar olacak. Orta hatta ortanın üstü bir jQuery bilgisine sahip olmanızı sağlayana kadar yazmaya çalışacağım. Bu bağlamda ilk yazımız jQuery’nin en güzel özelliklerinden olan each olacak.

each :

Temelde olsa yazılım bilginiz var ise zaten bu özelliğin ne işe yaradığını çoktan anlamışsınızdır. Foreach’in jQuery versiyonuda diyebiliriz.

Peki ne iş yapar bu each?

Belirlediğiniz seçicilerden oluşan bir dizideki elemanların içerisinde teker teker dönmemizi sağlar. Örnekleyerek devam edersek sanırım daha rahat anlaşılabilir.

Bir sayfamız var, içerisindeki tüm inputları seçeceğiz ve each ile bunların kenar çizgilerini kırmızı yapacağız.

Seçici Kodlar :

    function sec(){
        $('input').each(function(){
	        this.style.border = "solid 1px #cc0000";
        });
    }

Sayfanın örneğine buradan ulaşabilirsiniz.

İyide bunu zaten daha kısa bir kod ile yapabiliriz neden bu yolu seçtik şeklinde sorabilirsiniz. Bu örnek için aslında each’i kullanmanın bir anlamı yok. Bu örnekte each ile tüm öğeleri seçebildiğimizi görmüş olduk. Eğer sayfadaki “seç” butonuna tıklarsanız kendiside dahil tüm inputları seçtiğini göreceksiniz. Each’in bize yararını anlamak için bir sonraki örneğimize geçelim.

Bu örneğimizdeki inputlarımızın 3 farklı yazı rengi bulunmaktadır. Biz bunlardan siyah olanlarının mavi olmasını istiyoruz. Bunun için tüm inputları öncelikle each ile bir diziye alacağız ve daha sonrada yazı renklerini kontrol edip siyah olanları mavi yapacağız.

Seçici Kodlar :

    function sec(){
        $('input').each(function(){
            var yaziRengi = this.style.color; //yazi rengini alıyoruz
            if(yaziRengi == "black"){ //yazı rengi siyahmı kontrol ediyoruz
	            this.style.color = "blue"; //siyah olanları mavi olarak atıyoruz
            }
        });
    }

Sayfanın örneğine buradan ulaşabilirsiniz.

Bu örnek ile aklınızda birşeylerin oluştuğuna inanıyorum.

Each’i amacına uygun nasıl kullanacağımıza geldik. Bir formumuz olduğunu düşünelim ve biz bu formda hiçbir alanın boş bırakılmamasını istiyoruz. Form submit edildiğinde boş alan varmı yokmu kontrol edelim. Eğer boş alanlar var ise kenarlık ve arkaplan renklerini değiştirelim.

Seçici Kodlar :

function sec(){
    $('input').each(function(){ //tüm inputları bir diziye atıyoruz

    //inputun değerini alıyoruz ve değerdeki boşluları siliyoruz
    //burada boşluk silmemiz normal değeri etkilemeyeceği gibi
    //gibi boş veri kontrolünü sağlayacaktır.
	if(this.type=="text"){//tipi text olan inputları seçiyoruz
        var inputValue = this.value.replace(" ","");

            if(inputValue == ""){//eğer değer boş ise
                $(this).css({"border":"solid 1px #c00","background-color":"#c00","color":"#fff"});
            //üzerinde işlem yaptığımız inputun stilini değiştiriyoruz.
            }
            else //eğer veri boş değil ise daha önceden kontrolde boş gelme ihtimaline karşın
            //input'un şeklini eski hale getiriyoruz.
            {
                $(this).css({"border":"solid 1px #000","background-color":"#fff","color":"#000"});
            }
        });
    }
}

Sayfanın örneğine buradan ulaşabilirsiniz.

Yukarıdaki örnekleri jQuery’nin seçicileri ile daha kısa bir şekilde yapmamızda mümkün ancak konumuz each olduğu için uzunda olsa biz bu yolu tercih ettik. Çünkü seçiciler sayesinde elde edemeyeceğimiz veriler aracılığı ile çok daha etkili çözümler üretebileceğimizi ileride göreceksiniz.

Yukarıda çok kısa bir şekilde yaptığımız işlemleri jQuerysiz yapsak emin olun çok daha uzun sürecekti.

Sorularınız için sağdaki iletişimin altındaki soru sor ile bana iletebilirsiniz.

Jquery ile bir formda yer alan input elemanlarından “type=text” yani tipi yazı olanları kapsayan bir script yazalım. Doğrulama esnasında ihtiyacımız olan 3 şey ;

<ul>
	<li>O elemanın boş olup olamayacağı</li>
	<li>Boş değil ise kaç karakterden az olamayacağı</li>
	<li>Özelleştirilmiş hata mesajı</li>
</ul>

Oluşturduğumuz standart inputlarda bu alanlar tabii ki yer almamaktadır. Biz kendimiz oluşturmalı yada var olan attributeleri(özellikleri) kendimize göre kullanmalıyız.

Ben elemanın value(değer) kontrolü için required(gerekli) diye bir özellik eklemeyi tercih ettim. En az kaç karakter olacağını ise rel özelliğinden belirleyeceğim.Özelleştirilmiş hata mesajı için ise hata özelliğini kullanacağız.

Örnek input kodumuz :

HTML tarafında yapmamız gerekenler bu kadar. Asıl konumuz olan js tarafında ise jQuery ile hiç zorlanmadan fonksiyonlarımızı yazabileceğiz. 3 farklı fonksiyon yazmamız gerekecek.

<ol>
	<li>Value kontrol işlemleri için</li>
	<li>Hata mesajı göstermek için</li>
	<li>Hata mesajını ekrandan silmek için</li>
</ol>

1. Fonksiyonumuz : inputValueKontrol

Kısaca yapacaklarımızı anlatmak gerekirse : Öncelikle tüm inputları foreach ile döngü içerisine alarak kontrol ediyoruz. Required değeri 1 olanların valuelarına bakıyoruz. Eğer value uzunluğu (length) rel değerinden az ise bir hata mesajı çağırıyoruz yoksa işleme devam ediyoruz.

Kodlarımızı kısaca açıklayalım. İlk fonksiyonumuz olan inputValueKontrol ile başlayalım.

$(‘input’).each(fucntion(){}); ile tüm inputları bir diziye atadıktan sonra bir döngü içerisinde tek tek inceleyeceğiz.
Döngümüz başladıktan sonra incelemekte olduğumz inputun required özelliğinin 1 olup olmadığını kontrol ediyoruz. Peki bir inputun özelliklerini nasıl alırız :

$(this).attr(“required”) şeklinde, bulunduğumuz input’un attributelarından(özelliklerinden) istediğimize ulaşabiliriz.

if($(this).attr(“required”)==”1″) satırı ile validation’a açık olan inputları seçiyoruz.

var tur = $(this).attr(“rel”);
var hata = $(this).attr(“hata”); Burada tur istenilen verinin uzunluğunu hata ise istenilen veri uzunluğuna erişilmediği zaman gösterilecek hatayı dönderecektir bize. Eğer hata mesajımız yok ise daha önceden belirlediğimiz mesajı göstermesi için şu satırları ekleyelim :

if(!hata){hata = “Bu alanı boş bırakamazsınız”;}

Fonksiyonumuzun çalışmaya başladığı nokta input’un onblur event’ıdır.

$(this).blur(function(){});

Fonksiyonumuz başladığına göre gerekli kontrollerimize başlayabiliriz. Öncelikle tur değişkenimizin varlığına göre bir kontrol yapıyoruz ve required değeri 1 iken rel değeri 1′den büyük ve boş değilse yapılacakları belirlemek için şu satırları ekliyoruz :

if(tur>1 & tur != ""){}

İstenilen değer 1′den büyük ve boş değilse değeri kontrol ediyoruz. Eğer değer uzunluğu istenilen uzunluktan büyük değilse hata mesajını gösteriyoruz ve input’un kenarlıklarını şekillendiriyoruz.

var thisValue = $(this).val();
var thisValueLength = thisValue.length;
if(thisValueLength<tur){
$(this).css("border","solid 1px #f00");
hataMesaj(hata);
}else{
$(this).css("border","1px solid #C0C0C0");
hataMesajiSil();
}

Eğer değerler doğru isede input’un kenarlıklarını eski haline çeviriyoruz ve mevcut olan hata mesajını siliyoruz.

Birde tur (yani rel) değerinin olmadığı durumlar var. Bu inputların değerinin boş olamayacağı anlamına geliyor. Aynı işlemleri rel’i 1 kabul ederek tekrar uyguluyoruz.

 var thisValue = $(this).val();
var thisValueLength = thisValue.length;
if(thisValueLength==0){
$(this).css("border","solid 1px #f00");
hataMesaj(hata);
}else{
$(this).css("border","1px solid #C0C0C0");
hataMesajiSil();
}

Inputların değer kontrol işlemlerine ait kodların inputValueKontrol fonksiyonunda olduğunu söylemiştik. Bu fonksiyona ait kodlar aşağıdaki gibidir.

Şimdi hata mesajlarını ekrana yazdıran fonksiyonumuz hataMesaj‘ı yazalım.Bu fonksiyonun mantığı çok basit. Tek parametre ile gösterilecek mesajı alıyoruz ve bunu bir div etiketinin içerisine ekledikten sonra sayfaya ekliyoruz. Ekstra olarak yaptığımız tek işlem bu div etiketinin sayfada ekli olup olmadığını kontrol etmek. Eğer daha önceden eklenilmiş bir etiket var ise sadece içeriğini değiştiriyoruz ve en son hata mesjını ekliyoruz. En son olarakda bu mesajın 30 saniye sonra kendisini imha etmesini sağlıyoruz

En son fonksiyonumuz ise ekrana yazdığımız hata mesajını kaldırma fonksiyonu. Bunu açıklamaya sanırım gerek yok.

Örnek uygulamaya buradan ulaşabilirsiniz.

Zincirleme derken neden bahsediyorum ;

Bir divimiz var ve biz bunu önce genişlemesini sonrada yüksekliğinin değişmesini istiyoruz. İşte burada jQuery’nin en sevdiğim özelliklerinden birisi olan zincirleme devreye giriyor.

Önce javascript kodlarımızı yazalım :

function func1(id)
{
  //id'sini parametre olarak gönderdiğimiz elementin
  //önce genişliği ile sonrada arkaplan rengi ile oynuyoruz
  $('#'+id).animate({width:500},250).animate({height:500},250);
  //zincirleme animasyonlarda bir işlem bittikten sonra
  //diğeri başlar
}

HTML kodlarımız :

<input onclick="func1('div1')" type="button" value="oynat" id="genislet" />
<br />
<div style="width:100px;height:100px;background:#f00;display:block;" id="div1"></div>

Örneğimize buradan ulaşabilirsiniz.

Zincirleme, sadece animasyonlar arasında bir hiyerarşi sağlamaktadır. Yani animateden sonra bir css kodu yazarsanız bu animasyon başladığı anda gerçekleşecektir.

Temel olarak anlatmamız gerekenleri bitirdiğimize göre örneklerimizi komplike hale getirelim.

4 tane resim içeren bir animasyon hazırlayalım. Başlangıçta hepsinin eni ve boyu eşit görünecek. Normal boyutları farklı resimler seçecez ve tıkladığımız resim orjinal boyutuna gelecek. Öncelikle resimler için google’dan “cat” diye arama yapıp 4 tane resim seçeyim

Resimlerimizi yan yana sıralıyoruz ve basit bir css uyguluyoruz. CSS’imizin amacı, tüm resimleri aynı boyutlardaki divlerin içerisine yerleştirerek farklı boyutlardaki resimlerin görüntüyü bozmasını engelliyoruz.

Öncelikle HTML kodlarımızı yazalım :

<div style="margin-left: 30%; margin-top: 150px;">
    <div class="resim"><img src="http://www.arastiralim.net/wp-content/uploads/2008/02/lady-cat.jpg" /></div>
    <div class="resim"><img src="http://www.plasticbamboo.com/wp/wp-content/uploads/hello-kitty-cat.jpg" /></div>
    <div class="resim"><img src="http://www.fulyavet.com/images/cat17.jpg" /></div>
    <div class="resim"><img src="http://asymptotia.com/wp-images/2006/12/copy_cat_copies.jpg" /></div>
</div>

CSS kodlarımız :

.resim{
    height:90px;
    float:left;
    margin:0px 10px;
    width:100px;
    overflow:hidden;
}

HTML ve CSS kodlarımızı tamamladığımıza göre jQuery kodlarımızı yazmaya başlayabiliriz.

Sayfamız yüklendiği zaman $(document).ready() ile tüm resimlerimizin orjinal boyutlarını alıp rel‘e atıyoruz. Tıklandığı zaman resmimizin boyutunu alabilmek için en kısa yöntem bence. Boyutları gerekli yere atadıktan sonra tüm resimlerimizin genişliğini 100 yapıyoruz. Yükseklikte genişliğe orantılı olarak otomatikmen değişiyor. Resimlerden herhangibirisine tıklandığı zaman yapılacak işlemleri belirliyoruz. Aşağıda zaten kodların içinde açıklamaları var ancak ben burada “each“den bahsetmek istiyorum ;

 $('div.resim>img').each(function(){
$(this).attr('rel',$(this).width());
});

satırları ile class’ı resim olan divlerin içerisindeki tüm resimleri “each” yardımı ile tek tek dönüyoruz. Yani hazır bir array‘i yine hazır bir şekilde tek tek elemanlarına ayırıyoruz. Özellikle id ve class gibi seçivilerimizin olmadığı durumlarda bir üst seçiciye bağlı olarak işlem yapmamızı kolaylaştırır(programcılar için çok tanıdıktır zaten). Bu kod satırlarındaki üst seçicimi “div.resim“.

En son olarak javascript kodlarımızı yazıyoruz :

$('div.resim>img').each(function(){
    //each ile tüm resimlerimizin orjinal genişliğini tektek
    //rel özelliğine(attribute) atıyoruz
    $(this).attr('rel',$(this).width());
    //tıklandığı zamanda buradan aldığımız değer ile
    //genişlik ve yüksekliğini ayarlıyoruz
});
//genişlik alma işlemimiz bittikten sonra tüm resimlerin
//genişliğini 100px'e getiriyoruz
$('div.resim>img').width(100);
//galerimizdeki bir resime tıklandığı zaman
//yapacağı işlemlere geçelim
$('div.resim>img').click(function(){
//öncelikle açık olan resim için tüm resimleri sıfırlıyoruz
$('div.resim>img')
.animate({width:100},250)//animate ile genişliğini 100px'e çekiyoruz
//css özelliklerinide ilk haline getirmemiz gerekiyor
.css({'z-index':'1','position':'static','margin-left':'0px','margin-top':'0px'});
//ilk başta atadığımız rel değer ile animasyon sonunda
//resmimizin geleceği genişliği alıyoruz
var w = $(this).attr('rel');
//bulunduğu yeri ortalaması için biraz sola kaydırmak
//gerekeceğinden marginlerden 20 genişlikten dolayıda
//100 geliyor toplam genişlikten 120 çıkartıp
//2 ye bölerek ne kadar sola kayacağını hesaplıyoruz
var mL = (w-120)/2;
//basit ancak önemli bir kontrol ekliyoruz
//eğer resim küçük ise büyütme işlemlerini yap diyoruz
//isterseniz bu satıları kaldırarak farkı görebilirsiniz
if($(this).width() == 100)
{
    //öncelikle resmimizin positionunu absolute yaparak divin
    //css>overflow özelliğini ezmesini sağlıyoruz
    //daha sonra z-index'ini 5 yaparak diğer resimlerin üzerine alıyoruz
    //ve animasyonumuz ile estetik bir şekilde genişlik,
    //marginTop ve marginLeft'i ile oynuyoruz
    $(this)
    .css({"position":"absolute","z-index":"5"})
    .animate({width:w,marginTop:'-10%',marginLeft:'-'+mL},250);
    //ve bu basit resim galerimiz böylece sona eriyor
}
});

Bu örneğimizede buradan ulaşabilirsiniz.

Animate jQuery’nin effect grubundan bir öğedir. Genel yazım şekli ;

.animate( params, [duration], [easing], [callback] );

params : animasyonumu belirleyen parametrelerden oluşur.

duration : anismasyonun süresini belirlememizi sağlar. Alabileceği değerler “slow” , “normal” , “fast” ve rakamsaldır. Bir saniye 1000 milisaniye kabul ediliyor.

easing : 2 değer alabilen özel bir efekttir. “swing(sallantı-sallanma)” ve “linear (çizgisel)” değerleri alır. Plug-in gerektirmektedir.

function : animasyonun sonunda meydana istediğiniz işlemleri çağırmanıza yarar.

Şimdi örnekler ile açıklamaya devam edebilim;

ilk örneğimizde sadece bir divin genişlik ve yüksekliğini değiştireceğiz. Kodlarımız aşağıdaki şekilde ;

//öncelikle sayfamızın yüklenmesi tamamlandığı zaman yine jQuery
//ile butonlarımızın onclick event'ine animasyonlarımızı atıyoruz
$(document).ready(function(){

$('#genislet').click(function(){
$('#aniDiv1').animate({
width:200,//burada div'in genişliğini 200px olarak atıyoruz
height:200//burada div'in yükseliğini 200px olarak atıyoruz
},250//animasyonumuzun hızını 250 milisaniye olarak ayarlıyoruz (yani 1/4 saniye)
);
});

$('#daralt').click(function(){
$('#aniDiv1').animate({
width:50,
height:50
},250);
});
});

Örneğimize buradan ulaşabilirsiniz.

İkinci örneğimizde az önceki divimizin yerini değiştirecelim. Tabii ki ilk önce kodlarımızı yazalım.

$("#sol").click(function(){
$("#Div3").animate({"left": "+=50px"}, "slow");
});

$("#sag").click(function(){
$("#Div3").animate({"left": "-=50px"}, "slow");
});

Bu örneğimizde dikkatinizi çekmek istediğim nokta “left”:”-=50px” satırlarındaki “-=” ve “+=”. Bu 3 karakter ile oluşan 2 karakterlik katar bizi bir çok kodu yazmaktan kurtarıyor. Bu kodlar olmasa nasıl yazmamız gerekcekti ;

var left = $('#Div3').css('left');
left = left.replace('px','');
left += 50;
$("#Div3").animate({"left": left+"px"}, "slow");

İşte jQuery’nin gücü

Örneğimize buradan ulaşabilirsiniz.

Şimdiki örneğimizde bir elementin şeffaflığı (opacity) ile oynuyoruz.

$('#btnOpacity0').click(function(){
$("#Div2").animate({opacity: 0}, "slow");
});
$('#btnOpacity05').click(function(){
$("#Div2").animate({opacity: 0.5}, "slow");
});
$('#btnOpacity1').click(function(){
$("#Div2").animate({opacity: 1}, "slow");
});

Örneğimize buradan ulaşabilirsiniz.

“opacity” bu örneğimizdeki gibi sayısal değer (0 ile 1 arasında) alabildiği gibi “show(göster)” ve “hide(gizle)” değerlerinide alabilir. Ancak bu sefer yazım şeklimiz biraz değişiyor ;

$('#btnOpacity0').click(function(){
$("#Div2").animate({"opacity": "hide"}, "slow");
});
$('#btnOpacity1').click(function(){
$("#Div2").animate({"opacity": "show"}, "slow");
});

Şimdiki örneğimizde ise bir animasyon tamamlandıktan sonra fonksiyon çağıracağız. “Duration” dan sonra “function(){}” yazıyoruz ve normal bir javascript fonksiyonu gibi “{}” arasına istediğimiz kodları yazıyoruz.

$("#Div4").css("opacity","0.5");
$('#btnCalistir').click(function(){

$("#Div4").animate({width:400,height:400,opacity:1}, "slow", function(){alert("animasyonumuz tamamlandı");});

});

Örneğimize buradan ulaşabilirsiniz.

Tüm örnekler 1 sayfada yer alıyor.
Tüm kodlar :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Animate</title>
<script type="text/javascript" src="/js/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<script type="text/javascript">
$(document).ready(function(){

var tumAdres=String(this.location);
veri=tumAdres.split("?")[1];
if(document.getElementById(veri))
{
$('#'+veri).show();
}

$('#genislet').click(function(){
$('#aniDiv1').animate({
width:200,//burada div'in genişliğini 200px olarak atıyoruz
height:200
},250);
});
$('#daralt').click(function(){
$('#aniDiv1').animate({
width:50,
height:50
},250);
});

$("#sol").click(function(){
$("#Div3").animate({"left": "-=50px"}, "slow");
});

$("#sag").click(function(){
$("#Div3").animate({"left": "+=100px"}, "normal");
});

$('#btnOpacity0').click(function(){
$("#Div2").animate({opacity: 0}, "slow");
});
$('#btnOpacity05').click(function(){
$("#Div2").animate({opacity: 0.5}, "slow");
});
$('#btnOpacity1').click(function(){
$("#Div2").animate({opacity: 1}, "slow");
});

$("#Div4").css("opacity","0.5");
$('#btnCalistir').click(function(){

$("#Div4").animate({width:400,height:400,opacity:1}, "slow", function(){alert("animasyonumuz tamamlandı");});

});

});
</script>
</head>
<body>
<div id="ornek1" style="display:none;">
<div class="aciklama">
ilk örneğimizde divimizin sadece boyutlarını değiştireceğiz
</div>

<div id="divli1" class="div">
<input type="button" value="genişlet" id="genislet" /> <input type="button" value="daralt" id="daralt" />
<br />
<div style="width:100px;height:100px;background:#f00;display:block;" id="aniDiv1"></div>
</div>
</div>

<div id="ornek2" style="display:none;">
<div class="aciklama">
ikinci örneğimizde divimizin yerleşimini değiştireceğiz
</div>

<div>
<input type="button" value="<<" id="sol" /> <input type="button" value=">>" id="sag" />
<br />
<div style="width:100px;height:100px;background:#ccd6e5;display:block;left:200px;position:absolute;" id="Div3"></div>
</div>
</div>

<div id="ornek3" style="display: none;">
<div class="aciklama">
üçüncü örneğimizde divimizin şeffalığı ile oynayacağız
</div>
<div>
<input id="btnOpacity0" type="button" value="gizle" /> - <input id="btnOpacity05" type="button" value="şeffaflaştır" /> - <input id="btnOpacity1" type="button" value="göster" />
<br />
<div id="Div2" style="width: 100px; height: 100px; background: #ccd6e5; display: block;left: 50px; position: absolute;margin-top:10px;"></div>
</div>
</div>

<div id="ornek4" style="display: none;">
<div class="aciklama">
dördüncü örneğimizde fonksiyonumuz tamamlandığında bir "alert" veriyoruz.
</div>
<div>
<input id="btnCalistir" type="button" value="çalıştır" />
<br />
<div id="Div4" style="width: 100px; height: 100px; background: #ccd6e5; display: block;left: 50px; position: absolute;margin-top:10px;"></div>
</div>
</div>
</body>
</html>

Bu yazımıza burada son veriyoruz. Tahminen bu serimiz 3 yazı olacak. Bir sonraki yazıda görüşmek dileğiyle hoşçakalın…

Pluginin asıl amacı accordion menüler oluşturmak. Ancak ayarlardan daha değişik işlemler için kullanılabilir hale getirebilirsiniz.

Kullanım şekli :

$('div.accordion1').accordion();

İsterseniz kullanabileceğiniz 6 tane ayar barındırıyor içerisinde. Ayarlarının kullanım şekli :

$('div.accordion1').accordion({
acik:1,
baslik:'<div class="menuTitle">Fade - ul </div>',
hiz:150,
etiket:'ul',
effect:'fade',
style:'menu'
});

Ayarlarımızı tek tek açıklayalım :

acik:

Menüdeki maddelerden hangisinin açık geleceğini seçebiliyorsunuz. Dikkat edilmesi gereken bir nokta var. Tabii ki saymaya 1 değil 0‘dan başlıyoruz. Eğer tamamının kapalı gelmesini istiyorsak ya hiç yazmıyoruz yada değeri -1 olarak belirliyoruz.

varsayılan değeri : -1

baslik:

Menümüzün başlığını oluşturuyoruz. Tamamen isteğe bağlı olup html tagları kullanabiliyoruz.

varsayılan değeri : yok

hiz :

Menü efektlerinin hızını belirler. 1000 değeri 1 saniyeye eşittir.

varsayılan değeri : -1

etiket :

Belirtmiş olduğumuz etiketin altında yer alan elementlerden hangilerinin menünün maddelerini oluşturacağını belirler.

Örn : etiket : ’span’,

varsayılan değeri : ul

effect :

Menü maddelerinin efektini belirlememize yarar.

Alabileceği Değerler :

• slide
• show
• bounce
• none

varsayılan değeri : ‘none’

style :

Oluşturulan menümüzün başlıkları ve maddelerin stillerini belirlememize yarar.Vermiş olduğumuz style değişkeninin sonuna başlıklar için Baslik, maddeler için Div ekler.

varsayılan değeri : accordion

varsayılan stiller : accordionBaslik, accordionDiv

Önemli olan bir nokta daha var. etiket ile belirlediğimiz maddelerin başlıklarını etiket‘in title özelliği oluşturuyor.

    <script type="text/javascript">
        $(document).ready(function(){
            $('div.accordion1').accordion({
                acik:1,
                baslik:'<div class="menuTitle">Fade - ul </div>',
                hiz:150,
                etiket:'ul',
                effect:'fade',
                style:'menu'
            });
        });
    </script>
      <div class="accordion1">
        <ul title="Baslık bir">
            <li><a href="#">Madde 1</a></li>
            <li><a href="#">Madde 2</a></li>
            <li><a href="#">Madde 3</a></li>
        </ul>

        <ul title="Baslık İki">
            <li><a href="#">Madde 2-1</a></li>
            <li><a href="#">Madde 2-2</a></li>
            <li><a href="#">Madde 2-3</a></li>
        </ul>

        <ul title="Baslık Üç">
            <li><a href="#">Madde 3-1</a></li>
            <li><a href="#">Madde 3-2</a></li>
            <li><a href="#">Madde 3-3</a></li>
        </ul>
    </div>

Bu HTML kodlarının çıktısı aşağıdaki gibi olacak :

Diğer Örnekler için buraya tıklayınız.

Kodları indirmek için buraya tıklayınız.

kolay hala gelecek. Sizlerde üzerinde biraz değişiklikler yaparak istediğiniz yapıda menüleri kolaylıkla oluşturabilirsiniz.

Öncelikle menümüzün salt html halini oluşturalım;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-9" />
<title>Accordion Menü</title>
</head>
<body>
	<div class="accordion">
		<ul title="Baslık bir">
			<li><a href="#">Madde 1</a></li>
			<li><a href="#">Madde 2</a></li>
			<li><a href="#">Madde 3</a></li>
		</ul>
		<ul title="Baslık İki">
			<li><a href="#">Madde 2-1</a></li>
			<li><a href="#">Madde 2-2</a></li>
			<li><a href="#">Madde 2-3</a></li>
		</ul>
		<ul title="Baslık Üç">
			<li><a href="#">Madde 3-1</a></li>
			<li><a href="#">Madde 3-2</a></li>
			<li><a href="#">Madde 3-3</a></li>
		</ul>
	</div>
</body>
</html>

Sayfamıza jquery.js dosyamızı ekledikten sonra accordion.js adında bir javascript dosyası oluşturalım kendimize.Oluşturduğumuz accordion.js dosyasını

sayfamıza <link> etiketi ile ekledikten sonra kodlarımızı yazmaya başlayalım.

Öncelikle sabitlerimizi oluşturalım

var divClass = "accordion";//accorion uygulanacak ul'lerin bulunduğu divin classı
var menuHtml = "";//sayfadaki mevcut kodları temizledikten sorna kendi kodlarımızı ekleyeceğimiz değişken.
var sonAcikUl = -1;//en son açılan ul'un id'si.Eğer -1 ise henüz hiçbiri açılmamış demektir.

Buradaki değişkenlerimizin açıklaması zaten yanlarında mevcut ancak <strong>menuHtml</strong> üzerinde durmamız sanırım iyi olacaktır. Eğer

menümüzün üzerinde ekstra birşey yer almasını istiyorsak bu değişkene atayabiliriz. Örneğin menümüzün üzerinde menu.jpg adında bir grafik yer almasını

istiyorsak

var menuHtml = "<img src="menu.jpg" />";

şeklinde değiştirebiliriz.

Kodumuzun ilk bölümü hazırlandı. Şimdi sayfamız yüklendiğinde değiştirilecek alanı bularak gerekli işlemleri yapmaya başlamamız gerekmektedir. Bu işlemleri

jQuery’nin $(document).ready fonksiyonu ile başlatıyoruz ;

$(document).ready(function(){
	var us = $('div.'+divClass+'>ul').length;//işleme girecek ul sayısını alıyoruz
	//bunları bir for döngüsü ile spanolustur fonksiyonuna atıyoruz
	for(i=0;i<us;i++)
	{
		spanOlustur(i);
	}
//fonksiyonumuz gerekli işlemleri yaptıktan sonra bize işlevsel html kodlarımız dönüyor
//Bizde bunları en başta belirlediğimiz div'in içeriğine eklemeden önce
//div'imizin içindeki html kodlarını temizliyoruz
//daha sonrada fonksiyonumuzun oltuşturduğu kodları div'imize ekliyerek işlemlerimizi tamamlıyoruz
	$('div.'+divClass).empty().html(menuHtml);
//accordion menümüz artık hazır ve geriye kalan tek şey ul etiketlerinin bulunduğu divleri kapatmak
	$('div.acilanDiv').hide();
});

Evet işlemler bitti ve menümüz hazır hayırlı olsun demeyeceğim tabii ki. Burada çağırmış olduğumuz spanOlustur fonksiyonumuz tüm

işlevselliği sağlayor. Şimdi o fonksiyonumuzu yazalım.

Not:jQuery’nin en güzel seçicilerinden olan eq’nun burada güzel bir kullanımını göreceğiz.Bu seçicinin ne işe yaradığını kısaca anlatmak gerekirse :

eq ile istediğimiz bir etiketin istediğimiz sıradaki elemanını seçebiliriz. Biz burada menümüzü oluşturan ul’leri sırası ile seçerek

içerisindeki html kodlarını alıp istediğimiz hale getiriyoruz.

function spanOlustur(ulSayi)
{
//fonksiyonumuz ile gelen ulSayi'ncı sıradaki ul'u seçiyoruz
//bu elementi ul adında bir değişkene atıyoruz.
	var ul = $('div.'+divClass+'>ul:eq('+ulSayi+')');
//ulHtml değişkenine ul'e ait html'i atıyoruz
	var ulHtml = ul.html();
//menümüzün başlıklarını oluşturmak için ul'e ait title etiketinin değerini alıyoruz.
	var spanBaslik = ul.attr('title');
//şimdi ise menümüzü oluşturuyoruz.
//öncelikle bir div oluşturup class,id ve onclick özelliklerini ayarlıyoruz.
//onclick'de accordionAc diye bir fonksiyonu tetikliyoruz.
//En son olarak da menümüzün başlığını bu dive içerik olarak ekliyoruz.
	var menu = '<div class="accordionBaslik" id="menu'+ulSayi+'" onclick="accordionAc('+ulSayi+');">'+spanBaslik+'</div>';
//başlık divinin altına bir div daha ekleyerek onada menümüzü içerik olarak göstereceğiz.
//burada dikkatinizi çekmek istediğim bir nokta var;
//az önce hazırladığımız ulHtml, ul etiketlerinin içerisinde kalan li ve a etiketlerini alıyor sadece
//bu yüzden yeni bir ul etiketi yazmak zorundayız.
	menu    += '<div id="ul'+i+'" class="acilanDiv"><ul class="accordion">'+ulHtml+'</ul></div>';
//yeni bir menu elementimiz hazır olduğuna göre bunu menuHtml değişkenine ekleyebiliriz.
	menuHtml += menu;
}

Şu anda menümüz hazır ancak kullanılabilir değil. Sebebiyse tabii ki accordionAc fonksiyonunu henüz yazmamış olmamız. Bu fonksiyonumuzuda

yazarak pluginimizi tamamlayalım.

function accordionAc(id)
{
	if(sonAcikUl!=id)//eğer açık dive tıkladı ise herhangi bir işlem yapmıyoruz.
	{
		if(sonAcikUl==-1)//buradada menüye ilk defa tıklanıp tıklanmadığını kontrol ediyoruz
		{
			$('div#div'+id).slideDown(250);//eğer ilk tıklama ise sadece açma işlemi yapıyoruz
		}
		else
		{
			$('div#div'+sonAcikUl).slideUp(250);//son açık olan divi kapatıyoruz
			$('div#div'+id).slideDown(250);//tıklanan divi açıyoruz
		}
		sonAcikUl = id;
	}
}

Artık menümüz kullanıma hazır.

Örnek uygulama için buraya tıklayabilirsiniz.

Örneği indirmek içinde buraya tıklayabilirsiniz.

Bir sonraki yazıda görüşmek dileğiyle hoşçakalın.

Ortalarda yokken çok önemli bir projede yer aldım ve jQueryTurk.com‘da yazmayada başladım.

Oraya paralel olarak yazılarımı burayada ekleyeceğim tabii ki.

Sitemize kayıt ettirdiğimiz resimleri kullanıcılara gösterirken üzerine sitemizin adını yazmak kim istemez? Eğer ticari bir kaygı varsa sanırım herkes ister. Şu andaki bir projede bu lazım olunca oturup araştırmak ve bulunca da yazmak gerekti. 

Öncelikle CodeBehind tarafına şunları ekliyoruz ;

using System.Drawing;//çizimler için
using System.Drawing.Imaging;//imagelere çizimler için
using System.Drawing.Drawing2D;//2 boyutlu çizimler için
using System.Drawing.Text;//image üzerine yazı yazabilmek için

Kütüphanelerimizi ekledikten sonra kodu bir class olarakmı kullanacağız yoksa gösterim sayfasındamı yapacağız ona karar vermemiz gerekmektedir.

 

 protected void Page_Load(object sender, EventArgs e)

    {
         //öncelikle üzerine yazı yazacağımız resmimizi 
        //seçiyoruz ve bitmap olarak tanımlıyoruz
        //resim adresini isterseniz bir değişkendende alabilirsiniz
        Bitmap img = new Bitmap(Server.MapPath("images/sunset.jpg"));

        //Bitmap'ı bir grafik olarak tanımlıyoruz
        Graphics gimg = Graphics.FromImage(img);

        //yazımızın yerleşimini hesaplıyoruz
        //yukarıdan resmin yüksekliğinin %1'i kadar boşluk veriyoruz
        double boy = img.Height * 0.01;

        //yandan ise %30 u kadar bir boşluk veriyoruz
        double en = img.Width * 0.30;

        //Smooting modeunu seçiyoruz
        gimg.SmoothingMode = SmoothingMode.AntiAlias;

        //keskinliğini belirliyoruz bu değer 0 ile 12 arasında olabilir
        gimg.TextContrast = 6;

        //yazımızın opacity'sini ayarlıyoruz. Ben beyaz ve %80 seçtim
        using (Brush semiTransparentBrush = new SolidBrush(Color.FromArgb(80, Color.White)))

        //tüm değişkenlerimiz tamam olduğuna göre 
        //artık yazabiliriz
        gimg.DrawString("www.weboutbox.com \ndeneme", new Font("Verdana", 25),semiTransparentBrush, new Point(Convert.ToInt32(en), Convert.ToInt32(boy)));

        //çıktı olarak görünecek image'in formatını belirliyoruz
        Response.ContentType = "image/jpeg";

        //Resmimizi açtık ve üzerine yazımı yazdık ancak atlamamız 
        //gereken nokta şuki biz burada sadece kullanıcıya gösterirken 
        //yazıyoruz yazıyı ve resmimiz aslında orjinal hali ile duruyor
        img.Save(Response.OutputStream, ImageFormat.Jpeg); 

        gimg.Dispose();
        img.Dispose();

    }

yandaki resimdende görebileceğiniz gibi resmimizin uzantısı .aspx iken sağ  tıklayıp  resim olarak kaydet diyebiliyoruz.

yok ben bununla yetinmiyorum diyorsanız What’s New? adresini ziyaret edebilirsiniz.