jQuery-UI tabs: Upgrade von 1.9.x auf 1.10.x

[Ronny Riedel]

Hallo zusammen,

in einem Kalender nutze ich jQuery-UI "tabs" um das Einstellen von Serienterminen zu ermöglichen. Die Maske sieht dabei ähnlich aus wie die in Outlook.

Der HTML-Code dazu:

<div id="tabs">  
   <ul>  
      <li><a href="#daily">T&auml;glich</a></li>  
      <li><a href="#weekly">W&ouml;chentlich</a></li>  
      <li><a href="#monthly">Monatlich</a></li>  
   </ul>  
   <div id="daily">  
      <ul>  
         <li>  
            <input type="radio" name="abc" value="1" checked="checked" class="clsRdoBtn">  
            <!-- (weitere FORM-Elemente) -->  
         </li>  
         <li>  
            <input type="radio" name="abc" value="2" class="clsRdoBtn">  
            <!-- (weitere FORM-Elemente) -->  
         </li>  
      </ul>  
   </div>  
   <div id="weekly">  
      <ul>  
         <li>  
            <input type="radio" name="abc" value="3" class="clsRdoBtn">  
            <!-- (weitere FORM-Elemente) -->  
         </li>  
      </ul>  
   </div>  
   <div id="monthly">  
      <ul>  
         <li>  
            <input type="radio" name="abc" value="4" class="clsRdoBtn">  
            <!-- (weitere FORM-Elemente) -->  
         </li>  
         <li>  
            <input type="radio" name="abc" value="5" class="clsRdoBtn">  
            <!-- (weitere FORM-Elemente) -->  
         </li>  
      </ul>  
   </div>  
</div>  

Wenn die Seite geladen wird, dann soll das Tab mit dem aktuell ausgewählten Radio-Button ausgewählt werden. Das ging bis jQuery-UI 1.9.x mit folgendem Code:

var strId = $("#tabs").find("input.clsRdoBtn").filter(":checked").parents("div").attr("id");  
$("#tabs").tabs("select", strId);  

Mit jQuery-UI 1.10.x geht das nicht mehr, da die Option "select" durch die Option "active" ersetzt wurde (Link).

$("#tabs").tabs( "option", "active", <INDEX> );  

Das Problem ist jetzt, das die neue "active" Option nicht die obige Syntax mit einer HTML-ID unterstützt, sondern als 3. Parameter immer den (nummerischen) Index des zu selektierenden Tabs haben will (Link).

Frage: Wie ermittelt man diesen?

Grüße
  RR

[Ronny Riedel]

Hallo nochmal,

ich hab mal den Code der beiden jQuery-UI Versionen verglichen und festgestellt, das die interne Funtion "_getIndex()" in Version 1.10.x in diesem Zusammenhang nicht mehr verwendet wird.

Es gibt sogar einen Bug-Eintrag dafür (activate tab by id selector), der aber leider mit dem Hinweis "not a bug" geschlossen wurde.

Ich hab mir die "_getIndex()"-Funktion aus 1.9.x zum Vorbild genommen und folgende Lösung gefunden:

var strId   = $("#tabs").find("input.clsRdoBtn").filter(":checked").parents("div").attr("id");  
var numIndx = $("#tabs > ul").find("a").index( $("#tabs > ul").find("a").filter("[href=#" + strId + "]") );  
  
$("#tabs").tabs("option", "active", numIndx);  

Grüße
  RR