Ultimele subiecte
» [All Version] Social Link/Icons
Scris de Jean01Crv 13/10/2014, 12:52 pm

» (pHpBB3) Legenda : Sistem Nou
Scris de Jean01Crv 13/10/2014, 12:49 pm

» Imagine la Statistici & Cine este Conectat ? [pHpBB3]
Scris de Jean01Crv 13/10/2014, 12:44 pm

» Statistici - Sistem Nou [pHpBB3]
Scris de Jean01Crv 13/10/2014, 12:20 pm

» [Prezentare]Chozen
Scris de valyd1971 16/5/2014, 12:54 am

Vizitator Vizitator
Cine este conectat?
In total sunt 3 utilizatori conectati: 0 Inregistrati, 0 Invizibil si 3 Vizitatori

Nici unul

[ Vizualizeaza toata lista ]


Recordul de utilizatori conectati a fost de 42, 1/11/2012, 8:58 am

» Flipping Content Tabs Using jQuery

Vezi subiectul anterior Vezi subiectul urmator In jos

» Flipping Content Tabs Using jQuery

Mesaj Scris de StaarK* For EvEr la data de 24/9/2012, 3:25 am

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.
Flipping Content Tabs

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.


Do not judge me for what I do, do not judge me for what I do!
Cee I did was a mother first but now changed!
Sincerely Extream-Suport Team
avatar
StaarK* For EvEr
Administrator


Vezi profilul utilizatorului

Sus In jos

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

 
Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum