jQuery accordion kullanımı

[mTanriverdi]

jQuery user interface kullanıcılar için çok güzel tasarımlar sunmasının yanı sıra bir çok özelliğide içinde sunmaktadır. jQuery User Interface ile seçeceğiniz tasarım hem sitenizi güzelleştirecek ve doğru kullanımı ile sitenize gerçekten hız ve canlılık katacaktır. Bakın jQuery Accordion menü demosunu burada kullanmak için aşağıdaki kullanım örneğini inceleyebilirsiniz.
Kullanım Örneği :

<link rel="stylesheet" href="theme/jquery.ui.all.css">
<script src="jquery-1.4.4.js"></script>
<script src="ui/jquery.ui.core.js"></script>
<script src="ui/jquery.ui.widget.js"></script>
<script src="ui/jquery.ui.accordion.js"></script>

<script>
$(function() {
$( "#tabmenu" ).accordion();
});
</script>

<div id="tabmenu">
<h3><a href="#">Bölüm 1</a></h3>
<div>
<p>
Mustafa Tanrırverdi tarafından bu makale hazırlanmıştır.
Hazırlıyorsunda niye reklam yapıyorsunuz?
Reklamı seviyorum, tilpark.com
Helal, coderler.com, mtanriverdi.blogspot.com
</p>
</div>
<h3><a href="#">Bölüm 2</a></h3>
<div>
Mustafa Tanrırverdi tarafından bu makale hazırlanmıştır.
Hazırlıyorsunda niye reklam yapıyorsunuz?
Reklamı seviyorum, tilpark.com
Helal, coderler.com, mtanriverdi.blogspot.com
</div>
</div>

Şimdi kodları biraz açıklayalım. Aşağıdaki kod parçaları ile jQuery user interface dosyalarını sayfamıza tanıtımını yapıyoruz. Bunlar sizin kullandığınız klasörlere göre değişebilir. Eğer çalışmama gibi bi sorun çıkar ise büyük ihtimalle aşağıdaki nedenlerden dolayı çalışmayacaktır.
Kod açıklaması :

<link rel="stylesheet" href="theme/jquery.ui.all.css">
<script src="jquery-1.4.4.js"></script>
<script src="ui/jquery.ui.core.js"></script>
<script src="ui/jquery.ui.widget.js"></script>
<script src="ui/jquery.ui.accordion.js"></script>

Aşağıdaki kod parçası ile ID değeri #tabmenu olan bölümü accordiona çevir komutunu vermiş olduk. Bir alt kısımdaki html kod yapısında gördüğünüz gibi ilk div'in ID değerini tabmenu olarak tanıttık.
Kod açıklaması :

<script>
$(function() {
$( "#tabmenu" ).accordion();
});
</script>

jQuery user interface accordion menü kullanımı