JQueryUI - alles dynamisch generiert - Tabs in jedem ein Akkordion mit Tabellen @ tutorials.de: Tutorials, Forum & Hilfe

blacksh33p · 02.08.10 23:34

Hallo,

versuche gerade eine Kursanmeldung zu verwirklichen und stecke hier total fest.

So sieht es korrekterweise aus:

http://img135.imageshack.us/img135/6...elsheimkur.png

Jedes Tab hat ein Akkordeon mit mehreren Punkt und einer Tabelle darin.
Alles wird komplett über PHP dynamisch generiert, da die Daten aus einer DB kommen.

Das erste Tab funktioniert auch einwandfrei.
Der 2. Tab nicht.

http://img709.imageshack.us/img709/6...elsheimkur.png

1. Problem
Mittlerweile bin ich soweit, dass er wenn in den 2. Tab gehe eine andere Spalte im Akkordeon auswähle und dann wieder zurück gehe klappt es einigermaßen (dazu am ende).
Mit scheint, dass das Akkordeon beim Tabwechsel seine Conentgröße nicht ermittelt, aber wie kann ich ihn zwingen. Habe es schon mit "resize" versucht.
Das Phänomen zeichnet sich bei Allen bis auf den ersten Tab ab, komischweise funktioniert ein Rückwechseln auf Tab1 jeder Zeit problemlos.

2. Problem

Trotz automatischer Codegenerierung zerschießt JQuery seinen CSS Code

Generierung:

PHP-Code:


while(...)

{

echo "<div><h3><a href=\"#\">".$row_kkat['name']."</a></h3><div>\n"; //tabs-".$row_pkat['pkatID']."  // class=\"ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom\"



/// Tabelle Anfang

echo "<table class=\"kursliste\" cellpadding=\"0\" cellspacing=\"1px\">\n";

echo "<thead>\n";

echo "  <tr><td>Tag</td><td>Start</td><td>Zeit</td><td>Preis</td><td>anmelden?</td></tr>\n";

echo "</thead>\n";

echo " <tbody>\n";

$result_kurse = mysql_query("SELECT * FROM Kurse WHERE pkatID=".$row_pkat['pkatID']." AND kkatID=".$row_kkat['kkatID']." ORDER BY tag ASC;");

while ( $row_kurse = mysql_fetch_array ( $result_kurse ) )

{

echo "<tr><td>".$row_kurse['tag']."</td><td>".$row_kurse['start']."</td><td>".$row_kurse['zeit']."</td><td>".$row_kurse['preis']."</td><td class=\"centerText\">Anmelden!</td></tr>\n";

}  

echo "</tbody>\n";

echo "</table>\n";

echo "</div></div>\n"; 

}

Die 2 Varianten:

http://img196.imageshack.us/img196/6...elsheimkur.png
http://img196.imageshack.us/img196/3...lsheimkurs.png

Die Codefragmente zu beiden Bildern (man achte auf die Paddings):

HTML-Code:

<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" style="display: block; padding-top: 11px; padding-bottom: 11px;" role="tabpanel">
<table cellspacing="1px" cellpadding="0" class="kursliste">
<thead>
  <tr><td>Tag</td><td>Start</td><td>Zeit</td><td>Preis</td><td>anmelden?</td></tr>
</thead>
 <tbody>
</tbody>
</table>
</div>

HTML-Code:

<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" style="display: block; padding-top: 0px; padding-bottom: 0px;" role="tabpanel">
<table cellspacing="1px" cellpadding="0" class="kursliste">
<thead>
  <tr><td>Tag</td><td>Start</td><td>Zeit</td><td>Preis</td><td>anmelden?</td></tr>
</thead>
 <tbody>
</tbody>
</table>
</div>

Muss das unbedingt irgendwie hinbekommen wegen Termindruck.
Hoffe irgendwer hat da eine Idee

Vielen Dank schonmal für die Mühe des Lesens.
Für Fragen stehe ich immer und gerne bereit.

grüße,

Marcel

blacksh33p · 02.08.10 23:37

HTML Output

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kursanmeldung</title>
<link rel="stylesheet" type="text/css" href="css/dark-hive/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="css/screen.css"/ media="screen">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript">
<!--
			$(function()
			{

					
				// Tabs
				$('#tabs').tabs({cache:false}); //.bind( "tabsselect", function(event, ui) {
 				//$('#accordion-9').accordion( "resize" );
				//});
				
				
				$("#accordion-8").accordion({ header: "h3", autoheight: false, clearStyle: true, fillSpace: true });
$("#accordion-9").accordion({ header: "h3", autoheight: false, clearStyle: true, fillSpace: true });
$("#accordion-10").accordion({ header: "h3", autoheight: false, clearStyle: true, fillSpace: true });
$("#accordion-11").accordion({ header: "h3", autoheight: false, clearStyle: true, fillSpace: true });
$("#accordion-12").accordion({ header: "h3", autoheight: false, clearStyle: true, fillSpace: true });
$("#accordion-13").accordion({ header: "h3", autoheight: false, clearStyle: true, fillSpace: true });
$("#accordion-14").accordion({ header: "h3", autoheight: false, clearStyle: true, fillSpace: true });

				
				
			});
//-->
</script>
</head>

<body>
<div id="tabs">
  <h2 class="header">Kursanmeldung</h2>
  <ul>
    <!-- Tab Überschriften //-->
    <li><a href="#tabs-8">Kindertanz</a></li>
    <li><a href="#tabs-9">Jugend</a></li>
    <li><a href="#tabs-10">Erwachsene</a></li>
    <li><a href="#tabs-11">Lady's First</a></li>
    <li><a href="#tabs-12">Club Agilando</a></li>
    <li><a href="#tabs-13">Fitness</a></li>
    <li><a href="#tabs-14">Specials</a></li>
    <!-- End of Tab Überschriften //-->
  </ul>
  <div id="tabs-8">
    <div id="accordion-8">
      <div>
        <h3><a href="#">Kindertanz 3-5 Jahre</a></h3>
        <div>
          <table class="kursliste" cellpadding="0" cellspacing="1px">
            <thead>
              <tr>
                <td>Tag</td>
                <td>Start</td>
                <td>Zeit</td>
                <td>Preis</td>
                <td>anmelden?</td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Dienstag & Freitag</td>
                <td>12.10.2010</td>
                <td>15.00 - 15.50 h</td>
                <td>25,- &euro; / Monat</td>
                <td class="centerText">Anmelden!</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div>
        <h3><a href="#">Kindertanz 6-8 Jahre</a></h3>
        <div>
          <table class="kursliste" cellpadding="0" cellspacing="1px">
            <thead>
              <tr>
                <td>Tag</td>
                <td>Start</td>
                <td>Zeit</td>
                <td>Preis</td>
                <td>anmelden?</td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Dienstag & Freitag</td>
                <td>12.10.2010</td>
                <td>16.00 - 16.50 h</td>
                <td>25,- &euro; / Monat</td>
                <td class="centerText">Anmelden!</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div>
        <h3><a href="#">Mini - Clip 9-11 Jahre</a></h3>
        <div>
          <table class="kursliste" cellpadding="0" cellspacing="1px">
            <thead>
              <tr>
                <td>Tag</td>
                <td>Start</td>
                <td>Zeit</td>
                <td>Preis</td>
                <td>anmelden?</td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Dienstag</td>
                <td>12.10.2010</td>
                <td>17.00 - 17.50 h</td>
                <td>25,- &euro; / Monat</td>
                <td class="centerText">Anmelden!</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <div id="tabs-9">
    <div id="accordion-9">
      <div>
        <h3><a href="#">Grundkurs</a></h3>
        <div>
          <table class="kursliste" cellpadding="0" cellspacing="1px">
            <thead>
              <tr>
                <td>Tag</td>
                <td>Start</td>
                <td>Zeit</td>
                <td>Preis</td>
                <td>anmelden?</td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Freitag</td>
                <td>15.10.2010</td>
                <td>18.00 - 19.15 h</td>
                <td>99,- &euro; / Person</td>
                <td class="centerText">Anmelden!</td>
              </tr>
              <tr>
                <td>Montag</td>
                <td>11.10.2010</td>
                <td>18.00 - 19.15 h</td>
                <td>99,- &euro; / Person</td>
                <td class="centerText">Anmelden!</td>
              </tr>
              <tr>
                <td>Sonntag</td>
                <td>17.10.2010</td>
                <td>14.00 - 15.15 h</td>
                <td>99,- &euro; / Person</td>
                <td class="centerText">Anmelden!</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div>
        <h3><a href="#">Videoclip / Streetdance 12-14 Jahre</a></h3>
        <div>
          <table class="kursliste" cellpadding="0" cellspacing="1px">
            <thead>
              <tr>
                <td>Tag</td>
                <td>Start</td>
                <td>Zeit</td>
                <td>Preis</td>
                <td>anmelden?</td>
              </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
        </div>
      </div>
      <div>
        <h3><a href="#">Videoclip / Streetdance 15-17 Jahre</a></h3>
        <div>
          <table class="kursliste" cellpadding="0" cellspacing="1px">
            <thead>
              <tr>
                <td>Tag</td>
                <td>Start</td>
                <td>Zeit</td>
                <td>Preis</td>
                <td>anmelden?</td>
              </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <div id="tabs-10">
    <div id="accordion-10">
      <div>
        <h3><a href="#">Grundkurs Erwachsene</a></h3>
        <div>
          <table class="kursliste" cellpadding="0" cellspacing="1px">
            <thead>
              <tr>
                <td>Tag</td>
                <td>Start</td>
                <td>Zeit</td>
                <td>Preis</td>
                <td>anmelden?</td>
              </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
        </div>
      </div>
      <div>
        <h3><a href="#">Schnellkurs</a></h3>
        <div>
          <table class="kursliste" cellpadding="0" cellspacing="1px">
            <thead>
              <tr>
                <td>Tag</td>
                <td>Start</td>
                <td>Zeit</td>
                <td>Preis</td>
                <td>anmelden?</td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Dienstag</td>
                <td>12.10.2010</td>
                <td>19.00 - 20.15 h</td>
                <td>99,- &euro; / Person</td>
                <td class="centerText">Anmelden!</td>
              </tr>
              <tr>
                <td>Montag</td>
                <td>11.10.2010</td>
                <td>21.00 - 22.15 h</td>
                <td>99,- &euro; / Person</td>
                <td class="centerText">Anmelden!</td>
              </tr>
              <tr>
                <td>Sonntag</td>
                <td>17.10.2010</td>
                <td>16.00 - 17.15 h</td>
                <td>99,- &euro; / Person</td>
                <td class="centerText">Anmelden!</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div>
        <h3><a href="#">Videoclip / Streetdance ab 18 Jahre</a></h3>
        <div>
          <table class="kursliste" cellpadding="0" cellspacing="1px">
            <thead>
              <tr>
                <td>Tag</td>
                <td>Start</td>
                <td>Zeit</td>
                <td>Preis</td>
                <td>anmelden?</td>
              </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <div id="tabs-11">
    <div id="accordion-11">
      <div>
        <h3><a href="#">Lady's Club</a></h3>
        <div>
          <table class="kursliste" cellpadding="0" cellspacing="1px">
            <thead>
              <tr>
                <td>Tag</td>
                <td>Start</td>
                <td>Zeit</td>
                <td>Preis</td>
                <td>anmelden?</td>
              </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <div id="tabs-12">
    <div id="accordion-12">
      <div>
        <h3><a href="#">Club Agilando</a></h3>
        <div>
          <table class="kursliste" cellpadding="0" cellspacing="1px">
            <thead>
              <tr>
                <td>Tag</td>
                <td>Start</td>
                <td>Zeit</td>
                <td>Preis</td>
                <td>anmelden?</td>
              </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <div id="tabs-13">
    <div id="accordion-13"> </div>
  </div>
  <div id="tabs-14">
    <div id="accordion-14">
      <div>
        <h3><a href="#">Disco-Fox</a></h3>
        <div>
          <table class="kursliste" cellpadding="0" cellspacing="1px">
            <thead>
              <tr>
                <td>Tag</td>
                <td>Start</td>
                <td>Zeit</td>
                <td>Preis</td>
                <td>anmelden?</td>
              </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
        </div>
      </div>
      <div>
        <h3><a href="#">Salsa</a></h3>
        <div>
          <table class="kursliste" cellpadding="0" cellspacing="1px">
            <thead>
              <tr>
                <td>Tag</td>
                <td>Start</td>
                <td>Zeit</td>
                <td>Preis</td>
                <td>anmelden?</td>
              </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Sven Mintel · 03.08.10 12:51

Moin Marcel,

mein Gefühl sagt mir zwar, dass es dafür eine andere, evtl. bessere Lösung gibt, aber ich hab sie nicht gefunden

Daher diese, Anstelle deines $('#tabs').tabs() :

Code :

// Tabs
                $('#tabs').tabs({cache:false}).bind( "tabsselect", function(event, ui) {
                 $('#tabs .ui-accordion:eq('+ui.index+') .ui-accordion-content:eq(0)').css('height','auto');
                });

Es setzt beim Wechseln des Tabs die Höhe des 1. Content-Containers auf auto(bei mir steht sie da sonst immer auf 44px, warum auch immer

)
...das wars schon.

blacksh33p · 03.08.10 13:35

hm,

Vielen Dank, aber leider ändert ich irgendwie nichts.
Hab dir den direktlink mal per pm geschickt.
Vielleicht siehst so meinen Fehler besser.
Verzweifel langsam -.-

gruß Marcel

Sven Mintel · 03.08.10 13:57

Ich hab das mal mit der Source probiert, wo du mir den Link geschickt hast, und dort folgendes:

Code :

// Tabs
                $('#tabs').tabs({cache:false}); //.bind( "tabsselect", function(event, ui) {
                //$('#accordion-9').accordion( "resize" );
                //});

hierdurch ersetzt:

Code :

// Tabs
$('#tabs').tabs({cache:false}).bind( "tabsselect", function(event, ui) {
$('#tabs .ui-accordion:eq('+ui.index+') .ui-accordion-content:eq(0)').css('height','auto');
});

..und das klappt. (habs jetzt nur mal auf die Schnelle in FF,IE6 nd Opera getestet, falls du andere Browser nutzt, welche?)

Evtl. liegt es am Browsercache, prüfe mal, ob du wirklich das geänderte Dokument zu Gesicht bekommst.

blacksh33p · 03.08.10 14:08

Ja super geil nun gehts.
War wohl ein Copy & Paste Fehler drin.

Vielen Dank!!

grüße Marcel

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

jQueryUI: Droppable

Alles aus 3 Tabellen nach gleicher Spalte sortieren

Mehrere Tabellen, verschiedene Spalten, alles raus

MFC TABS umstellen auf windows Tabs

tabs in Eingabefeldern auch als tabs anzeigen

Stichworte

E-Mail:

Abonnieren Abbestellen