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>

 

Bu Yazıyı Paylaş

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

ÜYE GİRİŞİ

Arkadaş ekleme, özel mesaj, kişisel yazı paylaşmak için siteye giriş yapın

Şifremi unuttum? Kayıt Ol!
  • Ali:

    Pardon Yuyyu olacaktı...

  • Ali:

    Tamam yuyu da olsun :)...

  • Arkadaşlık Uygulaması:

    Yuyyu Online Arkadaşlık Sitesi – Sohbet Et ve Yeni İnsanlarla Tanış Yuy...

  • Ali:

    Üşenmeden web arşivi linkini arayıp bulmuşsun teşekkürler :)...

  • ibrahim:

    türkiyeden de bırakan olmuş oyunu. dünya geneli de bırakan epey olmuş. wi...

  • Araç çubuğuna atla