tyTabs – Ajax sekme uygulaması

tyTabs

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.
jQuery, tyTabs  ve Css url adresleri :  
<script type="text/javascript" src="http:////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>

 

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2021-04-18 tarihinde yayınlandı,Toplam 2187 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(Yorum yapılmamış)
Yükleniyor...