Anasayfa » Ajax - Jquery » jquery tab ve kayan içerik

jquery tab ve kayan içerik

Bu makalemizde bilinen tab içerik sistemlerinden biraz daha farklı olan kayan içerik efektiyle süslenmiş bir tab sistemini anlatacağız.

Mantık aşağıdaki gibidir.

image1 jquery tab ve kayan içerik

Html kod bloğu olarak aşağıdakini kullanıyoruz

<div id="moving_tab">
	<div class="tabs">
		<div class="lava"></div>
		<span class="item">Tab 01</span>
		<span class="item">Tab 02</span>
	</div>
	<div class="content">
		<div class="panel">
			<ul>
				<li><a href='#'>Panel 01 Item 01</a></li>
				<li><a href='#'>Panel 01 Item 02</a></li>
				<li><a href='#'>Panel 01 Item 03</a></li>
				<li><a href='#'>Panel 01 Item 04</a></li>
				<li><a href='#'>Panel 01 Item 05</a></li>
			</ul>
			<ul>
				<li><a href='#'>Panel 02 Item 01</a></li>
				<li><a href='#'>Panel 02 Item 02</a></li>
				<li><a href='#'>Panel 02 Item 03</a></li>
				<li><a href='#'>Panel 02 Item 04</a></li>
				<li><a href='#'>Panel 02 Item 05</a></li>
			</ul>
		</div>
	</div>
</div>

Eklememiz gereken Css kodu ise şöyle

body {
		font-family:arial;
		font-size:12px;
	}
	a {
		color:#333;
		text-decoration:none;
		display:block;
	}
	a:hover {
		color:#888;
		text-decoration:none;
	}
	#moving_tab {
		/* hide overlength child elements*/
		overflow:hidden;
		/* all the child elements are refering to this width */
		width:300px;
		/* fix ie 6 overflow bug */
		position:relative
		/* styling */
		border:1px solid #ccc;
		margin:0 auto;
	}
		#moving_tab .tabs {
			/* enable absolute position for .lava */
			position:relative;
			height:30px;
			/* styling */
			padding-top:5px;
			cursor:default;
		}
		#moving_tab .tabs .item {
			/* enable z-index */
			position:relative;
			z-index:10;
			/* display in one row */
			float:left;
			display:block;
			/* width = half size of #moving_tab */
			width:150px;
			/* height = height of .tabs */
			text-align:center;
			font-size:14px;
			font-weight:700;
		}
		#moving_tab .tabs .lava {
			/* Set it to absolute */
			position:absolute;
			top:0; left:0;
			/* display the lava in bottom most layer */
			z-index:0;		
			/* width = half size of #moving_tab */
			width:150px;
			/* height = height of .tabs */
			height:30px;
			/* styling */
			background:#abe3eb;
		}
		#moving_tab .content {
			/* enable absolute position for .panel */
			position:relative;
			overflow:hidden;
			/* styling */
			background:#abe3eb;
			border-top:1px solid #d9fafa;
		}
		#moving_tab .panel {
			/* width is width of #moving_tab times 2 */
			position:relative;
			width:600px;
		}
		#moving_tab .panel ul {
			/* display in one row */
			float:left;
			/* width is the same with #moving_tab */
			width:300px;
			/* remove all styles */
			padding:0;
			margin:0;
			list-style:none;
		}
			/* styling */
			#moving_tab .panel ul li {
				padding:5px 0 5px 10px;
				border-bottom:1px dotted #fff;
			}

Aşağıdaki kodları boş bir metin belgesine ekleyip tab.js ismiyle kaydediyoruz.

$(document).ready(function () {
	//set the default location (fix ie 6 issue)
	$('.lava').css({left:$('span.item:first').position()['left']});
	$('.item').mouseover(function () {
		//scroll the lava to current item position
		$('.lava').stop().animate({left:$(this).position()['left']}, {duration:200});
		//scroll the panel to the correct content
		$('.panel').stop().animate({left:$(this).position()['left'] * (-2)}, {duration:200});
	});
});

son olarakta sitemizin

<head></head>

tagları arasına aşağıdakini ekliyoruz.

<script type="text/javascript" src="tab.js"></script>

Tarih : 5 Aralık 2009

Kategori : Ajax - Jquery

Etiketler : jquery, tab

Okuduğunuz Konuya Benzer Konular

css ve jquery ile simple tabs oluşturma

jquery ile breadcrumb oluşturma

kullanışlı jquery teknikleri

jquery ile rasgele yazılar göstermek

This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

Yorum yapın

Rss Aboneliği

Güncel makalelerden,yeniliklerden,gelişmelerden ve birçok alanda sunduğumuz faydalı bilgilerden haberdar olmak için bizleri aşağıdaki alternatiflerden takip edebilirsiniz