jQuery pTab Eklentisi

Tayfun Erbilen ekledi. 13 Eylül 2012 Perşembe

Merhaba arkadaşlar, bildiğiniz gibi arayüz kodlaması yaparken bir çok tasarımda karşımıza çıkar bu tab kısımları.. jQuery'i bilmeyen birisi içinde hep kaçış noktalarıdır bu tür tasarımlar.. Ancak hazırladığım basit tab uygulaması ile artık bu kısımları atlamak zorunda değilsiniz..

Aslında zamanında kullanmak için birkaç tane aramıştım.. Kimisinin ben kullanımını anlamamıştım, kimiside fazla gereksiz şeyler içeriyordu.. Bir süre sonra oturup çok basit bir eklenti yazdım ve bunu kullanmaya başladım..

Bu eklentinin nasıl kullanılacağı ve neler yapabileceğiniz hakkında kısa bir video hazırladım, izleyip bu eklentiyi sizde basitçe kullanabilirsiniz.

Kullanım Videosu;



Basit Bir Demo Örneği;
- Html Yapısı

<ul class="tab">
 <li><a href="#">1. Tab</a></li>
 <li><a href="#">2. Tab</a></li>
 <li><a href="#">3. Tab</a></li>
</ul>

<div class="content">1. tab içeriği</div>
<div class="content">2. tab içeriği</div>
<div class="content">3. tab içeriği</div>

- Css Yapısı

ul, li {padding: 0; margin: 0; list-style: none}
ul.tab {overflow: auto; font: 12px Arial}
ul.tab li {float: left; margin-right: 5px}
ul.tab li a {display: block; padding: 5px; background: #f1f1f1}
ul.tab li.aktif a {color: red; background: #ddd}
.content {border: 5px solid #ddd; padding: 10px}

- jQuery kütüphanesini ve pTab eklentisini sayfanıza dahil ettikten sonra aşağıdaki kodu yazmanız yeterli;

$(function(){
 
 $("ul.tab").pTab({
  content: "content",
  efekt: "fade",
  duration: 250
 });
 
});

İndirin / Download;
http://yadi.sk/d/ia9vcW09ejPu Gözat