2009-06-16 18 views
0

Der Teil, den ich "Tab" möchte, befindet sich in einem geschachtelten Tabellenlayout.Jquery Tabs in einem Tabellenlayout

Es beginnt nach einer Tabelle Chaos wie folgt aus:

<table> <tr> <td> <table> <tr> <td> <table> <tr> <td> 
     <div id ="SearchModuleContainer"> 
     <ul class="tabNavigation"> 
      <li><a href="#PersonSearchPanel"></a></li> 
      <li><a href="#TypeSearchPanel"></a></li> 
     </ul> 

     <div id="PersonSearchPanel" runat="server"> 
     <table width="100%" border="0" cellspacing="0"> 
      <tr> 
      <td align="center" valign="top"> 
       <table width="100%" border="0" cellpadding="0" cellspacing="0"> 
        <tr> 
      ... 
      ... 
     </div> 
     <div id="TypeSearchPanel" runat="server"> 
     <table width="100%" border="0" cellspacing="0"> 
      <tr> 
      <td align="center" valign="top"> 
       <table width="100%" border="0" cellpadding="0" cellspacing="0"> 
        <tr> 
      ... 
      ... 
     </div> 
    </div> 

Ich habe einen ref jquery-ui-1.7.1, und in meiner js-Datei hinzugefügt, die ich habe:

$(document).ready(function() { 
    $("#SearchModuleContainer").tabs(); 
}); 

Meine Frage ist, habe ich etwas verpasst, oder gibt es einige Probleme bei der Verwendung von jquery in einem "old-school" durcheinander Tisch-Layout wie folgt?

+0

Haben Sie auch einen Verweis auf die jQuery-Kernbibliothek hinzugefügt? –

+1

in diesem Link haben Sie ein sehr gutes Beispiel http://www.remotesynthesis.com/post.cfm/Adding-and-removing-tabs-with-jquery-and-jquery-ui –

+0

Zuerst würde ich sicherstellen, dass die ID ist für das Panel sind einzigartig und nicht zweimal (PersonSearchPanel). Stellen Sie auch sicher, dass die ID des Panels PersonSearchPanel ist, da Sie ein RUNAT = "SERVER" -Tag haben und die ID des Panels so ändern könnte: ct00_myTable_PersonSearchPanel –

Antwort

0

Sie müssen sicherstellen, dass Sie die CSS korrekt für die Klassen ui-tabs-hide, ui-tabs-selected implementiert haben. Wenn Sie dies nicht richtig gemacht haben, wird es so aussehen, als würde das Skript nicht funktionieren. Der einfachste Weg, um es Folgendes hinzufügen zu überprüfen:

<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/themes/smoothness/jquery-ui.css" /> 

Fügen Sie einfach diese im Kopf-Abschnitt Ihrer HTML-Seite, bevor Sie Ihre JavaScript-Dateien. Ich habe dein Beispiel getestet und die Tabs-Funktionalität funktioniert mit Tabellen.

[EDIT] Ich habe den Quellcode aus meinem Testbeispiel here eingefügt.

+0

Vielen Dank, dass funktioniert hat: -) – Soeren