jQuery ile Tab uygulaması: CSTABS
Daha önce jQuery ile basit bir tab uygulaması yapıyoruz başlıklı yazımda sizlere jQuery ile basit bir tab uygulaması geliştirmeyi göstermiştim. Bunu güzel bir tasarım altında geliştirdim ve şimdi sizlere sunuyorum.
Uygulamayı Internet Explorer ve Firefox tarayıcılarında denedim her ikisindede başarılı bir biçimde çalıştı. Bunun yanı sıra diğer AJAX kütüphaneleri ilede çakışmayacak biçimde kodladım ve şunuda belirtmek istiyorum bu uygulamayı ihityacımdan dolayı kodladım şuana kadar bir çok tab uygulaması denedim bunlardan en iyisi Yahoo tarafından geliştirilen tab uygulamasıydı. Diğerlerinde her seferinde mutlaka bir hata aldım veya sayfamı yavaşlattı. Anasayfamda da bu uygulamayı kullandığımı görebilirsiniz.
Birazda özelliklerinden bahsedelim. Uygulamanın üç adet geçiş bulunuyor. Bunların ikisi efekt biri ise efektsiz geçiş. Eğer tab içerisinde fazla veri göstericekseniz efektsiz geçişi tavsiye ederim çünkü bende anasayfamda efektsiz geçiş kullanıyorum.
Demoya buradan bakabilirsiniz
Uygulamayı buradan indirebilirsiniz
Kodlar diğer tab uygulamalarına göre biraz daha fazla fakat verimi konusunda memnun kalacağınıza eminim. Şimdi kodlara ve geçiş efektlerini ayarlama konusuna göz atalım.
<head>…<head> kodları arasına dahil etmeniz gereken kodlar;
<script src="jquery-latest.js" type="text/javascript"></script> <script src="cstabs1.1.js" type="text/javascript"></script>
Uygulamanın kendi kodları;
<!-- Codersstuff.com Tab --> <div id="cs"> <div id="cstabhead">Codersstuff.com</div> <ul class="cstabs"> <li><a class="1" onclick="tabslide(1,'3');">Son yazılar</a></li> <li><a class="2" onclick="tabslide(2,'2');">Yazılımcılık</a></li> <li><a class="3" onclick="tabslide(3,'1');">Tasarım</a></li> </ul> <div class="tab-content"> <div id="1" class="tab">Tab1 in içeriği</div> <div id="2" class="tab">Tab2 nin içeriği</div> <div id="3" class="tab">Tab3 ün içeriği</div> </div> </div> <!-- Codersstuff.com Tab -->
Yukarıda gördüğünüz kodlar hakkında söylemek istediğim birkaç şey var öncelikle onclick=”tabslide($x,’$y’);” koduna değinelim.
$x : Gördüğünüz gibi cstabs sınıfın altındaki listeleme kodlarının sınıfları, $x değeri ve tab-content sıfını altındaki tab sınıflı id değerleri 1,2,3 şeklinde gitmiş bu demek oluyorki hepsi birbirleriyle bağlantılı yeni bir tab eklemek isterseniz bu düzene göre eklemelisiniz.
Şimdi gelelim efektli ve efektsiz geçişlere. onclick=”tabslide($x,’$y’);” burada efekti ayarlayan değişken $y dir. Bu değere 1 veya 2 atarsanız efekli bir geçiş elde edersiniz 3 değeri ise size efektsiz bir geçiş sunar.
merhabalar efendim.. cok güzel bi olay bu menü işi ama ben hazır sizinde yayınladığınız 3 tab dan daha fazlasını yapamıyorum.ugrasdım ugrasdım daha fazla tab ekleyemedım biraz yardımcı olurmusunuz rica etsem.benim gibi pek fazla bilgisi olmayan insanlarda yapabilse.yardımlarınız için teşekkür ederim..