Comment cloner/copier/mettre en miroir un onglet jquery

Question

Comment puis-je créer des onglets jquery, avec exactement les mêmes onglets en haut et en bas du contenu?

Ainsi, ces 2 onglets combinés, et Recopie eachother:

http://jqueryui.com/demos/tabs/default.html

http://jqueryui.com/demos/tabs/bottom.html

Answer 1

C'est un hack total de onglets jQuery, mais je ne pouvais pas penser à une autre façon de ce facilement. Il vous suffit de mettre le style sur les onglets clonés. Vous pouvez consulter un exemple en direct here.

Le code JavaScript hacked est la suivante:

$(function() { 

     var myTabs = $("#tabs").tabs(); 
     var x = $('.ui-tabs-nav').clone().addClass('mySecondTabs'); 
     $('#tabs').append(x); 
     $('.mySecondTabs').tabs(); 

     $('#tabs').tabs({ 

      select: function(event, ui) 
      { 
       index = ui.index; 
       x = $('.mySecondTabs').children('li:nth-child('+(parseInt(index)+1)+')'); 
       $('.mySecondTabs').children('li').removeClass('ui-tabs-selected').removeClass('ui-state-active'); 
       x.addClass('ui-tabs-selected').addClass('ui-state-active'); 
      } 
     }); 

     $('.mySecondTabs').children('li').click(function() 
     { 
      $('#tabs').tabs("select", $('.mySecondTabs').children('li').index(this)); 
     }); 


    }); 

Answer 2

It `s très simple:

$('#tabs').tabs();  
$('#my-text-link').click(function(){ 
    $('#tabs').tabs("option", "active", 1); //open the second tab [0,1,2...] 
});