tyTabs – Ajax sekme uygulaması

Gregory Jacob tarafından jQuery için geliştirilmiş olan bir ajax tab eklentisi. Bildiğimiz genel ajax tabs örnekleri ve jQuery eklentilerinin bir benzeri  olan  bu eklentininde  diğerleri arasında pek bir farkı yok diyebilirim. Çalışma  sistemi  olarak hepsi aynı görevi  görüyor. Tek fark javascript kodlar içerisindeki fonksiyonlar. Her geliştirici  kendisine göre farklı farklı özelikler  ekliyor bu kodların içerisine. Bu eklentide ise geliştirici fade  efektinin hız  ayarlarının  basit bir şekilde yapılabilmesi için eklenti  oluşturmuş.

Kullanım

• Head etiketleri arasına eklenmesi gereken bölümler.

<script type="text/javascript" src="https:////ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="tytabs.jquery.min.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css" />

JavaScript :

<script type="text/javascript">
<!--
$(document).ready(function(){
	$("#tabsholder").tytabs({
							tabinit:"2",
							fadespeed:"fast"
							});
	$("#tabsholder2").tytabs({
							prefixtabs:"tabz",
							prefixcontent:"contentz",
							classcontent:"tabscontent",
							tabinit:"3",
							catchget:"tab2",
							fadespeed:"normal"
							});
});
-->
</script>

Css : 

<style type="text/css">
<!--
.center {
width:60%;
margin:20px auto 0 auto;
}

.marginbot {
margin-bottom:15px;
}

ul.list li {
list-style-type:none;
margin-left:20px;
}

ul.tabs {
width:100%;
overflow:hidden;
}

ul.tabs li {
list-style-type:none;
display:block;
float:left;
color:#fff;
padding:8px;
margin-right:2px;
border-bottom:2px solid #2f2f2f;
background-color:#1f5e6f;
-moz-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
cursor:pointer;
}

ul.tabs li:hover {
background-color:#43b0ce;
}

ul.tabs li.current {
border-bottom:2px solid #43b0ce;
background-color:#43b0ce;
padding:8px;
}

.tabscontent {
border-top:2px solid #43b0ce;
padding:8px 0 0 0;
display:none;
width:100%;
text-align:justify;
}
-->
</style>

• Body etiketleri arasına eklenmesi gereken  bölüm.

Html : 

 <div id="tabsholder">

        <ul class="tabs">
            <li id="tab1">Spiderman</li>
            <li id="tab2">Batman</li>
            <li id="tab3">Hulk</li>
            <li id="tab4">Daredevil</li>
        </ul>
        <div class="contents marginbot">

            <div id="content1" class="tabscontent">
tab 1 icerik
            </div>
            <div id="content2" class="tabscontent">
tab 2 icerik
            </div>
            <div id="content3" class="tabscontent">
tab 3 icerik
			</div>
            <div id="content4" class="tabscontent">
tab 4 icerik
        </div>
    </div>