Pourquoi ce plugin jQuery tabbedDialog ne fonctionne-t-il que dans Firefox?

Question

Je found this jQuery code pour créer une boîte de dialogue à onglets:

$('#tenant').tabbedDialog(); 

$.fn.tabbedDialog = function() { 
    this.tabs(); 
    this.dialog({'modal':true,'width':800, 'height':600,'minWidth':400, 'minHeight':300,'draggable':true}); 
    this.find('.ui-tab-dialog-close').append($('a.ui-dialog-titlebar-close')); 
    this.find('.ui-tab-dialog-close').css({'position':'absolute','right':'0', 'top':'23px'}); 
    this.find('.ui-tab-dialog-close > a').css({'float':'none','padding':'0'}); 
    var tabul = this.find('ul:first'); 
    this.parent().addClass('ui-tabs').prepend(tabul).draggable('option','handle',tabul); 
    this.siblings('.ui-dialog-titlebar').remove(); 
    tabul.addClass('ui-dialog-titlebar'); 
} 

<div id="tenant"> 
     <ul> 
      <li><a href="#tenant_details">My Tenant</a></li> 
      <li><a href="#tenant_events">Events</a></li> 
      <li><a href="#tenant_jobs">Jobs</a></li> 
      <li class="ui-tab-dialog-close"></li> 
     </ul> 
     <div> 
      <div id="tenant_details"> 
       some details 
      </div> 
      <div id="tenant_events"> 
       some events 
      </div> 
      <div id="tenant_jobs"> 
       some jobs 
      </div> 
     </div> 
</div> 

Malheureusement, il semble ne fonctionner que dans Firefox.

Je l'ai testé dans Chrome 8 (n'affiche rien) et IE8 (affiche le contenu de l'onglet sur la page principale) et il ne fonctionne pas correctement dans les deux.

Des suppositions pourquoi pas?

jsfiddle demo

Answer 1

Au lieu d'essayer de résoudre ce vieux code, essayez d'utiliser ce que j'ai personnellement utilisé: http://jqueryui.com/demos/tabs/