JQuery Accordion Panel

Bu örneğimizde JQuery’nin Ui eklentisini kullanarak Accordion Panel yapacağız.

İlk olarak JQuery’nin sayfasından, JQuery ve JQuery-Ui eklenti dosyalarını indiriyoruz. ui.css ve theme.css dosyalarını çalışma klasörünün içerisindeki eklenti klasörünün içerisine kopyalıyoruz.

Dosyaların ağaç yapısı şu şekilde olacaktır;

Head etiketlerinin arasına ui.css ve theme.css dosyalarını ekliyoruz.


<link href="eklenti/jq-ui/jquery-ui.css" rel="stylesheet">
<link href="eklenti/jq-ui/jquery-ui.theme.min.css" rel="stylesheet">

Body etiketlerinin arasına da ilk olarak JQuery dosyasını daha sonra JQuery-ui dosyasının yolunu yazarak çalışma dosyamıza ekliyoruz. Varsa kendi JavaScript dosyamızı en sona ekliyoruz. Ben burada harici yerine dahili kullandığım için eklemiyorum.


<a href="http://js/jquery-1.11.1.min.js">http://js/jquery-1.11.1.min.js</a>
<a href="http://eklenti/jq-ui/jquery-ui.js">http://eklenti/jq-ui/jquery-ui.js</a>

<a href="http://js/jquery-1.11.1.min.js">http://js/jquery-1.11.1.min.js</a>

<a href="http://eklenti/jq-ui/jquery-ui.js">http://eklenti/jq-ui/jquery-ui.js</a>

HTML: Accordion panelini oluşturmak için ilk olarak bir div oluşturuyoruz. Daha sonra h3 etiketiyle başlıkları oluşturuyoruz. Son olarak bir div daha oluşturarak içerisine p etiketi açıyoruz ve yazılarımızı yazıyoruz. İki div açmamızın sebebi ise ilk açtığımız div genel olarak accordion panelini gösteriyor. Açılma olaylarını bu divden kontrol edeceğiz. İkinci div ise yazıların bulunduğu bölüm için.


<div id="panel1">
<h3>Web Tasarımı</h3>
<div>
Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir.
</div>

<h3>Grafik Animasyon</h3>
<div>
Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir.
</div>

<h3>Veritabanı</h3>
<div>
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır.Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.
</div>

</div></div>

<h3>Web Tasarımı</h3>

<div>

Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir.

</div>

<h3>Grafik Animasyon</h3>

<div>

Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir.

</div>

<h3>Veritabanı</h3>

<div>

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır.Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.

</div>

</div></div>

JQuery: İlk olarak sayfa yüklendikten sonra çalışması için .ready olayını kullanılıyoruz. Daha sonra ilk divin id’sini alarak ‘accordion’ özelliğini yazıyoruz. Bu şekilde ön izleme yapıldığında panel oluşacaktır.


$(document).ready(function(){
    	$( "#panel1" ).accordion({});
 });

$(document).ready(function(){

$( "#panel1" ).accordion({});

});

Birkaç düzenleme ve ekleme yapalım. Öncelikle Sayfa yüklendiğinde açılan pencerelerden en alttakinin aktif olmasını sağlayalım. Bunun için accordion özelliğinin parantezleri içerisine çalışacak kodlarımızı yazıyoruz. Kullanacağımız kod ‘active’. Açılan açıklamaların sıralaması 0(sıfır)’dan başlamaktadır. Yani en alttaki pencere 2 olarak algılanıyor.


$(document).ready(function(){
   $( "#panel1" ).accordion({
	active:2
    });
 });

$(document).ready(function(){

$( "#panel1" ).accordion({

active:2

});

Bir diğer özelliğimiz ‘animate’. Pencerelerin açılma süresini buradan ayarlıyoruz.


$(document).ready(function(){
    $( "#panel1" ).accordion({
	active:2,
	animate:500
    });
 });

$(document).ready(function(){

$( "#panel1" ).accordion({

active:2,

animate:500

});

Pencerelerin hepsinin kapanabilmesini sağlamak için ise ‘collapsible’ özelliğini kullanıyoruz. ‘true’ ve ‘false’ olarak iki değer alabilen ‘collapsible’, ‘true’ değerini aldığında pencereleri istediğimiz gibi kapatabiliriz. ‘false’ değerini aldığında ise pencerelerden bir tanesi sürekli açık durmaktadır. ‘false’ değeri varsayılan değerdir.


$(document).ready(function(){
   $( "#panel1" ).accordion({
	active:2,
	animate:500,
	collapsible: true
    });
});

$(document).ready(function(){

$( "#panel1" ).accordion({

active:2,

animate:500,

collapsible: true

});

Bu örneğimizde göstereceğim son özellik ‘event’ özelliği. Varsayılan değeri ‘click’ yani tıklamadır. İstersek bunu ‘mouseover’ yapabiliriz. Böylece üzerine geldiğimizde tıklama olayını gerçekleştirmeden pencereler açılacaktır.


$(document).ready(function(){
   $( "#panel1" ).accordion({
	active:2,
	animate:500,
	collapsible: true,
	event: "mouseover"
    });
 });

$(document).ready(function(){

$( "#panel1" ).accordion({

active:2,

animate:500,

collapsible: true,

event: "mouseover"

});

Daha çok Accordion özelliğine şu linkten ulaşabilirsiniz;

http://api.jqueryui.com/accordion/

Bunu paylaş:

Şunlar da Hoşunuza Gidebilir

Yorum yap X

Web Tasarım & Programlama sitesinden daha fazla şey keşfedin