Die Kombination von jQuery UI Tabs und jScrollPane schlägt fehl

Question

Ich habe Probleme, eine neuere Version von jscrollpane mit jQuery UI Tabs zu arbeiten. Ich bekomme nur eine Registerkarte (erste) funktioniert, aber keine anderen; Ich habe versucht, hier mit der vorherigen Version erklärt, setzen zusätzliche <div> gesteuert von Tabs (und im Inneren sind divs von jScrollPane gesteuert), wie beschrieben here, aber immer noch ohne Glück. Hat jemand ähnliche Probleme erlebt? Danke für Hinweise!

Answer 1

Ich kam zur Lösung mehr/weniger auf eigene Faust, natürlich mit Hilfe von this explanation von jscrollpane Autor selbst über dieses Problem, sondern für die vorherige Version von jscrollpane gegeben.

Da dies nicht der Box geklappt hat, und ich hatte immer noch Probleme der Implementierung der Lösung hinzugefügt ich einen Klick Zuhörer Links Registerkarten und wenn darauf geklickt wird, hinzugefügt JScrollPane zum Inhalt div, wie diese

jQuery("#tabs ul li a").click(function() { 
clickednum = "#tabs-" + jQuery(this).parent().attr("id"); 
jQuery(clickednum + " .skroler").jScrollPane(); 
    }); 

Was ich hier tue, ist zu warten, bis der Benutzer auf einen Tab-Link klickt, und dann jScrollPane zu Tab-Inhalt hinzufügen, der dem angeklickten Tab-Link entspricht.

.skroler ist eine extra div wo Registerkarte Inhalt, da sie von der Skript-Autor beschrieben wird, dass es muss auf diese Weise getan werden, um zu arbeiten)

Ich reckognizing Tabs durch li id Attribut (welches ich aus anderen Gründen aus PHP generieren musste)

Dies ist eine spezifische Implementierung - vom Arbeitsbeispiel könnte es wahrscheinlich in einer anderen Umgebung einfacher gemacht werden.

Ach, und natürlich am Anfang der Geschichte, müssen Sie JScrollPane initialisieren, um zuerst die Registerkarte geöffnet wie

jQuery("#tabs-1 .skroler").jScrollPane(); 

Answer 2

ich das gleiche Problem und löste es durch IDs zu den li-Tags hinzu, dass entsprechen den erzeugten Registerkarten:

<ul> 
     <li id="details"><a href="#tabs-1">Details</a></li> 
     <li id="history"><a href="#tabs-2">History</a></li> 
     <li id="examinations"><a href="#tabs-3">Examinations</a></li> 
     <li id="diagnosis"><a href="#tabs-4">Diagnosis</a></li> 
</ul> 

Dann wird zum Beispiel:

$('#diagnosis').click(function() { 
    $('.diagnosis').jScrollPane(); 
}); 

Answer 3

Gerade ra n in der gleichen Ausgabe

$("#tabs").tabs({ 
    //for the initially loaded tab 
    create: function(event, ui) { 
     $(ui.panel).jScrollPane(); 
    }, 
    //for the tabs opened later 
    activate: function(event, ui) { 
     $(ui.newPanel).jScrollPane(); 
    }, 
}); 

Mehr Infos hier http://api.jqueryui.com/tabs/