Aufklappbares Infofenster?

[nordi]

Hallo Leute,

ich habe eine Idee aber weiß nicht wirklich, wie ich die verwirklichen soll. Ich habe eine Liste, die durch eine Mysqldatenbank generiert wird. In der Datenbank sind verschiedene Informationen abgespeichert (circa 10). Die wär zu viel, um dies in der Liste wiederzugeben. Deswegen wird in der Liste nur Name und Titel der Dokumente angezeigt. Ich würde gern nun, wenn man auf den Namen/Titel klickt, dass ein kleines Feld aufklappt, wo die restlichen Informationen angezeigt werden mit dem Downloadlink des Dokumentes. Ich weiß noch nicht mal, ob das hier das richtige Forum ist Also quasi bei "onclick" -> Menü runterklappen.

Gibt es dafür vllt. Tutorials oder Beispielseiten?

 

[Sven Mintel]

Moin nordi,

du schreibst, die Liste ist zu lang...wieviel Daten enthält sie denn so(in Bytes)?

Weshalb ich frage: vom Umfang der Daten ist es anhängig, ob man die Daten gleich lädt und erstmal verbirgt, oder ob man die Daten erst bei Bedarf nachlädt.

 

[nordi]

Hey, also in der Datenbank sind Sachen abgespeichert wie "Name, Vorname, Titel, Seminarthema etc".. also nur Text - sollte nicht viel sein. Also das hier ist jetzt der PHP-Teil, wo der Link ausgegeben wird, auf den mal nachher mal klicken soll, wo dann das "Aufklappmenü" runterfahren soll.

echo "<p>";
while ($row = mysql_fetch_object($result)) { 
echo "<span class=\"semester\">".$row->semester."</span> – <a href=\"".$PHP_SELF."?id=".$row->id."\"><strong>".$row->refnachname.", ".$row->refvorname.":</strong> ".$row->titel."</a><br />"; 
}
echo "</p>";

Ich weiß jetzt nicht, ob ihr/du etwas mit anfangen könnt.

 

[Sven Mintel]

Und das, was dann ausklappen soll, ist nur das Seminarthema?


Falls ja...da würde ich schon eingangs alles Laden, das Thema direkt nach dem Link in einem versteckten Container ausgeben...und beim Klick auf den Link diesen Container anzeigen.

 

[nordi]

Ja, da kommen vielleicht noch ein, zwei Sachen dazu! Ich weiß aber nicht genau, wie man das macht mit den Containern.. hast du evtl einen Link für mich? Vielen Dank schonmal für deine Hilfe!

 

[Sven Mintel]

Das ist eigentlich halbsowild...man muss per JS nur die style-Eigenschaft diplay ändern.

Hier mal ein Beispiel:

<script type="text/javascript">
function toggle(o)
{
  o.parentNode.lastChild.style.display=
    (o.parentNode.lastChild.style.display=='none')
      ?'block'
      :'none';
   return false;
}
</script>
<div>
  <a onclick="return toggle(this)" href="#">#1:Hier Name, Vorname, Titel</a>
  <div style="display:none">
    #1:hier der Rest
  </div></div>
<div>
  <a onclick="return toggle(this)" href="#">#2:Hier Name, Vorname, Titel</a>
  <div style="display:none">
    #2:hier der Rest
  </div></div>
<div>
  <a onclick="return toggle(this)" href="#">#3:Hier Name, Vorname, Titel</a>
  <div style="display:none">
    #3:hier der Rest
  </div></div>

</body>

Das innere <div> ist per display:none erstmal versteckt.
Beim Klick auf den Link wird eine Funktion aufgerufen(mit einem Zeiger auf den geklickten Link als Argument)

Die Funktion geht erst zum Elternknoten des Links(parentNode)....dann zu dessen letztem Kindknoten(lastChild) und ändert dessen display...das wars.

(Beachte, dass zwischen den beiden schliessenden </div>-Tags kein Leerzeichen/Zeilenunmbruch etc. steht...würde dort etwas stehen, wäre dies der letzte Kindknoten, und nicht das innere <div>)

 

[nordi]

Ah super, hab es in den PHP-Code eingebaut und klappt super! Gibt es auch eine Möglichkeit, dass sich das Infofenster wieder schließt, wenn mein anderes aus der Liste öffnet?

Kann man dieses <div> auch evtl. animieren, dass es langsam runterfährt oder so? Ich weiß.. aber träumen darf man doch

 

[Sven Mintel]

Was das ausblenden des anderen angeht, füge folgendes am Anfang der Funktion ein:

  if(window.currentInfo && window.currentInfo!=o)
  {
    window.currentInfo.parentNode.lastChild.style.display='none';
  }
  window.currentInfo=o;

Betreffs der Animation würde ich eine fertige Lösung empfehlen, wie bspw:
http://docs.jquery.com/Effects/slideToggle#demo

 

[nordi]

Dank dir!! Ich probier das gleich alles mal aus! Kann man evtl. den Link im Tutorial nicht als Button machen sondern als normalen Textlink?

 

[Sven Mintel]

Kann man evtl. den Link im Tutorial nicht als Button machen sondern als normalen Textlink?

Klar, das kann man mit jedem Element machen

Würde bspw. so gehen:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function toggle(o)
{
  if(window.currentInfo && window.currentInfo!=o)
  {
    $(window.currentInfo).next().stop().slideToggle('slow');
  }
  $(o).next().stop().slideToggle('slow');
  window.currentInfo=o;
  return false;
}
</script>