Yukarı Çık
pTab eklentisi en son 25 Mayıs 2013 tarihinde saat 03:23'de güncellendi.

HAKKINDA

pTab Nedir?

jQuery ile geliştirilmiş bir tab eklentisidir.

Nasıl Kullanılır?

İndireceğiniz pTab.js dosyasını sayfanıza jquery'den sonra dahil edip hemen aşağıdaki parametreler ile kullanmaya başlayabilirsiniz.

Tarayıcı Desteği

jQuery ile geliştirildiği için tüm tarayıcılarla uyumlu çalışmaktadır.

Kim Yaptı

Bu eklenti Tayfun Erbilen ve Mert Osman Başol tarafından hazırlanmıştır.

Standart HTML Yapısı

pTab'ı kullanabilmek için aşağıdaki standart html yapısına sahip olmanız gerekir.

<div class="tab">
    <ul class="tab-list">
        <li><a href="#">1. tab</a></li>
        <li><a href="#">2. tab</a></li>
        <li><a href="#">3. tab</a></li>
    </ul>
    <div class="tabContent">
        1. tab içeriği
    </div>
    <div class="tabContent">
        2. tab içeriği
    </div>
    <div class="tabContent">
        3. tab içeriği
    </div>
</div>

Zorunlu Parametreler

pTab'ın en basit kullanımında ihtiyaç duyduğu 3 temel parametre vardır ve bu parametrelerin belirtilmesi zorunludur.

$(".tab").pTab({
    pTab: '.tab-list',
    pTabElem: 'li',
    pContent: '.tabContent'
});

İNDİR

pTab.js - Versiyon 1

En son 25 Mayıs 2013 tarihinde saat 03:23'de güncellendi.

Sıkıştırılmış: pTab.min.js (6,82 kb)

Sıkıştırılmamış: pTab.js (11,1 kb)

PARAMETRELER

pEvent parametre

Tab işlemi için olay belirlemenizi sağlar.

Standart Değeri: click

Alabileceği Değerler: click, mouseenter, dblclick

$(".tab").pTab({
    pEvent: 'mouseenter'
});

pTab parametre

Tab işleminde tıklama nesnesini belirlemek için kullanılır. Yani hangi nesne içerisindeki nesnelere tıklandığında tab işlemi uygulanacağını belirkemek için kullanılır.

Standart Değeri: ul

Alabileceği Değerler: HTML Nesnesi

$(".tab").pTab({
    pTab: '.tabListe'
});

pTabElem parametre

Bir üst parametrede belirlenen ana nesnenin içinde hangi nesneye tıklandığında tab işlemi gerçekleşeceğini belirlemek için kullanılır.

Standart Değeri: li

Alabileceği Değerler: HTML Nesnesi

$(".tab").pTab({
    pTab: '.tabListe',
    pTabElem: 'li'
});

pClass parametre

Tab işleminde atanacak aktif sınıfını belirlemek için kullanılır.

Standart Değeri: aktif

Alabileceği Değerler: Olası tüm CSS sınıf isimleri

$(".tab").pTab({
    pTab: '.tabListe',
    pTabElem: 'li',
    pClass: 'pAktif'
});

pContent parametre

Tab işleminde etkilenecek içerik nesnesini belirlemek için kullanılır.

Standart Değeri: .icerik

Alabileceği Değerler: Olası tüm CSS seçicileri

$(".tab").pTab({
    pTab: '.tabListe',
    pTabElem: 'li',
    pClass: 'pAktif',
    pContent: '.pIcerik'
});

pDuration parametre

Tab işleminin oluş süresini belirlemek için kullanılır.

Standart Değeri: 500 = 0.5 saniye

Alabileceği Değerler: Milisaniye (1000 = 1 saniye)

$(".tab").pTab({
    pTab: '.tabListe',
    pTabElem: 'li',
    pClass: 'pAktif',
    pContent: '.pIcerik',
    pDuration: 1000
});

pEffect parametre

Tab işleminde kullanılacak efektleri belirlemek için kullanılır.

Standart Değeri: show

Alabileceği Değerler: show, fadeIn, slideDown

$(".tab").pTab({
    pTab: '.tabListe',
    pTabElem: 'li',
    pClass: 'pAktif',
    pContent: '.pIcerik',
    pDuration: 1000,
    pEffect: 'fadeIn'
});

pAutoHeight parametre

Tab işleminde içerik nesnesinin yüksekliğini baz alarak tab yüksekliğini otomatik ayarlamak için kullanılır.

Standart Değeri: false

Alabileceği Değerler: true, false

$(".tab").pTab({
    pTab: '.tabListe',
    pTabElem: 'li',
    pClass: 'pAktif',
    pContent: '.pIcerik',
    pDuration: 1000,
    pEffect: 'fadeIn',
    pAutoHeight: true
});

pElemFunc parametre

Döngüye sokulan tab işlemleri için bir fonksiyon çalıştırır. Bu fonksiyon sadece o anki döngüye ait tab işleminde tek sefer için geçerli olacaktır.

Standart Değeri: false

Alabileceği Değerler: function

$(".tab").pTab({
    pTab: '.tabListe',
    pTabElem: 'li',
    pClass: 'pAktif',
    pContent: '.pIcerik',
    pDuration: 1000,
    pEffect: 'fadeIn',
    pAutoHeight: true',
    pElemFunc: function (){
        $(this.pTab + " " + this.pTabElem + " span:first").show();
    }
});

pEventFunc parametre

Döngüye sokulan tab işleminde bir olay (event) olduğunda çalışacak fonksiyondur. Her olayda bir kez çalışır.

Standart Değeri: false

Alabileceği Değerler: function

$(".tab").pTab({
    pTab: '.tabListe',
    pTabElem: 'li',
    pClass: 'pAktif',
    pContent: '.pIcerik',
    pDuration: 1000,
    pEffect: 'fadeIn',
    pAutoHeight: true',
    pElemFunc: function (){
        $(this.pTab + " " + this.pTabElem + " span:first").show();
    }, 
    pEventFunc: function ( elem ){
        $(this.pTab + " " + this.pTabElem + " span").hide();
        $("span", elem).show();
    }
});

pUi parametre

Tab işleminde jQuery UI kütüphanesinin kullanılıp kullanılmayacağı belirlenir.

Kullanılması için jquery-ui.js kütüphanesini yüklemeniz gerekiyor.

Standart Değeri: false

Alabileceği Değerler: true, false

$(".tab").pTab({
    pTab: '.tabListe',
    pTabElem: 'li',
    pClass: 'pAktif',
    pContent: '.pIcerik',
    pDuration: 1000,
    pUi: true
});

pUiEffect parametre

Tab işleminde jQuery UI kütüphanesi kullanılıyor ise UI kütüphanesine ait efetkleri uygulamak için kullanılır.

Standart Değeri: fade

Alabileceği Değerler: fade, bounce, highlight, pulsate, shake, slide

$(".tab").pTab({
    pTab: '.tabListe',
    pTabElem: 'li',
    pClass: 'pAktif',
    pContent: '.pIcerik',
    pDuration: 1000,
    pUi: true,
    pUiEffect: 'bounce'
});

pDebug parametre

Tab işleminde oluşacak olası hataların gözükmesi için kullanılır.

Standart Değeri: false

Alabileceği Değerler: true, false

$(".tab").pTab({
    pTab: '.tabListe',
    pTabElem: 'li',
    pClass: 'pAktif',
    pContent: '.pIcerik',
    pDuration: 1000,
    pUi: true,
    pUiEffect: 'bounce',
    pDebug: true
});

pSlide parametre

Tab işleminde içerik nesnesinin kayan içerik olup olmayacağı belirlenir.

Standart Değeri: false

Alabileceği Değerler: true, false

$(".tab").pTab({
    pTab: '.tabListe',
    pTabElem: 'li',
    pClass: 'pAktif',
    pContent: '.pIcerik',
    pDuration: 1000,
    pSlide: true
});

pSlideWidth parametre

Tab işleminde içerik nesnesi kayan içerik olduğunda nesnenin genişliğini belirlemek için kullanılır.

Standart Değeri: 0

Alabileceği Değerler: Sayısal Değer

$(".tab").pTab({
    pTab: '.tabListe',
    pTabElem: 'li',
    pClass: 'pAktif',
    pContent: '.pIcerik',
    pDuration: 1000,
    pSlide: true,
    pSlideWidth: 550
});

pEasing parametre

Tab işleminde animasyon zamanı için easing fonksiyonlarını tanımlamak için kullanılır.

Standart Değeri: linear

Alabileceği Değerler: Tüm Easing Fonksiyonları

$(".tab").pTab({
    pTab: '.tabListe',
    pTabElem: 'li',
    pClass: 'pAktif',
    pContent: '.pIcerik',
    pDuration: 1000,
    pSlide: true,
    pSlideWidth: 550,
    pEasing: 'easeInElastic'
});

pSlidePrev parametre

Tab geçiş işleminde önceki butonunu tanımlamak için kullanılır.

Standart Değeri: false

Alabileceği Değerler: Olası tüm CSS seçicileri

$(".tab").pTab({
    pTab: '.tabListe',
    pTabElem: 'li',
    pClass: 'pAktif',
    pContent: '.pIcerik',
    pDuration: 1000,
    pSlide: true,
    pSlideWidth: 550,
    pSlidePrev: 'a.onceki'
});

pSlideNext parametre

Tab geçiş işleminde sonraki butonunu tanımlamak için kullanılır.

Standart Değeri: false

Alabileceği Değerler: Olası tüm CSS seçicileri

$(".tab").pTab({
    pTab: '.tabListe',
    pTabElem: 'li',
    pClass: 'pAktif',
    pContent: '.pIcerik',
    pDuration: 1000,
    pSlide: true,
    pSlideWidth: 550,
    pSlidePrev: 'a.onceki',
    pSlideNext: 'a.sonraki'
});

pSlideLoop parametre

Tab geçiş işlemini otomatik yapmak için kullanılır.

Standart Değeri: false

Alabileceği Değerler: true, false

$(".tab").pTab({
    pTab: '.tabListe',
    pTabElem: 'li',
    pClass: 'pAktif',
    pContent: '.pIcerik',
    pDuration: 1000,
    pSlide: true,
    pSlideWidth: 550,
    pSlidePrev: 'a.onceki',
    pSlideNext: 'a.sonraki',
    pSlideLoop: true
});

pSlideLoopDuration parametre

Tab otomatik geçiş işleminde zamanı belirlemek için kullanılır.

Standart Değeri: 500 = 0.5 saniye

Alabileceği Değerler: Milisaniye (1000 = 1 saniye)

$(".tab").pTab({
    pTab: '.tabListe',
    pTabElem: 'li',
    pClass: 'pAktif',
    pContent: '.pIcerik',
    pDuration: 1000,
    pSlide: true,
    pSlideWidth: 550,
    pSlidePrev: 'a.onceki',
    pSlideNext: 'a.sonraki',
    pSlideLoop: true',
    pSlideLoopDuration: 1000
});

pMouseWheel parametre

Tab işleminde mousewheel eklentisinin aktif olup olmayacağı belirlenir. Eğer aktif edilir ise, fare scrollu ile tab geçiş işlemleri yapılabilir.

Kullanılması için jquery.mousewheel.js eklentisini yüklemeniz gerekiyor.

Standart Değeri: false

Alabileceği Değerler: true, false

$(".tab").pTab({
    pTab: '.tabListe',
    pTabElem: 'li',
    pClass: 'pAktif',
    pContent: '.pIcerik',
    pDuration: 1000,
    pMouseWheel: true
});

pKeyboardEvent parametre

Tab geçişlerinin klavyenin sağ ve sol tuşlarıyla yapılmasını sağlar. Ancak bu işlem şuan için sadece IE8 ve üzerinde stabil olarak çalışmaktadır.

Standart Değeri: false

Alabileceği Değerler: true, false

$(".tab").pTab({
    pTab: '.tabListe',
    pTabElem: 'li',
    pClass: 'pAktif',
    pContent: '.pIcerik',
    pDuration: 1000,
    pKeyboardEvent: true
});

pActiveTab parametre

Geçerli aktif tab sekmesini belirlemenizi sağlar. Eğer bu parametre belirtilmez ise ilk tab sekmesi aktif hale getirilir.

Standart Değeri: 0

Alabileceği Değerler: Tab Indis Değerleri (0-n) - Indis değerleri 0'dan başlar

$(".tab").pTab({
    pTab: '.tabListe',
    pTabElem: 'li',
    pClass: 'pAktif',
    pContent: '.pIcerik',
    pDuration: 1000,
    pActiveTab: 2 /* 3. tab sekmesi aktif olsun */
});

data-pLoadFile data parametre

Dinamik olarak bir dosyayı tab içeriğine yükletmek için kullanılır.

<div class="tab">
    <ul class="tab-list">
        <li data-pLoadFile="ajax.html"><a href="#">1. tab</a></li>
        <li data-pLoadFile="deneme.txt"><a href="#">2. tab</a></li>
    </ul>
    <div class="tabContent">
        1. tab içeriği
    </div>
    <div class="tabContent">
        2. tab içeriği
    </div>
</div>

data-pIframe data parametre

Tab içeriğine iframe gömmek için kullanılır. Parametreler nesne olarak tanımlanır ve sadece örnekteki parametreler mevcuttur.

<div class="tab">
    <ul class="tab-list">
        <li data-pIframe='{"url": "http://www.youtube.com/embed/De4bPBVnDEI", "width": "100%", "height":"350"}'><a href="#">1. tab</a></li>
        <li data-pIframe='{"url": "http://www.erbilen.net", "width": "100%", "height":"350"}'><a href="#">2. tab</a></li>
    </ul>
    <div class="tabContent">
        1. tab içeriği
    </div>
    <div class="tabContent">
        2. tab içeriği
    </div>
</div>

ÖRNEKLER

Basit Tab Örneği demo

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur. Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
Kaynak Kodlarını Göster
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>pTab (Demo #1)</title>
	<link rel="stylesheet" href="http://www.erbilen.net/lab/pTab/reset.css?v=1" />
	<style type="text/css">
	body { margin: 10px }
	.pTabGenel ul.pTabListe {
		overflow: hidden
	}
	.pTabGenel ul.pTabListe li {
		float: left; margin-right: 10px
	}
	.pTabGenel ul.pTabListe li a {
		display: block;
		padding: 10px;
		background: #333;
		color: #fff
	}
	.pTabGenel ul.pTabListe li a span {
		display: none
	}
	.pTabGenel ul.pTabListe li.pAktif a {
		background: #111;
	}
	.pTabGenel .pTabContent {
		background: #111;
		padding: 10px;
		line-height: 21px;
		width: 648px;
		color: #fff
	}
	</style>
</head>
<body>

	<div class="pTabGenel pTab1">
		<ul class="pTabListe">
			<li><a href="#">1. tab</a></li>
			<li><a href="#">2. tab</a></li>
			<li><a href="#">3. tab</a></li>
			<li><a href="#">4. tab</a></li>
		</ul>
		<div class="pTabContent">
		Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
		</div>
		<div class="pTabContent">
		Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur. Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
		</div>
		<div class="pTabContent">
		Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
		</div>
		<div class="pTabContent">
		Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
		</div>
	</div>

	<script type="text/javascript" src="http://www.erbilen.net/lab/pTab/js/jquery.js?v=1"></script>
	<script type="text/javascript" src="http://www.erbilen.net/lab/pTab/js/pTab.js?v=1503309947"></script>
	<script type="text/javascript">
	$(".pTab1").pTab({
		pTab: '.pTabListe',
		pTabElem: 'li',
		pClass: 'pAktif',
		pContent: '.pTabContent'
	});
	</script>

</body>
</html>

Fade Geçişli Tab Örneği demo

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur. Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
Kaynak Kodlarını Göster
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>pTab (Demo #2)</title>
	<link rel="stylesheet" href="http://www.erbilen.net/lab/pTab/reset.css?v=1" />
	<style type="text/css">
	body { margin: 10px }
	.pTabGenel ul.pTabListe {
		overflow: hidden
	}
	.pTabGenel ul.pTabListe li {
		float: left; margin-right: 10px
	}
	.pTabGenel ul.pTabListe li a {
		display: block;
		padding: 10px;
		background: #333;
		color: #fff
	}
	.pTabGenel ul.pTabListe li a span {
		display: none
	}
	.pTabGenel ul.pTabListe li.pAktif a {
		background: #111;
	}
	.pTabGenel .pTabContent {
		background: #111;
		padding: 10px;
		line-height: 21px;
		width: 648px;
		color: #fff
	}
	</style>
</head>
<body>

	<div class="pTabGenel pTab2">
		<ul class="pTabListe">
			<li><a href="#">1. tab</a></li>
			<li><a href="#">2. tab</a></li>
			<li><a href="#">3. tab</a></li>
			<li><a href="#">4. tab</a></li>
		</ul>
		<div class="pTabContent">
		Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
		</div>
		<div class="pTabContent">
		Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur. Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
		</div>
		<div class="pTabContent">
		Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
		</div>
		<div class="pTabContent">
		Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
		</div>
	</div>

	<script type="text/javascript" src="http://www.erbilen.net/lab/pTab/js/jquery.js?v=1"></script>
	<script type="text/javascript" src="http://www.erbilen.net/lab/pTab/js/pTab.js?v=1503309947"></script>
	<script type="text/javascript">
	$(".pTab2").pTab({
		pTab: '.pTabListe',
		pTabElem: 'li',
		pClass: 'pAktif',
		pContent: '.pTabContent',
		pDuration: 1000,
		pEffect: 'fadeIn'
	});
	</script>

</body>
</html>

jQuery UI Efekti Uygulanmış Tab Örneği demo

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur. Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
Kaynak Kodlarını Göster
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>pTab (Demo #3)</title>
	<link rel="stylesheet" href="http://www.erbilen.net/lab/pTab/reset.css?v=1" />
	<style type="text/css">
	body { margin: 10px }
	.pTabGenel ul.pTabListe {
		overflow: hidden
	}
	.pTabGenel ul.pTabListe li {
		float: left; margin-right: 10px
	}
	.pTabGenel ul.pTabListe li a {
		display: block;
		padding: 10px;
		background: #333;
		color: #fff
	}
	.pTabGenel ul.pTabListe li a span {
		display: none
	}
	.pTabGenel ul.pTabListe li.pAktif a {
		background: #111;
	}
	.pTabGenel .pTabContent {
		background: #111;
		padding: 10px;
		line-height: 21px;
		width: 648px;
		color: #fff
	}
	</style>
</head>
<body>

	<div class="pTabGenel pTab3">
		<ul class="pTabListe">
			<li><a href="#">1. tab</a></li>
			<li><a href="#">2. tab</a></li>
			<li><a href="#">3. tab</a></li>
			<li><a href="#">4. tab</a></li>
		</ul>
		<div class="pTabContent">
		Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
		</div>
		<div class="pTabContent">
		Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur. Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
		</div>
		<div class="pTabContent">
		Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
		</div>
		<div class="pTabContent">
		Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
		</div>
	</div>

	<script type="text/javascript" src="http://www.erbilen.net/lab/pTab/js/jquery.js?v=1"></script>
	<script type="text/javascript" src="http://www.erbilen.net/lab/pTab/js/jquery-ui.min.js?v=1"></script>
	<script type="text/javascript" src="http://www.erbilen.net/lab/pTab/js/pTab.js?v=1503309947"></script>
	<script type="text/javascript">
	$(".pTab3").pTab({
		pTab: '.pTabListe',
		pTabElem: 'li',
		pClass: 'pAktif',
		pContent: '.pTabContent',
		pDuration: 1000,
		pUi: true,
		pUiEffect: 'bounce',
		pDebug: true
	});
	</script>

</body>
</html>

Kayan Tab Örneği demo

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
Kaynak Kodlarını Göster
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>pTab (Demo #4)</title>
	<link rel="stylesheet" href="http://www.erbilen.net/lab/pTab/reset.css?v=1" />
	<style type="text/css">
	body { margin: 10px }
	.pTabGenel ul.pTabListe {
		overflow: hidden
	}
	.pTabGenel ul.pTabListe li {
		float: left; margin-right: 10px
	}
	.pTabGenel ul.pTabListe li a {
		display: block;
		padding: 10px;
		background: #333;
		color: #fff
	}
	.pTabGenel ul.pTabListe li a span {
		display: none
	}
	.pTabGenel ul.pTabListe li.pAktif a {
		background: #111;
	}
	.pTabGenel .pTabContent {
		background: #111;
		padding: 10px;
		line-height: 21px;
		width: 648px;
		color: #fff
	}
	</style>
</head>
<body>

	<div class="pTabGenel pTab4">
		<ul class="pTabListe">
			<li><a href="#">1. tab</a></li>
			<li><a href="#">2. tab</a></li>
			<li><a href="#">3. tab</a></li>
			<li><a href="#">4. tab</a></li>
		</ul>
		<div class="pTabContent">
		Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
		</div>
		<div class="pTabContent" style="background: #055a7a">
		Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur. Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
		</div>
		<div class="pTabContent" style="background: #7a1b05">
		Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
		</div>
		<div class="pTabContent" style="background: #2e7a05">
		Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
		</div>
	</div>

	<script type="text/javascript" src="http://www.erbilen.net/lab/pTab/js/jquery.js?v=1"></script>
	<script type="text/javascript" src="http://www.erbilen.net/lab/pTab/js/pTab.js?v=1503309947"></script>
	<script type="text/javascript">
	$(".pTab4").pTab({
		pTab: '.pTabListe',
		pTabElem: 'li',
		pClass: 'pAktif',
		pContent: '.pTabContent',
		pDuration: 340,
		pSlide: true,
		pSlideWidth: 668,
		pAutoHeight: true
	});
	</script>

</body>
</html>

Ajax ve Iframe Tab Örneği demo

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur. Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
Kaynak Kodlarını Göster
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>pTab (Demo #11)</title>
	<link rel="stylesheet" href="http://www.erbilen.net/lab/pTab/reset.css?v=1" />
	<style type="text/css">
	body { margin: 10px }
	.pTabGenel ul.pTabListe {
		overflow: hidden
	}
	.pTabGenel ul.pTabListe li {
		float: left; margin-right: 10px
	}
	.pTabGenel ul.pTabListe li a {
		display: block;
		padding: 10px;
		background: #333;
		color: #fff
	}
	.pTabGenel ul.pTabListe li a span {
		display: none
	}
	.pTabGenel ul.pTabListe li.pAktif a {
		background: #111;
	}
	.pTabGenel .pTabContent {
		background: #111;
		padding: 10px;
		line-height: 21px;
		width: 648px;
		color: #fff
	}
	</style>
</head>
<body>

	<div class="pTabGenel pTab11">
		<ul class="pTabListe">
			<li data-pLoadFile="ajax1.html"><a href="#">Ajax Tab</a></li>
			<li data-pIframe='{"url": "http://www.youtube.com/embed/De4bPBVnDEI", "width": "100%", "height":"350"}'><a href="#">Iframe Tab</a></li>
			<li><a href="#">Standart tab</a></li>
			<li><a href="#">Standart tab</a></li>
		</ul>
		<div class="pTabContent">
		ajax1.html adında bir dosya oluşturup bu örneği tekrar inceleyin.
		</div>
		<div class="pTabContent">
		iframe tab içeriği
		</div>
		<div class="pTabContent">
		Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
		</div>
		<div class="pTabContent">
		Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
		</div>
	</div>

	<script type="text/javascript" src="http://www.erbilen.net/lab/pTab/js/jquery.js?v=1"></script>
	<script type="text/javascript" src="http://www.erbilen.net/lab/pTab/js/pTab.js?v=1503309947"></script>
	<script type="text/javascript">
	$(".pTab11").pTab({
		pTab: '.pTabListe',
		pTabElem: 'li',
		pClass: 'pAktif',
		pContent: '.pTabContent',
		pDuration: 340,
		pSlide: true,
		pSlideWidth: 668,
		pAutoHeight: true
	});
	</script>

</body>
</html>

Easing Fonksiyonu ile Kayan Tab Örneği demo

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
Kaynak Kodlarını Göster
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>pTab (Demo #5)</title>
	<link rel="stylesheet" href="http://www.erbilen.net/lab/pTab/reset.css?v=1" />
	<style type="text/css">
	body { margin: 10px }
	.pTabGenel ul.pTabListe {
		overflow: hidden
	}
	.pTabGenel ul.pTabListe li {
		float: left; margin-right: 10px
	}
	.pTabGenel ul.pTabListe li a {
		display: block;
		padding: 10px;
		background: #333;
		color: #fff
	}
	.pTabGenel ul.pTabListe li a span {
		display: none
	}
	.pTabGenel ul.pTabListe li.pAktif a {
		background: #111;
	}
	.pTabGenel .pTabContent {
		background: #111;
		padding: 10px;
		line-height: 21px;
		width: 648px;
		color: #fff
	}
	</style>
</head>
<body>

	<div class="pTabGenel pTab5">
		<ul class="pTabListe">
			<li><a href="#">1. tab</a></li>
			<li><a href="#">2. tab</a></li>
			<li><a href="#">3. tab</a></li>
			<li><a href="#">4. tab</a></li>
		</ul>
		<div class="pTabContent">
		Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
		</div>
		<div class="pTabContent" style="background: #055a7a">
		Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
		</div>
		<div class="pTabContent" style="background: #7a1b05">
		Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
		</div>
		<div class="pTabContent" style="background: #2e7a05">
		Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
		</div>
	</div>

	<script type="text/javascript" src="http://www.erbilen.net/lab/pTab/js/jquery.js?v=1"></script>
	<script type="text/javascript" src="http://www.erbilen.net/lab/pTab/js/jquery-ui.min.js?v=1"></script>
	<script type="text/javascript" src="http://www.erbilen.net/lab/pTab/js/pTab.js?v=1503309947"></script>
	<script type="text/javascript">
	$(".pTab5").pTab({
		pTab: '.pTabListe',
		pTabElem: 'li',
		pClass: 'pAktif',
		pContent: '.pTabContent',
		pDuration: 1000,
		pSlide: true,
		pSlideWidth: 668,
		pEasing: 'easeOutElastic'
	});
	</script>

</body>
</html>

Önceki ve Sonraki Butonlu Tab Örneği demo

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
Kaynak Kodlarını Göster
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>pTab (Demo #6)</title>
	<link rel="stylesheet" href="http://www.erbilen.net/lab/pTab/reset.css?v=1" />
	<style type="text/css">
	body { margin: 10px }
	.pTabGenel {
		width: 668px
	}
	.pTabGenel ul.pTabListe {
		overflow: hidden
	}
	.pTabGenel ul.pTabListe li {
		float: left; margin-right: 10px
	}
	.pTabGenel ul.pTabListe li a {
		display: block;
		padding: 10px;
		background: #333;
		color: #fff
	}
	.pTabGenel ul.pTabListe li a span {
		display: none
	}
	.pTabGenel ul.pTabListe li.pAktif a {
		background: #111;
	}
	.pTabGenel .pTabContent {
		background: #111;
		padding: 10px;
		line-height: 21px;
		width: 648px;
		color: #fff
	}
	</style>
</head>
<body>

	<div class="pTabGenel pTab6">
		<ul class="pTabListe">
			<li class="list"><a href="#">1. tab</a></li>
			<li class="list"><a href="#">2. tab</a></li>
			<li class="list"><a href="#">3. tab</a></li>
			<li class="list"><a href="#">4. tab</a></li>
			<li style="float: right; margin-right: 0"><a class="sonraki" href="#">Sonraki</a></li>
			<li style="float: right"><a href="#" class="onceki">Önceki</a></li>
		</ul>
		<div class="pTabContent">
		Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
		</div>
		<div class="pTabContent" style="background: #055a7a">
		Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.<br /><br />Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
		</div>
		<div class="pTabContent" style="background: #7a1b05">
		Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
		</div>
		<div class="pTabContent" style="background: #2e7a05">
		Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
		</div>
	</div>

	<script type="text/javascript" src="http://www.erbilen.net/lab/pTab/js/jquery.js?v=1"></script>
	<script type="text/javascript" src="http://www.erbilen.net/lab/pTab/js/pTab.js?v=1503309947"></script>
	<script type="text/javascript">
	$(".pTab6").pTab({
		pTab: '.pTabListe',
		pTabElem: 'li.list',
		pClass: 'pAktif',
		pContent: '.pTabContent',
		pSlide: true,
		pSlideWidth: 668,
		pDuration: 400,
		pSlidePrev: 'a.onceki',
		pSlideNext: 'a.sonraki',
		pAutoHeight: true
	});
	</script>

</body>
</html>

Otomatik Dönen Tab Örneği demo

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
Kaynak Kodlarını Göster
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>pTab (Demo #7)</title>
	<link rel="stylesheet" href="http://www.erbilen.net/lab/pTab/reset.css?v=1" />
	<style type="text/css">
	body { margin: 10px }
	.pTabGenel {
		width: 668px
	}
	.pTabGenel ul.pTabListe {
		overflow: hidden
	}
	.pTabGenel ul.pTabListe li {
		float: left; margin-right: 10px
	}
	.pTabGenel ul.pTabListe li a {
		display: block;
		padding: 10px;
		background: #333;
		color: #fff
	}
	.pTabGenel ul.pTabListe li a span {
		display: none
	}
	.pTabGenel ul.pTabListe li.pAktif a {
		background: #111;
	}
	.pTabGenel .pTabContent {
		background: #111;
		padding: 10px;
		line-height: 21px;
		width: 648px;
		color: #fff
	}
	</style>
</head>
<body>

	<div class="pTabGenel pTab7">
		<ul class="pTabListe">
			<li class="list"><a href="#">1. tab</a></li>
			<li class="list"><a href="#">2. tab</a></li>
			<li class="list"><a href="#">3. tab</a></li>
			<li class="list"><a href="#">4. tab</a></li>
			<li style="float: right; margin-right: 0"><a class="sonraki" href="#">Sonraki</a></li>
			<li style="float: right"><a href="#" class="onceki">Önceki</a></li>
		</ul>
		<div class="pTabContent">
		Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
		</div>
		<div class="pTabContent" style="background: #055a7a">
		Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
		</div>
		<div class="pTabContent" style="background: #7a1b05">
		Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
		</div>
		<div class="pTabContent" style="background: #2e7a05">
		Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
		</div>
	</div>

	<script type="text/javascript" src="http://www.erbilen.net/lab/pTab/js/jquery.js?v=1"></script>
	<script type="text/javascript" src="http://www.erbilen.net/lab/pTab/js/jquery-ui.min.js?v=1"></script>
	<script type="text/javascript" src="http://www.erbilen.net/lab/pTab/js/pTab.js?v=1503309947"></script>
	<script type="text/javascript">
	$(".pTab7").pTab({
		pTab: '.pTabListe',
		pTabElem: 'li.list',
		pClass: 'pAktif',
		pContent: '.pTabContent',
		pDuration: 1000,
		pSlide: true,
		pSlideWidth: 668,
		pEasing: 'easeOutElastic',
		pSlidePrev: 'a.onceki',
		pSlideNext: 'a.sonraki',
		pSlideLoop: true,
		pSlideLoopDuration: 1500
	});
	</script>

</body>
</html>

Otomatik Dönen Tab Slider Örneği demo

Başlık #1
Başlık #2
Başlık #3
Başlık #4
Başlık #5
Başlık #6
Başlık #7
Başlık #8
Başlık #9
Başlık #10
Kaynak Kodlarını Göster
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>pTab (Demo #8)</title>
	<link rel="stylesheet" href="http://www.erbilen.net/lab/pTab/reset.css?v=1" />
	<style type="text/css">
	body { margin: 10px }
	.pTabGenel {
		width: 668px
	}
	.pTabGenel ul.pTabListe {
		overflow: hidden
	}
	.pTabGenel ul.pTabListe li {
		float: left; margin-right: 10px
	}
	.pTabGenel ul.pTabListe li a {
		display: block;
		padding: 10px;
		background: #333;
		color: #fff
	}
	.pTabGenel ul.pTabListe li a span {
		display: none
	}
	.pTabGenel ul.pTabListe li.pAktif a {
		background: #111;
	}
	.pTabGenel .pTabContent {
		background: #111;
		padding: 10px;
		line-height: 21px;
		width: 648px;
		color: #fff
	}
	.pTabGenel .pTabContent img {
		width: 648px
	}
	.pTab8 .pTabContent {
		line-height: 0; position: relative
	}
	.pTab8 .pTabContent span.sliderTitle {
		position: absolute;
		bottom: 20px;
		opacity: .8;
		filter: alpha(opacity=80);
		left: 20px;
		background: #111;
		color: #fff;
		font-size: 20px;
		display: block;
		line-height: auto;
		padding: 18px 20px
	}
	.pTabNumara {
		overflow: hidden
	}
	.pTabNumara li {
		float: left; width: 10%; background: #222
	}
	.pTabNumara li a {
		display: block;
		text-align: center;
		padding: 10px 0;
		color: #fff
	}
	.pTabNumara li.pAktif a {
		background: #111
	}
	</style>
</head>
<body>

	<div class="pTabGenel pTab8">
		<div style="width: 668px; position: relative; overflow: hidden!important">
			<div class="pTabContent">
				<span class="sliderTitle">Başlık #1</span>
				<img src="http://www.erbilen.net/lab/pTab/images/1.jpg" alt="" height="365" />
			</div>
			<div class="pTabContent">
				<span class="sliderTitle">Başlık #2</span>
				<img src="http://www.erbilen.net/lab/pTab/images/2.jpg" alt="" height="365" />
			</div>
			<div class="pTabContent">
				<span class="sliderTitle">Başlık #3</span>
				<img src="http://www.erbilen.net/lab/pTab/images/3.jpg" alt="" height="365" />
			</div>
			<div class="pTabContent">
				<span class="sliderTitle">Başlık #4</span>
				<img src="http://www.erbilen.net/lab/pTab/images/4.jpg" alt="" height="365" />
			</div>
			<div class="pTabContent">
				<span class="sliderTitle">Başlık #5</span>
				<img src="http://www.erbilen.net/lab/pTab/images/5.jpg" alt="" height="365" />
			</div>
			<div class="pTabContent">
				<span class="sliderTitle">Başlık #6</span>
				<img src="http://www.erbilen.net/lab/pTab/images/1.jpg" alt="" height="365" />
			</div>
			<div class="pTabContent">
				<span class="sliderTitle">Başlık #7</span>
				<img src="http://www.erbilen.net/lab/pTab/images/2.jpg" alt="" height="365" />
			</div>
			<div class="pTabContent">
				<span class="sliderTitle">Başlık #8</span>
				<img src="http://www.erbilen.net/lab/pTab/images/3.jpg" alt="" height="365" />
			</div>
			<div class="pTabContent">
				<span class="sliderTitle">Başlık #9</span>
				<img src="http://www.erbilen.net/lab/pTab/images/4.jpg" alt="" height="365" />
			</div>
			<div class="pTabContent">
				<span class="sliderTitle">Başlık #10</span>
				<img src="http://www.erbilen.net/lab/pTab/images/5.jpg" alt="" height="365" />
			</div>
		</div>
		<ul class="pTabNumara">
			<li class="list"><a href="#">1</a></li>
			<li class="list"><a href="#">2</a></li>
			<li class="list"><a href="#">3</a></li>
			<li class="list"><a href="#">4</a></li>
			<li class="list"><a href="#">5</a></li>
			<li class="list"><a href="#">6</a></li>
			<li class="list"><a href="#">7</a></li>
			<li class="list"><a href="#">8</a></li>
			<li class="list"><a href="#">9</a></li>
			<li class="list"><a href="#">10</a></li>
		</ul>
	</div>

	<script type="text/javascript" src="http://www.erbilen.net/lab/pTab/js/jquery.js?v=1"></script>
	<script type="text/javascript" src="http://www.erbilen.net/lab/pTab/js/jquery-ui.min.js?v=1"></script>
	<script type="text/javascript" src="http://www.erbilen.net/lab/pTab/js/pTab.js?v=1503309947"></script>
	<script type="text/javascript">
	$(".pTab8").pTab({
		pTab: '.pTabNumara',
		pTabElem: 'li.list',
		pClass: 'pAktif',
		pContent: '.pTabContent',
		pDuration: 1000,
		pSlide: true,
		pSlideWidth: 668,
		pEasing: 'easeOutElastic',
		pSlidePrev: 'a.onceki',
		pSlideNext: 'a.sonraki',
		pSlideLoop: true,
		pSlideLoopDuration: 3500
	});
	</script>

</body>
</html>

MouseWheel Aktif Edilmiş Tab Örneği demo

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
Kaynak Kodlarını Göster
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>pTab (Demo #9)</title>
	<link rel="stylesheet" href="http://www.erbilen.net/lab/pTab/reset.css?v=1" />
	<style type="text/css">
	body { margin: 10px }
	.pTabGenel {
		width: 668px
	}
	.pTabGenel ul.pTabListe {
		overflow: hidden
	}
	.pTabGenel ul.pTabListe li {
		float: left; margin-right: 10px
	}
	.pTabGenel ul.pTabListe li a {
		display: block;
		padding: 10px;
		background: #333;
		color: #fff
	}
	.pTabGenel ul.pTabListe li a span {
		display: none
	}
	.pTabGenel ul.pTabListe li.pAktif a {
		background: #111;
	}
	.pTabGenel .pTabContent {
		background: #111;
		padding: 10px;
		line-height: 21px;
		width: 648px;
		color: #fff
	}
	</style>
</head>
<body>

	<div class="pTabGenel pTab9">
		<ul class="pTabListe">
			<li class="list"><a href="#">1. tab</a></li>
			<li class="list"><a href="#">2. tab</a></li>
			<li class="list"><a href="#">3. tab</a></li>
			<li class="list"><a href="#">4. tab</a></li>
			<li style="float: right; margin-right: 0"><a class="sonraki" href="#">Sonraki</a></li>
			<li style="float: right"><a href="#" class="onceki">Önceki</a></li>
		</ul>
		<div class="pTabContent">
		Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
		</div>
		<div class="pTabContent" style="background: #055a7a">
		Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
		</div>
		<div class="pTabContent" style="background: #7a1b05">
		Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
		</div>
		<div class="pTabContent" style="background: #2e7a05">
		Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
		</div>
	</div>

	<script type="text/javascript" src="http://www.erbilen.net/lab/pTab/js/jquery.js?v=1"></script>
	<script type="text/javascript" src="http://www.erbilen.net/lab/pTab/js/jquery.mousewheel.min.js?v=1"></script>
	<script type="text/javascript" src="http://www.erbilen.net/lab/pTab/js/pTab.js?v=1503309947"></script>
	<script type="text/javascript">
	$(".pTab9").pTab({
		pTab: '.pTabListe',
		pTabElem: 'li.list',
		pClass: 'pAktif',
		pContent: '.pTabContent',
		pDuration: 500,
		pSlide: true,
		pSlideWidth: 668,
		pSlidePrev: 'a.onceki',
		pSlideNext: 'a.sonraki',
		pMouseWheel: true
	});
	</script>

</body>
</html>

Dikey Tab Örneği demo

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur. Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
Kaynak Kodlarını Göster
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>pTab (Demo #10)</title>
	<link rel="stylesheet" href="http://www.erbilen.net/lab/pTab/reset.css?v=1" />
	<style type="text/css">
	body { margin: 10px }
	.pTabGenel {
		width: 668px
	}
	.pTabGenel ul.pTabListe {
		overflow: hidden
	}
	.pTabGenel ul.pTabListe li {
		float: left; margin-right: 10px
	}
	.pTabGenel ul.pTabListe li a {
		display: block;
		padding: 10px;
		background: #333;
		color: #fff
	}
	.pTabGenel ul.pTabListe li a span {
		display: none
	}
	.pTabGenel ul.pTabListe li.pAktif a {
		background: #111;
	}
	.pTabGenel .pTabContent {
		background: #111;
		padding: 10px;
		line-height: 21px;
		width: 648px;
		color: #fff
	}
	.pTab10 {
		overflow: hidden
	}
	.pTab10 ul.pTabListe {
		float: left;
		width: 190px
	}
	.pTab10 ul.pTabListe li {
		float: none!important;
		margin-right: 0
	}
	.pTab10 .pTabContent {
		width: 458px!important;
		float: right
	}
		overflow: hidden
	}
	.pTab10 ul.pTabListe {
		float: left;
		width: 190px
	}
	.pTab10 ul.pTabListe li {
		float: none!important;
		margin-right: 0
	}
	.pTab10 .pTabContent {
		width: 458px!important;
		float: right
	}
	</style>
</head>
<body>

	<div class="pTabGenel pTab10">
		<ul class="pTabListe">
			<li><a href="#">1. tab <span style="color: yellow">Aktif</span></a></li>
			<li><a href="#">2. tab <span style="color: yellow">Aktif</span></a></li>
			<li><a href="#">3. tab <span style="color: yellow">Aktif</span></a></li>
			<li><a href="#">4. tab <span style="color: yellow">Aktif</span></a></li>
		</ul>
		<div class="pTabContent">
		Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
		</div>
		<div class="pTabContent">
		Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur. Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
		</div>
		<div class="pTabContent">
		Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
		</div>
		<div class="pTabContent">
		Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
		</div>
	</div>

	<script type="text/javascript" src="http://www.erbilen.net/lab/pTab/js/jquery.js?v=1"></script>
	<script type="text/javascript" src="http://www.erbilen.net/lab/pTab/js/pTab.js?v=1503309947"></script>
	<script type="text/javascript">
	$(".pTab10").pTab({
		pEvent: 'mouseenter',
		pTab: '.pTabListe',
		pTabElem: 'li',
		pClass: 'pAktif',
		pContent: '.pTabContent',
		pEffect: 'fadeIn',
		pElemFunc: function(){
			$(this.pTab + " " + this.pTabElem + " span:first").show();
		},
		pEventFunc: function(elem){
			$(this.pTab + " " + this.pTabElem + " span").hide();
			$("span", elem).show();
		}
	});
	</script>

</body>
</html>

Klavye Sağ ve Sol Tuşları Aktif Kayan Tab Örneği demo

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.

Şuan için IE8 ve üzerinde çalışmaktadır. İşlemi görebilmek için örneğin üzerine farenizi getirip sağ ve sol yön tuşlarını kullanın.

Kaynak Kodlarını Göster
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>pTab (Demo #12)</title>
	<link rel="stylesheet" href="http://www.erbilen.net/lab/pTab/reset.css?v=1" />
	<style type="text/css">
	body { margin: 10px }
	.pTabGenel {
		width: 668px
	}
	.pTabGenel ul.pTabListe {
		overflow: hidden
	}
	.pTabGenel ul.pTabListe li {
		float: left; margin-right: 10px
	}
	.pTabGenel ul.pTabListe li a {
		display: block;
		padding: 10px;
		background: #333;
		color: #fff
	}
	.pTabGenel ul.pTabListe li a span {
		display: none
	}
	.pTabGenel ul.pTabListe li.pAktif a {
		background: #111;
	}
	.pTabGenel .pTabContent {
		background: #111;
		padding: 10px;
		line-height: 21px;
		width: 648px;
		color: #fff
	}
	</style>
</head>
<body>

	<div class="pTabGenel pTab12">
		<ul class="pTabListe">
			<li><a href="#">1. tab</a></li>
			<li><a href="#">2. tab</a></li>
			<li><a href="#">3. tab</a></li>
			<li><a href="#">4. tab</a></li>
		</ul>
		<div class="pTabContent">
		Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
		</div>
		<div class="pTabContent" style="background: #055a7a">
		Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
		</div>
		<div class="pTabContent" style="background: #7a1b05">
		Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
		</div>
		<div class="pTabContent" style="background: #2e7a05">
		Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
		</div>
	</div>

	<script type="text/javascript" src="http://www.erbilen.net/lab/pTab/js/jquery.js?v=1"></script>
	<script type="text/javascript" src="http://www.erbilen.net/lab/pTab/js/jquery-ui.min.js?v=1"></script>
	<script type="text/javascript" src="http://www.erbilen.net/lab/pTab/js/pTab.js?v=1503309947"></script>
	<script type="text/javascript">
	$(".pTab12").pTab({
		pTab: '.pTabListe',
		pTabElem: 'li',
		pClass: 'pAktif',
		pContent: '.pTabContent',
		pDuration: 1000,
		pSlide: true,
		pSlideWidth: 668,
		pEasing: 'easeOutElastic',
		pKeyboardEvent: true
	});
	</script>

</body>
</html>