Merhaba arkadaşlar, konu aralığı oldukça uzun tuttuğum bir süreden sonra size uygulamasını anlatmaya çalışacağım, ben genelde wordpress sistemlerinin alt yapısında kullandığım bu jquery uygulamasını sizlerinde bir çok noktada kullanabileceğinize inanıyorum. Kodları döndürerek ve geliştirerek bir çok noktada farklı görüntüler ve sonuçlar yaratabilirsiniz.

 

Öncelikle Tab Uygulaması hakkında küçük bilgi vereyim, bu uygulamayla birlike aynı sayfa üzerinde birden fazla elementle birlikte farklı içerik gösterimi sağlayabilirsiniz.

Ayrıca ileri – geri butonları ile içeriğinizi ileriye geriye doğru elementlere tıklamadan götürebilirsiniz, jquery sayfalama işleminizi de bu kodlama üzerinden yapabilirsiniz. Kodları araştırırken bulduğum kaynak Tayfun Erbilen’e sonsuz Teşekkürler.

Demo

Şimdi kodlara geçelim.

Öncelikle kütüphane üzerinden

jquery-latest.min.js

adlı Dosyamızı indiriyoruz, demo üzerinde aktif halde vardır oradan da alabilirsiniz..

HTML kodlarımız.

<ul id="jquery_tab_menu">
<li><a href="#">tab 1</a></li>
<li><a href="#">tab 2</a></li>
<li><a href="#">tab 3</a></li>
</ul>
<div class="clear"></div>
<div class="icerik">
tab - 1 içerik
</div>
<div class="icerik">
tab - 2 içerik
</div>
<div class="icerik">
tab - 3 içerik
</div>
<div class="clear"></div>
<div class="ozellik">
<a href="#" class="geri">Geri</a> / <a href="#" class="ileri">ileri</a>
</div>

 

CSS Kodlarımız

ul#jquery_tab_menu {
margin-bottom: 10px;
height: 25px
}
ul#jquery_tab_menu li {
float: left;
margin-right: 45px;
margin-left: -35px
}
ul#jquery_tab_menu li a {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: #fff;
display: block;
border: 1px solid #bbb;
padding: 4px 10px;
color: #333;
border-top-color: #e1e1e1;
border-left-color: #e1e1e1;
}
ul#jquery_tab_menu li.aktif a {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: #000;
color: #fff;
border-color: #000
}
div.icerik {
padding: 15px;
background-color: #000;
color: #fff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.ozellik {
text-align: center;
margin-top: 10px
}
.ozellik a {
color: #000;
}
.ozellik a:hover {
color: #efefef
}

JS Kodlarımız

$(function() {
var toplam = $(‘.icerik’).length,
index = 0;
$("ul#jquery_tab_menu li:first").addClass("aktif");
$("div.icerik").hide();
$("div.icerik:first").show();
$("ul#jquery_tab_menu li").click(function(e) {
index = $(this).index();
$("ul#jquery_tab_menu li").removeClass("aktif");
$(this).addClass("aktif");
$("div.icerik").hide();
$("div.icerik:eq(" + index + ")").show();
return false
});
$(‘a.ileri’).click(function() {
if (index < toplam– 1) {
index++;
$("ul#jquery_tab_menu li").removeClass(‘aktif’).eq(index).addClass(‘aktif’);
$(‘div.icerik’).hide().eq(index).fadeIn(300);
}
return false
});
$(‘a.geri’).click(function() {
if (index > 0) {
index–;
$("ul#jquery_tab_menu li").removeClass(‘aktif’).eq(index).addClass(‘aktif’);
$(‘div.icerik’).hide().eq(index).fadeIn(300);
}
return false
});
})
Kütüphane içinde  tagı arasına

<script src=”http://code.jquery.com/jquery-latest.min.js” type=”text/javascript”></script>

Kodumuzu ekledikten sonra kendimize göre css’leri biçimlendirerek güzel bir sonuç elde edebiliriz.

Kolay gelsin, iyi çalışmalar.

Metin Saraç 0 80 8 Mayıs 2015
0 beğeni - 0 Yorum