Buradan birinci ve hiç çalışmayacak örneğimize bakabilirsiniz. Bu sayfamızda, sayfa yüklendikten sonra prettyPhoto ile rel’i uygun olanları bir galeri haline getiriyoruz. Ancak sayfa açıldığı anda bizim 2 galerimizde sayfada yüklü değil. Bu nedenle linklerimize prettyPhoto bind edilemiyor. Biz galeriyi .load yöntemi ile çağırırken birde function ekleyerek çağırdığımız sayfadan gelen linklerin onclick event’ine prettyPhoto’yı bind edelim.

birinci örnekteki linklerin onclick evenlerini şöyle düzenliyoruz ;

onclick="$('#resimler').load('images1.html',function(){ prettyBind(); });"

Bu eklemeyi yaptıktan sonra birde prettyBind adında function yazmamız gerekecek. Bu function ile load işleminden sonra linklere galeri özelliğini ekleyeceğiz. Fonksiyonumuz şöyle olacak;

function  prettyBind(){
$("a[rel^='prettyPhoto']").prettyPhoto();
}

Örneğimizin yeni haline buradan bakabilirsiniz.

Bu fonksiyonu ekledikten sonra örneğimizi açıp galerilere bir kaç kez tıkladıktan sonra firebug ile kodlarımızı incelediğimizde şöyle bir tablo çıkıyor karşımıza ;

Kodlarda böyle bir tekrar söz konusu olunca tabii ki gösterimde de sıkıntılar ortaya çıkıyor. Siz sayfayı açarak kendi denemelerinizi yapabilirsiniz ancak biz yinede bir resim ile gösterelim.

Peki bunları engellemek için ne yapmalıyız? Evet, yazımızın konusu da tam olarak bu noktada başlıyor. Bunu düzeltmenin 2 yöntemi var birisi prettyBind fonksiyonuna müdahale ederek yapabiliriz. Ancak bu geçici bir çözüm olacaktır. Biz burada prettyPhoto.js’ye müdahale ederek tüm projeyi hatta ileride yapacağımız projelerimizide bu dertten kurtarmış olacağız.

Şimdi, prettyPhoto.js dosyasını açıyoruz,

function _buildOverlay(){

kod bloğunu buluyoruz ve hemen altına

$('div.pp_pic_holder,div.pp_overlay,div.ppt').remove();

kodlarını yapıştırıyoruz. Peki burada ne yapıyoruz? Linkleri bir each ile dönmeye başladığı zamanda, daha önceki galerileri .load ile her çağırdığımızda sayfaya otomatik olarak eklenen “pp_pic_holder,pp_overlay,ppt” classlarına sahip divleri temizliyoruz, fonksiyon yenisini ekliyor. Böylece karışıklık ortadan kalkmış oluyor.

Son olarak yeni prettyPhoto.js dosyamız ile yeni ve sorunsuz galerimize bakalım. Buradan galerimizin son haline bakabilirsiniz.

prettyPhoto.js dosyamızın son haline 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.

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.

Her zaman gerekmesede işinizin düştüğü zamanlar mutlaka olmuştur. Benim bir projede, proje tamamlandıktan sonra QueryString‘den bilgi çekmem gerekti. Yazılım tarafı tamamlandığı için bir şey yapılması uzun zaman alacağından yazılımcının can simidi olan Javascript’e başvurmayı denedim ve şimdilerde çok hoşuma giden bir script çıktı ortaya.

Şimdi küçük ama işlevsel olan fonksiyonumuzu yazalım;

//adres çubuğundaki adresi tamamen alıyoruz
var tumAdres=String(this.location);
//adresimizi split ile "?"'den ikiye bölüyoruz
veri=tumAdres.split("?")[1];
//verimizi aldığımıza göre kullanalım
//şimdilik alert olarak görüntüleyelim
alert(veri);

Bu basit örneğimize buradan ulaşabilirsiniz.

Peki bu nasıl bir işlevsellik katabilirki bize? Eğer bir sayfada birden fazla saklı öğeniz (display:none) varsa işinize yarama ihtimalide vardır.

Kodumuzda biraz değişikliğe gittikten sonraki örneğimizde daha açık bir şekilde anlayacağınıza eminim.

//adres çubuğundaki adresi tamamen alıyoruz
var tumAdres=String(this.location);
//adresimizi split ile "?"'den ikiye bölüyoruz
veri=tumAdres.split("?")[1];
//bu veri bir öğenin id'si olsun
//aldığımız id ile bir eleman varmı bakalım
if(document.getElementById(veri){
//eğer var ise display i block olsun
document.getElementById(veri).style.display = 'block';
}

Bu örneğimizede buradan ulaşabilirsiniz. Burada dikkat etmemiz gereken nokta; javascript kodlarımızın işlem yapılacak olan divlerden sonra yazılması veya window.onload’a tanımlanmasıdır.

Eğer tam manası ile Reques.QueryString fonksiyonuna ihtiyacınız var ise bunun için biraz zaman ayırmalı veya http://andrewu.co.uk/tools/request/ bu adresi ziyaret etmelisiniz.

• LiveSearch John Nunemaker versiyonu, prototype versiyonu.
• John Resig’in modifiyeli versiyonu.

Hangisi daha iyi, daha performanslı derseniz, şu an için hiç deneme şansım olmadı ve eldeki örneklerden ise bu daha iyi diyemeceğimiz için sytanxı düzgün olan versiyonu seçmek daha mantıklı sanırım.

Li tagları arasında olan arama şemantiğini istediğiniz gibi değiştirebilirsiniz. Aramanın en göz alıcı noktası ise aradığınız (kelime/harf/cümle) betiği harf harf alması.

Bu ilk bakışta güzel bir örnek ancak kullanıma göre can sıkabilir.

Şimdi kendi ihtiyaçlarımız doğrultusunda basit bir js kütüphanesi yazmaya başlayalım.

Kütüphanemizdeki en temel öğe doğal olarak bir DOM referansı olan document.getElementById‘dır. Bir çok js işleminde ihtiyaç duyduğumuz bu referansa en kolay ve akılda kalıcı şekilde nasıl ulaşabiliriz? PHP ve Js Kütüphanesi kullananlarımızın alışkın olduğu $ ile ulaşalım. O zaman kütüphanemizin ilk fonksiyonunu yazalım ;

function $(id)//buradada parametre olarak idyi kullanıyoruz
{
      return document.getElementById(id);
}

Bu fonksiyonumuz ile ilgili bir kaç örneğe buradan ulaşabilirsiniz.

Birinci fonksiyonumuzu oluşturduk. Bu fonksiyonu kullandıkça çok seveceğinize eminim. Çünkü işlerimizi çok kolaylaştırıyor.

İkinci fonksiyonumuz olan $v, id’sini verdiğimiz bir tag’ın (input,select,textarea tagları) value’sunu döndürecek bize.

function $v(id)//buradada parametre olarak idyi kullanıyoruz
{
return document.getElementById(id).value;
}

Bu fonksiyonumuz ile ilgili bir kaç örneğe buradan ulaşabilirsiniz.

Burada dikkat çekmek istediğim bir nokta var. Bu fonksiyon ile tagların sadece değerlerini alabiliyoruz. Yani bir inputun değerini değiştirmek için şu kodu yazarsak çalışmayacaktır :

$v('id') = 'yenideğer';

Bu işlemi gören bir fonksiyonu, az önce yazdığımız $ fonksiyonundan türetebiliriz :

function $v(id)//buradada parametre olarak idyi kullanıyoruz
{
return document.getElementById(id).value;
}

Üçüncü fonksiyonumuz olan $cssC, önceki fonksiyonlara göre daha komplike bir yapıya sahip olacak. Bu fonksiyonumuza 3 parametre yollayarak istediğimiz HTML etiketi üzerinde CSS değişikliklerini gerçekleştireceğiz. Bu fonksiyonumuzda paramaetre sayımız fazla olduğu için öncelikle parametrelerimizi açıklayalım ;

id : Üzerinde değişiklik yapmak istediğimiz etiketimizin tanımlayıcı değeri.
tag : Etiketimizin üzerinde değişiklik yapmak istediğimiz CSS etiketini temsil ediyor.
yenideger : CSS etiketinin alacağı yeni değeri temsil ediyor.

Fonksiyonumuz aşağıdaki gibi ;

function $cssC(id,tag,yenideger)
{
satir = '$(id).style.'+tag+' = yenideger'; //fonksiyonumuzu satir adlı bir degisken atıyoruz
eval(satir); //eval ile satir değişkenini çalıştırıyoruz ve fonksiyonumuz görevini yerine getiriyoruz
}

Bu fonksiyonumuz ile ilgili bir kaç örneğe buradan ulaşabilirsiniz.

Başlangıç olarak 3 fonksiyon tanımlamış bulunmaktayız. Bir sonraki yazımızda fonksiyonlarımızı biraz daha komplike hala getirerek devam etmek dileğiyle.

Ehh adamlar yapmışken bakmamak olmaz dedim.İncelemelerim sonunda gördümki harbiden çok güzel sistemler, nerede ise örnek aldıklarından başarılılar. Uygulamaların en güzel yanları ise gayet pratik olmaları.

Uygulamaları sıralamak gerekirse;

• Lightbox : herkesin bildiği ve şu an sitede de kullandığım resim gösterim aracının bir benzeri. Bence gayet başarılı.
• image menu: Bu uygulama ise flasha rakip bir css uygulaması.Flash kullanmak istemeyenler için gayet uygun bir çalışma.
• Validate: Form kontrollerine js ile farklı bir açıdan bakmışlar. .NET’teki form kontrollerine benzettim ben şekil olarak ama, sayfa ortasında dandun seslerle çıkan uyarılar yerine böyle bir uygulama sanırım daha sempatik olur
• Rounded Corners: Resim ve tabloların köşelerine ovalleştirmek için kullanılabilecek çok hoş bir js-css çalışması.
• Sortable Table: Adından da anlayacağınız gibi tablo içinde sıralama uygulaması

İnşallah ilerleyen zamanlarda bunlarla ilgili ufak tefek scriptlere yer vereceğim.

Bu çalışma sırasında hazırladığım ve bir çok kişinin işine yarayacağını düşündüğüm bir kodu anlatacağım.

Başlığımızın konusu olan Js ile Div oluşturan kod şöyle

function yap(){
var varmi = document.getElementById(’d');<em>//d id’li bir dokümanı tanımlıyoruz</em>
if (!varmi){ // eğer bu döküman yok ise oluşturacağız
var newdiv = document.createElement(’div’); //<em>burada bir adet div oluşturuyoruz</em>
newdiv.setAttribute(’id’, “d”);//id’sini d olarak tanımlıyoruz
newdiv.style.width = 300;//genişliğini belirliyoruz
newdiv.style.height = 300;//yüksekliğini belirliyoruz
newdiv.style.position = “absolute”;//pozisyonunu absolute olarak belirliyoruz
newdiv.style.left = 150; //sol boşluğu ayarlıyoruz
newdiv.style.top = 150; //üst taraf boşluğu
newdiv.style.background = “#ff”; //arkaplan rengini belirliyoruz
newdiv.style.border = “4px solid #000″; // kenarlık rengi ve stili
newdiv.style.padding = “5px”; //div dolgusu
document.body.appendChild(newdiv); // en son olarak oluşturduğumuz div’i dosyamıza ekliyoruz
}
}

Yukarıdaki kod ile resmimizi göstereceğimiz div‘i oluşturmuş olduk.Şimdide bu div’in içerisine 1 adet resim tag’ı oluşturalım.

function resimac(adres,id){
var resim =  document.createElement(’img’); // bir img tagıoluşturuyoruz
resim.setAttribute(’src’,adres); // src’sunu adres diye bir değişkene atıyoruz
resim.setAttribute(’id’,'res’); //id’sini res olarak belirliyoruz
var veri = document.getElementById(’d').appendChild(resim); //en son olarak id’si <em>d </em>olan bir element’e id’si res olan resim tagımızı ekliyoruz
}

Resim açma işlemlerimiz tamamlanmış bulunuyor. Bu işlemlerin ardından, açmış olduğumuz div’i ve içerisindeki resmi yok edecek bir fonksiyon daha yazalım

function sil(id) {
var silinecek = document.getElementById(id); // silinecek nesneyi belirliyoruz
document.body.removeChild(silinecek); // en son olarak nesneyi siliyoruz
}

Dosyalar;
resimAc.js
index.html

Neyse kodumuza gelelim. Kodumuz yazılış amacı olarak tüm divleri kapatmaya yönelik ve aşağıdaki gibi orjinali ;

function divkapat(islem) {
var tum_divler = document.getElementsByTagName(’div’); //divleri tanımladık
var tum_divler_adet = tum_divler.length;//kaç adet div var ona bakıyoruz
var i; //değişkenimizi tanımladık
for(i=0; i< tum_divler_adet; i++) {
tum_divler[i].style.display = islem
}  //bir for döngüsü ile divlerimizin style.display özelliğini divkapat fonksiyonunda gönderdiğim parametre ile değiştirdik.
}

< a href=# onClick=divkapat(’none’); >açkapa< /a>
< a href=# onClick=divkapat(”); >açkapa< /a>

Bu haliyle bir işime yaramıyor .Neden derseniz ; son zamanlarda Tablosuz tasarıma takmış biri olarak, tüm divlerimin kapanması demek sayfanın bembeyaz bir hal alması demektirki bunu hiç istemem. Menü başlıklarını div, açılacak kısımları span olarak tanımladım. Javascript kodumuzuda şu şekilde düzenledim ;

function divkapat(islem,oge,ogeislem) //yukarıdaki koddan farklı ama açıklamasını aşağıda yapacağım
{
var tum_divler = document.getElementsByTagName(’span’);
var tum_divler_adet = tum_divler.length; var i;
for(i=0; i< tum_divler_adet; i++) {
tum_divler[i].style.display = islem
}
document.getElementById(oge).style.display = ogeislem ;
}

İlk kodumuzda fonksiyonumuz tek parametre ile çağrılırken ben bu sayıyı 3 ‘e çıkardım. Sebebine gelmeden önce 1 adet menü örneğinin kodlarınıda yazalım

<div id="1″ class="ac" onclick="divkapat('none','1a','');">bu 1</div>
<span id="1a" class="acilan" style="display: none">Aa 1a alt menu</span>
<div id="2″ class="ac" onclick="divkapat('none','2b','');">bu 2</div>
<span id="2b" class="acilan" style="display: none">Aa 2b alt menu</span>
<div id="3″ class="ac" onclick="divkapat('none','3c','');">bu 3</div>
<span id="3c" class="acilan" style="display: none">Aa buda 3c alt menu </span>

3 parametreli fonksiyon tetikleyicimiz şu satırlarda = onClick=”divkapat(’none’,’1a’,”)”
Neden 3 parametreli,

• 1. parametre tüm spanları kapatıyor.
• 2. parametre işlem yapılaacak olan span Id’sini belirliyor
• 3. parametre, 2. parametrede belirtilen span’ın display değerini alıyor

Sanırım 3. parametrenin boş olduğuna dikkat etmişsinizdir. Başlangıç değer olarak “display:none” alıyorlar, görünür hale getirmek için ” kullanıyoruz. Peki boş göndereceksek neden 3. parametreyi yolluyoruz. İşimizi tam yapmak için açtığımız menülere birerde kapatma butonu bırakırız diye düşünerek yaptım Kapatma butonun linkide şöyle olacak onClick=”divkapat(’none’,’1a’,’none’)” .

Kullanılabilir haline ulaşmak için Buraya tıklayınız.

Örnek kodları İndirmek için Buraya tıklayınız.