Karalama Defteri » accordion

jQuery Accordion Plugin

admin — Fri, 31 Oct 2008 16:33:37 +0000

Bir önceki yazımda jQuery ile accordion menü hazırlamayı anlatmıştım. Şimdi ise o functionun plugin halini sizlerle paylaşıyorum.

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:'Fade - ul ',
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.

    
      
        
            Madde 1
            Madde 2
            Madde 3
        

        
            Madde 2-1
            Madde 2-2
            Madde 2-3
        

        
            Madde 3-1
            Madde 3-2
            Madde 3-3

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.

Jquery ile Accordion menu hazırlayalım

admin — Tue, 28 Oct 2008 16:14:34 +0000

Neredeyse bir web 2.0 standardı olan accordion menüler sayfalarımızında vazgeçilmezi haline geldi. Şimdi yazacağımız plugin ile accordion menü hazırlamak çok

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;




		
Accordion Menü


	
		
			Madde 1
			Madde 2
			Madde 3
		
		
			Madde 2-1
			Madde 2-2
			Madde 2-3
		
		
			Madde 3-1
			Madde 3-2
			Madde 3-3

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 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 menuHtml ü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 = "";

ş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
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 = ''+spanBaslik+'';
//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    += ''+ulHtml+'';
//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.

Açılan-Kapanan Menü

admin — Sat, 07 Apr 2007 20:22:50 +0000

Dün itibariyle ilk .Net projeme başladım. Biraz geniş bir proje, Sql sorgularından 1 tanesi 3 kb ve sanırım 20 taneye yakın yazarız. Projede frame ve açılan menülere ihtiyacımız vardı. del.icio.us‘ umda tüm divleri kapat diye bir dil olduğu geldi aklıma. Bu arada o kodda bildirgec.org‘ da yer alıyordu, buraya tıklayarak koda ulaşbilirsiniz.

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&amp;amp;amp;lt; 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&amp;amp;amp;lt; 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

bu 1
Aa 1a alt menu
bu 2
Aa 2b alt menu
bu 3
Aa buda 3c alt menu

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.