1 Eylül 2013 Pazar

Jquery ile tab uygulaması

02:49 No comments
Merhaba arkadaşlar bu yazımda jquery ile bir tab uygulaması geliştireceğiz. İlk olarak html kodlarımızı yazıp jquery kütüphanemizi çagırıyoruz.

<!DOCTYPE html>
<html>
        <head>
                
                <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
                
                <script type="text/javascript">
                
                
                </script>
                
                <style type="text/css">
                        
                </style>
        </head>
        <body>
                        
        </body>
</html>
Burda gereken html taglarımızı açtık ve script tagımızın içinde jquery kütüphanemizi çagırdık .Gerekicek olan javascript kodlarımız için yine script tagımızı açtık ve css degerlerimizi yazdıgımız style tagımızı açtık. Şimdi body taglarımızın içine ul yapısında tablarımızı ekliyoruz  ve id'sine tab diyoruz.

<body>
                        <ul id="tab">
                                <li ><a href="#">1. Tab</a></li>  
                                <li><a href="#">2. Tab</a></li>
                                <li><a href="#">3. Tab</a></li>
                        
                        </ul>
</body>
Burda li yapınsında bir tab oluşturduk . Şimdi bu ul yapımızı düzenliyelim .Style taglarımızın içini doldurmaya başlayalım .

ul ,li {padding :0px ; margin: 0px ; list-style :none }
                        a {text-decoration : none;}
                        body {font: 18px Calibra}
Burda body ye istedğimiz büyüklükte istedğimiz font stili kullanabiliriz.
ul#tab li{float: left; margin-right: 10px}
float:left ile elemanlarımız yan yana getiriyorum ve margin-right ile elementlerimin arasında boşluğu düzenliyorum .
ul#tab li a {background-color:#fff; display: block; border: 2px solid #ccc;padding: 3px 12px; color:#000 ; border-top-color:#e1e1e; border-left-color:#e1e1e1}
id'si tab olan li 'lerimin a 'larına özellik atıyorum . Daha düzenli gözükmesi için . Şimdi seçili tabımı göstermem gerekiyor. Bunu hem css ile hemde jquerydeki addClass metodu ile yapabiliriz. İlk olarak css ile yapmayı deneyelim . ul li yapısında ilk li'ye aktif classımı ekliyorum .
<li class="aktif"><a href="#">1. Tab</a></li>
ul tablardan aktif classımız olan a'lara özellik atayalım .
ul#tab li.aktif a {background-color: #000; color: #fff; border-color: #000}
Şimdi üç tane tabımız oldugundan 3 tane içerik oluşturalım . Body taglarımızın içine div yapısını kullanarak ve id'side tab_icerik olsun.
<div class="clear"></div>
<div class="tab_icerik">
        1.tab içeriğidir.
 </div>
 <div class="tab_icerik">
        2.tab iceriğidir.
</div>
<div class="tab_icerik">
        3.tab iceriğidir.
 </div>
clear classı ile de temziliyoruz. 
.clear{clear: both}
ul#tab {margin-bottom: 10px ; height: 30px}
div.tab_icerik{border: 2px solid #ddd ; padding: 15px ; color:#aaa}
değerlerimizi atıyoruz. Style değerlerimizi bitirdik ve artık jquery kodlarımızı yazmaya başlayabiliriz.İlk olarak aktif classımızı jquery ile de atıyabileceğimizi söylemiştik .Nasıl olacagınız görelim . 
$(function(){
$("ul#tab li:first").addClass("aktif");

});
ul si tab olan li first filtrem ile seçiyorum ve addClass metodum ile aktif classımı ekliyorum . Şimdi divlerimizi gizlemeye geldi.
$("div.tab_icerik").hide();
$("div.tab_icerik:first").show();
hide metodum ile classı tab_icerik olan divlerimi gizliyorum ve yine first flitrem ile ilk div'imi seçerek show metoduyla gösteriyorum . Seçili olan div'imi göstermeliyim.
$("ul#tab li").click(function(){
var indis=$(this).index();
$("ul#tab li").removeClass("aktif");
$(this).addClass("aktif");
Burda id'si tab olan li lerden herhangi birine tıklandığında (click metodumla ).Seçili olan index degerini indis değişkenime aktarıyorum .removeClass metodum ile aktif classımı kaldırıyorum ve seçili olan li'ye addClass metoduyla aktif classımı ekliyorum .Sıra seçili olan indisimin içeriğini göstermeye geldi. 
$("div.tab_icerik").hide();
$("div.tab_icerik:eq("+indis+")").show();
tab_icerik classımı hide metoduyla gizliyoruz ve eq ile indis degerlerini eşit olan divlerimizi show metodyla gösteriyoruz.
 Böylece jquery ile tab uygulamamızın kodları bitmiş oldu.Umarım yardımcı olmuşumdur. İyi çalışmalar.
Categories: , , , , , ,

0 yorum:

Yorum Gönder

Kaydol: Kayıt Yorumları (Atom)
Subscribe to RSS Feed Follow me on Twitter!