» 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.


Structura HTML

Cod:

<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

Cod:

#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

Cod:

   $('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

Cod:

<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 --> Here

Tutorial realizat de InFeRn0
Numai bine,
Reproducerea acestui tutorial nu este posibila fara acordul nostru, in conformitate cu articolul L122-1 apartinand ICC.