Jquery Tab Uygulaması

tabWeb sitelerimizde bir sayfada birden çok bölümün olmasını isteyebiliriz. Bu bölümlerin nasıl ve ne şekilde sıralanacağı yani düzeni önemlidir. Jquery tab uygulaması ile birden çok bölümün istediğimiz css özelliklerine göre yerleştirilmesini ve içeriğini oluşturmayı bu örneğimizde ögreneceğiz.

İlk Olarak jquery dosyamızı sayfamıza dahil ediyor.

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

Sayfamızda kullanacağımız css kodlarını aşağıdaki şekilde kodluyoruz.


<style type="text/css">
body { margin:50px 0; background:#CCC; font-family: "Trebuchet MS", sans-serif; font-size:11px; }
.tab-tablo { width:450px; margin:0 auto; }
.tab { margin-bottom:5px; }
.tab span { cursor:pointer; color:#999; background:#f2f2f2 url(tab-arkaplan.jpg) repeat-x left bottom; padding:5px 8px; font-weight:bold; font-size:16px; margin-left:10px; /*Burdan*/-moz-border-radius-topleft:5px; -webkit-border-top-left-radius:5px; -moz-border-radius-topright:5px; -webkit-border-top-right-radius:5px;/*Buraya CSS3! Her tarayıcıda çalışmaz!!!..*/ }
span.tab-aktif { cursor:pointer; color:#666; background:#fff; padding:5px 8px; font-weight:bold; font-size:16px; margin-left:10px; -moz-border-radius-topleft:5px; -webkit-border-top-left-radius:5px; -moz-border-radius-topright:5px; -webkit-border-top-right-radius:5px; }
.tab-icerik { padding:10px; background:#fff; -moz-box-shadow:1px 1px 5px #7e7e7e; -moz-border-radius:5px; -webkit-border-radius:5px; }
#tab-2-icerik, #tab-3-icerik { display:none; }
</style>

Tab uygulamasının çalışması için gerekli olan js kodları ise aşağıda yer almaktadır.


<script type=<"text/javascript<">
$(document).ready(function() {
$(<"span#tab-1<").click(function(){
$(<"span#tab-3<").removeClass(<"tab-aktif<");
$(<"span#tab-2<").removeClass(<"tab-aktif<");
$(<"span#tab-1<").addClass(<"tab-aktif<");
$(<"div.#tab-3-icerik<").slideUp();
$(<"div.#tab-2-icerik<").slideUp();
$(<"div.#tab-1-icerik<").slideDown();
return false;
});
$(<"span#tab-2<").click(function(){
$(<"span#tab-3<").removeClass(<"tab-aktif<");
$(<"span#tab-1<").removeClass(<"tab-aktif<");
$(<"span#tab-2<").addClass(<"tab-aktif<");
$(<"div.#tab-3-icerik<").slideUp();
$(<"div.#tab-1-icerik<").slideUp();
$(<"div.#tab-2-icerik<").slideDown();
return false;
});
$(<"span#tab-3<").click(function(){
$(<"span#tab-2<").removeClass(<"tab-aktif<");
$(<"span#tab-1<").removeClass(<"tab-aktif<");
$(<"span#tab-3<").addClass(<"tab-aktif<");
$(<"div.#tab-2-icerik<").slideUp();
$(<"div.#tab-1-icerik<").slideUp();
$(<"div.#tab-3-icerik<").slideDown();
return false;
});
});
</script>

Şimdi sıra tab listemizi oluşturma ve tab başlıklarını vermeye geldi.


<div>
<div>
<span id="tab-1">Tab - 1</span>
<span id="tab-2">Tab - 2</span>
<span id="tab-3">Tab - 3</span>
</div>

Tabların içeriğini ise aşağıdaki kodlarla oluşturuyoruz. Tablar tıklanıldığında gösterilecek içeriği.


<div>
<div id="tab-1-icerik">Gumusluoglu.com Teknoloji - Programlama</div>
<div id="tab-2-icerik">Php, Html, Dhtml, Jquery, Java Script, Mysql, Veri tabanı</div>
<div id="tab-3-icerik"> </div>
</div>

Yukarıdaki kod bölümlerini toplayıp sayfamızı oluşturmak istediğimizde sayfamız aşagıdaki gibi olacaktır.


&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;jQuery Tab&lt;/title&gt;
&lt;style type="text/css"&gt;
body { margin:50px 0; background:#CCC; font-family: "Trebuchet MS", sans-serif; font-size:11px; }
.tab-tablo { width:450px; margin:0 auto; }
.tab { margin-bottom:5px; }
.tab span { cursor:pointer; color:#999; background:#f2f2f2 url(tab-arkaplan.jpg) repeat-x left bottom; padding:5px 8px; font-weight:bold; font-size:16px; margin-left:10px; /*Burdan*/-moz-border-radius-topleft:5px; -webkit-border-top-left-radius:5px; -moz-border-radius-topright:5px; -webkit-border-top-right-radius:5px;/*Buraya CSS3! Her tarayıcıda çalışmaz!!!..*/ }
span.tab-aktif { cursor:pointer; color:#666; background:#fff; padding:5px 8px; font-weight:bold; font-size:16px; margin-left:10px; -moz-border-radius-topleft:5px; -webkit-border-top-left-radius:5px; -moz-border-radius-topright:5px; -webkit-border-top-right-radius:5px; }
.tab-icerik { padding:10px; background:#fff; -moz-box-shadow:1px 1px 5px #7e7e7e; -moz-border-radius:5px; -webkit-border-radius:5px; }
#tab-2-icerik, #tab-3-icerik { display:none; }
&lt;/style&gt;
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
&lt;script type="text/javascript"&gt;
$(document).ready(function() {
$("span#tab-1").click(function(){
$("span#tab-3").removeClass("tab-aktif");
$("span#tab-2").removeClass("tab-aktif");
$("span#tab-1").addClass("tab-aktif");
$("div.#tab-3-icerik").slideUp();
$("div.#tab-2-icerik").slideUp();
$("div.#tab-1-icerik").slideDown();
return false;
});
$("span#tab-2").click(function(){
$("span#tab-3").removeClass("tab-aktif");
$("span#tab-1").removeClass("tab-aktif");
$("span#tab-2").addClass("tab-aktif");
$("div.#tab-3-icerik").slideUp();
$("div.#tab-1-icerik").slideUp();
$("div.#tab-2-icerik").slideDown();
return false;
});
$("span#tab-3").click(function(){
$("span#tab-2").removeClass("tab-aktif");
$("span#tab-1").removeClass("tab-aktif");
$("span#tab-3").addClass("tab-aktif");
$("div.#tab-2-icerik").slideUp();
$("div.#tab-1-icerik").slideUp();
$("div.#tab-3-icerik").slideDown();
return false;
});
});
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div&gt;
&lt;div&gt;
&lt;span id="tab-1"&gt;Tab - 1&lt;/span&gt;
&lt;span id="tab-2"&gt;Tab - 2&lt;/span&gt;
&lt;span id="tab-3"&gt;Tab - 3&lt;/span&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;div id="tab-1-icerik"&gt;Gumusluoglu.com Teknoloji - Programlama&lt;/div&gt;
&lt;div id="tab-2-icerik"&gt;Php, Html, Dhtml, Jquery, Java Script, Mysql, Veri tabanı&lt;/div&gt;
&lt;div id="tab-3-icerik"&gt; &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

 

Bir Cevap Yazın

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