jQuery kullanan kişiler bilirlerki jquery js kodlarımızı google üzerinden çağırabiliyoruz.Peki nasıl oluyor bu iş diyecek arkadaşlarımız için aşağıda örnek vereyim.
<script></script>
<script></script>
2-)Özel içerik yapımız.
Şimdi her liste,içerik ve sekme için ayrı bir div kullanılmış bizde oluşturacağımız her blok için div oluşturacağız anlamına geliyor.
15+ Excellent High Speed Photographs
20 Beautiful Long Exposure Photographs
35 Amazing Logo Designs
Create a Vintage Photograph in Photoshop
15+ Excellent High Speed Photographs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....read more
20 Beautiful Long Exposure Photographs
Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....read more
35 Amazing Logo Designs
liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....read more
Create a Vintage Photograph in Photoshop
Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....read more
Yukarıda sınıf isimleri ui-tab olarak seçilmiş ve ui-tab değiştirilmemesi gerekiyor.Ama diğer sınıf isimlerini değiştirebiliriz.
3-) CSS Stillerimiz.
Şimdi arkadaşlar ben genişlik yükseklik div ile dış kabımız olan # id özellikli sabit ve seçkin içeriğimizin mutlak olarak sabitlenmiş gezinen sekmelere yer açabilmek için 250px padding ekledik.
#featured{
width:400px;
padding-right:250px;
position:relative;
height:250px;
background:#fff;
border:5px solid #ccc;
}
Sekme aşşağıdaki stillere bağlı olarak sağa konumlandırılmış.
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:250px;
}
#featured ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px;
font-size:12px;
color:#666;
}
#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}
İçerik panelleri div içinde konteyner özelliğine uygun olarak aşağıda verdim.
#featured .ui-tabs-panel{
width:400px; height:250px;
background:#999; position:relative;
overflow:hidden;
}
#featured .ui-tabs-hide{
display:none;
}
Ve seçilen sekmenin sol ok ile bir arka plan görüntüsü verilmiştir. Burada seçilen sekmenin stilleri vardır.
#featured li.ui-tabs-nav-item a{/*On Hover Style*/
display:block;
height:60px;
color:#333; background:#fff;
line-height:20px;
outline:none;
}
#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#featured li.ui-tabs-selected{ /*Selected tab style*/
background:url('images/selected-item.gif') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}
Navigasyon sekmeleri için küçük resimler uyguluyoruz.
#featured ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
Görüntü üzerinde iken div ile konumlandırılmış şeffaf arka plan konumlandırılmış.
#featured .ui-tabs-panel .info{
position:absolute;
top:180px; left:0;
height:70px; width: 400px;
background: url('images/transparent-bg.png');
}
#featured .info h2{
font-size:18px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#featured .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#featured .info a{
text-decoration:none;
color:#fff;
}
#featured .info a:hover{
text-decoration:underline;
}
Tüm CSS stillerini style.css üzerinde olması gerekmektedir.
4-)Javascript Kodu
İçeriğimizi belirli aralıklarla kaydırmak için son javascript kodumuz.
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
Ve bu kadar :)
[COLOR=#000066]Demo[/COLOR] - [COLOR=#003366]Download[/COLOR]
