«

Abas com Scroll costumizado em Javascript

May 31st, 2011 alice No Comments »


Para fazer essa aba você precisará de plugins que vc poderá baixar em:
bibliotecas js
linkar no html e utilizar o código javascript abaixo:

  // funcionalidade das abas
  $('.Scrollbar-Container').show();
  $("#tabs a").each(function(){
	var container = $($(this).attr('href'));
	container.find(".Scroller").css({
	  overflow: 'hidden',
	  width: 415
	});
var scroller  = new jsScroller(container.find(".Scroller").get(0), 0, 590)
var scrollbar = new jsScrollbar(container.find(".Scrollbar-Container").get(0), scroller, true);
	$(this).data('scrollbar', scrollbar);
  }).click(function(){
	var container = $($(this).attr('href')),
		scrollbar = $(this).data('scrollbar'),
		y = -(scrollbar._src._y);
 
	$('div.tabs_block').hide();
	$('#tabs a').removeClass('selected');
	$(this).addClass('selected');
	container.show();
	scrollbar.swapContent(container.find('.Container').get(0));
	if (y) scrollbar.scrollTo(0, y);
	return false;
  });
 
  // reset de abas
  $("div.tabs_block").hide();
  $("div.tabs_block:first").show();
  $("#tabs a:first").addClass("selected");

Com o html abaixo:

<div class="tabs_place">
	<div id="tabs">
	<a class="aba1 selected" href="#todas-as-radios" title=""  onclick="return false;">
        <em>Aba1</em></a>
	<a class="aba2" href="#terceiros" title="" onclick="return false;">
        <em>Aba2</em></a>
	<class="aba3" href="#lancamentos" title="" onclick="return false;">
        <em>Aba3</em></a>
	</div>
	<div class="holder_bg">
	<div class="holder">	
		<div class="tabs_block" id="todas-as-radios">
			<div class="Scrollbar-Container"> 
			<img src="img/seta_top.png" class="Scrollbar-Up" /> 
			<img src="img/seta_bot.png" class="Scrollbar-Down" /> 
			<div class="Scrollbar-Track"> 
			<img src="img/mao.png" class="Scrollbar-Handle" /> 
			</div> 
			</div> 
			<div class="Container"> 
				<div class="Scroller"> 
				<div class="Scroller-Container">
				<ul class="list-comment">
				<li>
				<a href="#" title="Intype" target="_blank">
				<span class="infos_radios">
				<span class="frase">Lorem Ipsum is simply dummy 
                                 </span>
				</span>
				</a>
				 </li>
				</ul>
				</div> 
				</div> 
			</div> 
		</div>
		<div class="tabs_block" id="terceiros">
		<div class="Scrollbar-Container"> 
		<img src="img/seta_top.png" class="Scrollbar-Up" /> 
		<img src="img/seta_bot.png" class="Scrollbar-Down" /> 
		<div class="Scrollbar-Track"> 
		<img src="img/mao.png" class="Scrollbar-Handle" /> 
		</div> 
			</div> 
			<div class="Container"> 
				<div class="Scroller"> 
				<div class="Scroller-Container">
				<ul class="list-comment">
				<li>
				<a href="#" title="Intype" target="_blank">
				<span class="infos_radios">
				<span class="frase">Lorem Ipsum is simply dummyte
                                </span>	
                                </span>
				</a>
				</li>
				</ul>
				</div> 
				</div> 
			</div> 
		</div>
		<div class="tabs_block" id="lancamentos">
			<div class="Scrollbar-Container"> 
			<img src="img/seta_top.png" class="Scrollbar-Up" /> 
			<img src="img/seta_bot.png" class="Scrollbar-Down" /> 
			<div class="Scrollbar-Track"> 
			<img src="img/mao.png" class="Scrollbar-Handle" /> 
			</div> 
		</div> 
			<div class="Container"> 
				<div class="Scroller"> 
				<div class="Scroller-Container">
				<ul class="list-comment">
				<li>
				<a href="#" title="Intype" target="_blank">
				<span class="infos_radios">
				<span class="frase">Lorem Ipsum is simp
                                </span>
				</a>
				</li>
				</ul>
				</div> 
				</div> 
			</div> 
		</div>
	</div><!--holder-->
	</div><!--holder bg-->
</div>

E ainda esse css para fazer a âncora das abas

<style>	
 
/*quando tiver problema em visualizar o scrol no ie7, procure a div com position relative e coloque overflow:hidden....*/
 
Container {
	width:443px;
	height:620px;
	background: #F9F9F9;
 
}
 
.Scroller {
	position: absolute;
 
	overflow: auto;
	width:425px;
 
	height:590px;
	top:15px;
	left :10px;
	background:#f9f9f9;
}
 
.Scroller-Container {
	position: absolute;
	top: 0;
	left: 0;
}
 
.Scrollbar-Container {
	display:none;
	position: absolute;
	top: 0;
	left: 367px;
}
 
.Scrollbar-Up {
	cursor: pointer;
	position: absolute;
	z-index:3;
	left:49px;
	top:15px;
}
 
.Scrollbar-Track {
	width:12px;
	height: 586px;
	position: absolute;
	top: 18px;
	left: 49px;
	background: url("img/palito.png") repeat-y center center;
	z-index:3;
}
 
.Scrollbar-Handle {
	position: absolute;
	left:0;
	width:12px;
	height:30px;
}
 
.Scrollbar-Down {
	cursor: pointer;
	position: absolute;
	top: 595px;
	left:49px;
	z-index:3;
}
 
.tabs_block {
	position:relative;
	overflow: hidden;
	margin:0 0 15px -6px;
	height: 620px;
	width: 443px;
}
 
.Container h3 {
	color:#fff;
	font-size:15px;
	font-family:sans-serif;
	float:left;
	margin:10px 0 0 15px;
}
 
.Container p {
	color:#fff;
	font-size:13px;
	font-family:sans-serif;
	float:left;
	margin:10px 0 0 136px;
}
.Scroller p {
	margin: 0;
	padding: 10px 20px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000;
}
.list-comment{
	padding:0;
	margin:0;
}
.list-comment li{
	display:block;
	width:593px;
	list-style:none;
	height:80px;
	margin-left:10px;
}
.list-comment li a{
	width:393px;
	height:80px;
	display:block;
	cursor:pointer;
	text-decoration:none;
	font-family:arial;
	font-weight:bolder;
	font-size:12px;
	float:none;
	padding:0;
	color:#616060;
	border-bottom:1px solid #000;
}
.Scroller .list-comment li a .frase p{
	display:block;
	cursor:pointer;
	text-decoration:none;
	font-family:arial;
	font-weight:bolder;
	font-size:12px;
	float:none;
	padding:0;
	color:#616060;
}
 
.list-comment li a img, .infos_radios{
	display:inline-block;
	zoom: 1; *display: inline; /* Hack for IE6 to emulate display: inline-block; */
	vertical-align:middle;
}
.infos_radios{
	width:360px;
	margin:5px 0 0 7px;
}
img, a{
	border:none;
}
.count-comment{
	display:none;
	background:red;
	width:35px;
	height:22px;
	color:#949699;
	font-size:11px;
	text-decoration:none;
	padding:5px 0 0 24px;
	font-weight:lighter;
	line-height:22px;
}
 
.holder{
	height: 620px;
	width: 437px;
	overflow:hidden;
	clear:left;
	position:relative;
}
.tabs_place .aba1,
.tabs_place .aba2{
	float:left;
	text-align:center;
	width:130px;
	height:30px;
	margin-right:10px;
}
.tabs_place .aba1 em,
.tabs_place .aba2 em ,
.tabs_place .aba3 em{
	display:none;
}
.aba1{
	background:#000;
}
.aba2{
	background:#000;
}
.aba3{
	background:#000;
	width:156px;
	height:30px;
	float:left;
	text-align:center;
	margin-right:10px;
}
/*mudança de estados das abas*/
.aba1.selected{
	background:#cecece;
}
.aba2.selected{
	background:#cecece;
}
.aba3.selected{
	background:#cecece;
	width:156px;
	height:30px;
	float:left;
	text-align:center;
	margin-right:10px;
}
.radios_list{
	height:660px;
}
.holder_bg{
	width:437px;
	overflow:hidden;
	clear:left;
	background:#cecece;
}
.tabs_place{
	float:left;
}
</style>

E o melhor, essas abas e o scroll custumizado e as abas funcionam e são compatíveis com IE6, IE7, IE8, Chrome, Firefox, Opera.

Posted in Design e Web

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply