Jquery Accordion Menü Aktif Özelliği
Ağu 26, 2011 | 674 kez okundu ! | JQuery
Umarım anlatacağım jquery accordion menu trick size de faydalı olur. Başlıkta anlatmak istediğim şeye geçelim hemen.
Sitemizde bir accordion menü olduğunu düşünelim. Ben burada tek seviye menüden bahsedeceğim çünkü bana lazım olan noktada tek seviye yeterli olmaktaydı. Çoklu seviyede de durum değişmeyecektir.Accordion menümüzde 3. seviyeden bir linke tıkladığımızda sayfanın refresh olması durumunda accordion menü kapanır ve ilk seviyeye geri döner. Siz her hangi bir ayar yapmadıkça bu böyle çalışacaktır. Şimdi biz burada ufaf bir trick’e yani püf noktasına değineceğiz.
Jquery UI Accordion menü kullanıyorsanız (farklı türevlerinde de muhtemelen optionlar vardır) eğer accordion seçici içinde göndereceğiniz attribute’ler arasında active attribute’u vardır. Bunun anlamı şu; buraya yazacağım index numarası benim accordion menümün hangi seviyesinin açık geleceğini gösterir.Tabi bunun düzgün gözükmesi için ayrıca collapsible attribute’u da true yapılmalıdır.
$(function() {
$("#accordion").accordion({ autoHeight: false,collapsible: true });
});
Yukarıdaki ilk kod örneğimizde henüz aktive özelliği yok. Şimdi bu özelliği de ekleyelim.
$(function() {
$("#accordion").accordion({ autoHeight: false,
collapsible: true,
active:3 });
});
Gördüğünüz gibi bu kadar basit. Yukarıdaki kod sayesinde sayfa refresh olduğunda 3. seviye link bloğu açık olacaktır.
Şimdi gelelim asıl mevzuya. Yukarıda manuel olarak verdiğimiz sayı ile işimizi gördük. Ama bizim linklerimiz dinamik olarak oluşuyorsa yani yönetim panelinden istediğimiz zaman link ekleyip çıkartabiliyorsak ne olacak ?
Bu durumda linklerimizi oluşturduğumuz kodumuzda ufak bir değişiklik yapmamız gerekecek. Her linkin sonun bir değişken ile kaçıncı seviye olduğunu söylemek zorundayız. Örnek olarak oluşacak link listesi şöyle olmalı.
<div id="accordion">
<h3 id="baslik">
<a href='#'>Link Seviye 1</a>
</h3>
<div>
<ul>
<li><a href="?id=1&act=0">Link 1</a></li>
<li><a href="?id=2&act=0">Link 2</a></li>
<li><a href="?id=3&act=0">Link 3</a></li>
</ul>
</div>
<h3 id="baslik">
<a href='#'>Link Seviye 2</a>
</h3>
<div>
<ul>
<li><a href="?uid=4&act=1">Link 1</a></li>
<li><a href="?uid=5&act=1">Link 2</a></li>
<li><a href="?uid=6&act=1">Link 3</a></li>
<li><a href="?uid=7&act=1">Link 4</a></li>
<li><a href="?uid=8&act=1">Link 5</a></li>
</ul>
</div>
<h3 id="baslik">
<a href='#'>Link Seviye 3</a>
</h3>
<div>
<ul>
<li><a href="?uid=9&act=2">Link 1</a></li>
<li><a href="?uid=10&act=2">Link 2</a></li>
<li><a href="?uid=11&act=2">Link 3</a></li>
<li><a href="?uid=12&act=2">Link 4</a></li>
</ul>
</div>
</div>
Dikkat ettiyseniz her linkte bir `id` değişkeni birde , `act` değişkeni var. Biz `act` değişkeni ile ilgileniyoruz. Bu değişken bize o linkin hangi seviyede olduğunu bildirmektedir.
Son adımda ise yukarıda active özelliğine nasıl bu sayıyı gönderiyoruz buna bir bakalım. Şimdiden söyleyeyim herkesin kodlama mantığı farklı olduğu için belki burada göstereceğim kod size hiç uymayacaktır. Ama en azından bir fikir olabilir.
$(function() {
$("#accordion").accordion({
autoHeight: false,
collapsible: true,
active:<? if (is_numeric(substr($_SERVER['QUERY_STRING'],-1))) {
echo substr($_SERVER['QUERY_STRING'],-1);
} else {
echo "0";
} ?> });
});
Yukarıdaki kodda da gördüğümüz gibi o andaki URL yi alıp string işlemlerine sokup en sonundaki rakamı yakalıyoruz. Böylece hangi seviyedeki link tıklanmış bulabiliyoruz. Ayırca is_numeric kontrolü yaparak da URL de farklı bir linke tıkladığımızda sayı gönderilemeyeceği için yine 1. seviye linkin açılmasını sağladık.
Ufak bir hatırlatma aktiflik sırası 0′dan başlamaktadır.
Türkiyede bulunan viagra resmi sitesi.En iyi cialis alışveriş sitesi.Levitra size mutluluk verecektir.
Tags: accordion menü, aktif, html, jquery, php, seviye, tıklayınca açık kalsın
Yorum Gönder