Basit jQuery Tab Sistemi

04-06-2010, 11:40:45

Eposta Aktivasyonu Gerekmekte

Merhaba arkadaşlar, daha önce bulduğum bir jQuery tab içerik sistemini, sadeleştirdim ve daha genel kullanıma uygun hale getirdim, ihtiyacınız varsa kullanabilirsiniz. Oldukça basittir, hiç javascript bilgisi olmayanlar ya da hızlı ve basit bir tab menuye ihtiyacı olanlar için faydalı olabilir.

ie6, ie7, ie8, firefox, safari, chorome ve opera ile sorunsuz çalışır.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.4.2.js"></script>

<title>Tab Menu Örnek</title>
<style type="text/css">
.tab-buyuk{
	width:500px;
	margin:0 auto;
	font-family:Arial, Helvetica, sans-serif;
}
ul.tablar {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 32px;
	border-bottom: 1px solid #999;
	border-left: 1px solid #999;
	width: 100%;
}
ul.tablar li {
	float: left;
	margin: 0;
	padding: 0;
	height: 31px;
	line-height: 31px;
	border: 1px solid #999;
	border-left: none;
	margin-bottom: -1px;
	overflow: hidden;
	position: relative;
	background: #e0e0e0;
}
ul.tablar li a {
	text-decoration: none;
	color: #333;
	display: block;
	font-size: 12px;
	padding: 0 20px;
	border: 1px solid #fff;
	outline: none;
	font-weight:bold;
}
ul.tablar li a:hover {
	background: #ccc;
}
html ul.tablar li.active, html ul.tablar li.active a:hover  {
	background: #fff;
	border-bottom: 1px solid #fff;
}
.tab_container {
	border: 1px solid #999;
	border-top: none;
	overflow: hidden;
	clear: both;
	float: left; width: 100%;
	background: #fff;
}
.tab_content {
	padding: 20px;
	font-size: 1.2em;
	display:none;
}
</style>
</head>
<script type="text/javascript">
$(document).ready(function() {
	$(".tab_content").hide();
	$(".tab_content:first").show(); 
	$("ul.tablar li:first").addClass("active");
	
	$("ul.tablar li").click(function () {
		$("ul.tablar li").removeClass("active");
		$(this).addClass("active");
		$(".tab_content").hide();

		var index = $("ul.tablar li").index(this);
		$('.tab_content').eq(index).fadeIn(500);
	});
});
</script>
<body>
<div class="tab-buyuk">
  <ul class="tablar">
      <li><a href="javascript:void(0)">İlk İçerik</a></li>
      <li><a href="javascript:void(0)">İkinci İçerik</a></li>
      <li><a href="javascript:void(0)">Üçüncü İçerik</a></li>
      <li><a href="javascript:void(0)">Dördüncü İçerik</a></li>
  </ul>
  <div class="tab_container">
      <div class="tab_content">
          İlk tabın içeriği, istediğiniz içeriği buraya ekleyebilirsiniz.
      </div>
      <div class="tab_content">
         İkinci tabın içeriği, istediğiniz içeriği buraya ekleyebilirsiniz.
      </div>
      <div class="tab_content">
         Üçüncü tabın içeriği, istediğiniz içeriği buraya ekleyebilirsiniz.
      </div>
      <div class="tab_content">
         Dördüncü tabın içeriği, istediğiniz içeriği buraya ekleyebilirsiniz.
      </div>
  </div>
</div>
</html>
</body>

04-06-2010, 11:44:09

#2

~~JustGo~~

Üyeliği durduruldu

Simple tabs, bende bunu kullanırım çoğu zaman çok basit ve kullanışlı. Değişiklik pek büyük olmamış, teşekkürler genede kaynak link eklenmeli diye düşünüyorum.

04-06-2010, 11:58:29

#3

paydayin

Eposta Aktivasyonu Gerekmekte

evet kaynak burası

Değişiklik küçük ama bence generic olması açısından faydalı olabilecek bir değişiklik, en azından bana böylesi lazımdı. orijinalinde attr'dan yakalanan linkler, alttaki divler için id mecburiyeti gerektiriyordu, yaptığım değişiklik ikinci taba tıklandığında ikinci içeriğin, üçüncü taba tıklandığında üçüncü içeriğin açılmasını sağlayan, yani sıralamayı kullanan ufak bir değişiklik. Umarım faydalı olur.

Herkese iyi çalışmalar.

04-06-2010, 12:27:48

#4