Flipping Content Tabs Using jQuery
Page 1 of 1
Flipping Content Tabs Using jQuery
Tab-uri de conținut au devenit mult mai populare in ultima vreme cu site-uri mai multe și mai multe blog-uri și folosindu-le pentru a vedea mai mult conținut în spațiu mai mic. Azi am de gând să-ți arăt cum să creați file de conținut cu efect de frumos flipping.
[You must be registered and logged in to see this image.]
Structura HTML
Foaia CSS
JavaScript Code
Daca utilizati intro pagina HTML
Demonstratie --> [You must be registered and logged in to see this link.]
Tutorial realizat de InFeRn0
Numai bine,
Reproducerea acestui tutorial nu este posibila fara acordul nostru, in conformitate cu articolul L122-1 apartinand ICC.[/quote]
[You must be registered and logged in to see this image.]
Structura HTML
- Code:
<div id="flip-tabs" >
<ul id="flip-navigation" >
<li class="selected"><a href="#" id="tab-0" >Recent</a></li>
<li><a href="#" id="tab-1" >Popular</a></li>
<li><a href="#" id="tab-2" >Comments</a></li>
</ul>
<div id="flip-container" >
<div>
<!--Put Content for first tab here-->
</div>
<div>
<!--Put Content for second tab here-->
</div>
<div>
<!--Put Content for third tab here[code]-[/code]->
</div>
</div>
</div>
Foaia CSS
- Code:
#flip-tabs{
width:300px;
margin:20px auto; position:relative;
}
#flip-navigation{
margin:0 0 10px; padding:0;
list-style:none;
}
#flip-navigation li{
display:inline;
}
#flip-navigation li a{
text-decoration:none; padding:10px;
margin-right:0px;
background:#f9f9f9;
color:#333; outline:none;
font-family:Arial; font-size:12px; text-transform:uppercase;
}
#flip-navigation li a:hover{
background:#999;
color:#f0f0f0;
}
#flip-navigation li.selected a{
background:#999;
color:#f0f0f0;
}
#flip-container{
width:300px;
font-family:Arial; font-size:13px;
}
#flip-container div{
background:#fff;
}
JavaScript Code
- Code:
$('document').ready(function(){
$('#flip-container').quickFlip();
$('#flip-navigation li a').each(function(){
$(this).click(function(){
$('#flip-navigation li').each(function(){
$(this).removeClass('selected');
});
$(this).parent().addClass('selected');
var flipid=$(this).attr('id').substr(4);
$('#flip-container').quickFlipper({ }, flipid, 1);
return false;
});
});
$.getScript('http://yourjavascript.com/31900124222/jquery.quickflip.js');
$.getScript('http://yourjavascript.com/19200120422/jquery-1.3.2.js');
});
Daca utilizati intro pagina HTML
- Code:
<script type="text/javascript" src="http://yourjavascript.com/31900124222/jquery.quickflip.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/19200120422/jquery-1.3.2.js"></script>
Demonstratie --> [You must be registered and logged in to see this link.]
Tutorial realizat de InFeRn0
Numai bine,
Reproducerea acestui tutorial nu este posibila fara acordul nostru, in conformitate cu articolul L122-1 apartinand ICC.[/quote]
Similar topics
» Multi tab-uri, un singur click [ jquery ]
» CSS css3/jquery notification boxes Tutorial
» tutorial Bare verticala foarte eleganta jQuery
» CSS css3/jquery notification boxes Tutorial
» tutorial Bare verticala foarte eleganta jQuery
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum