Also das mit der Liste… Ach, ich hoffe einfach mal, dass kein Mod das Thema jetzt zufällig löscht, wo ich posten will. ^^ Also:
Jedes Objekt (als Objekt verstehe ich jetzt solche Dinge wie <div>, <a>, <p>, <span>, <table> usw.) kann man mit einem Namen versehen. Entweder man vergibt einem Objekt eine Klasse – das hat den Vorteil, dass man andere Objekte ebenfalls derselben Klasse zuteilen kann, wodurch man mehrere Objekte unter Kontrolle hat – oder man vergibt dem Objekt eine ID. Diese ID darf nur ein einziges Mal im Dokument vorkommen (auch Cynamite verwendet IDs, also sollte man aufpassen, dass man nicht versehentlich eine ID erwischt, die Cyn schon vergeben hat).
Wir nehmen nun letzteres für unsere Ausklapp-Liste. Wir vergeben nun IDs. Wenn wir einem Objekt eine ID vergeben, bedeutet das, wir können dieses Objekt DIREKT mit Javascript erfassen. Also vergeben wir für alle Objekte, die mit Javascript zu tun haben sollen unterschiedliche IDs. Eine ID wird so eingefügt: <div id="id-name">
Es gilt zu beachten: Das erste Zeichen muss immer ein Buchstabe sein. Es ist nur "A-Z", "a-z", "0-9" und "-", wie "_" erlaubt. Keine Leerzeichen!!!! Außerdem unterscheidet Javascript zwischen Groß- und Kleinbuchstaben!!
Nun greifen wir das Schema auf. Wir wollen eine Liste, die erscheint, sobald wir auf einen Knopf drücken. Das reicht vorerst mal. Also brauchen wir den Knopf und die Liste. Die Liste soll man zunächst nicht sehen, da sie erst erscheint, wenn man auf den Knopf drückt. Also greifen wir auf die CSS-Eigenschaft display zurück. Wir vergeben für die Liste display:none. Das sieht so aus:
<ul style="display:none;"><li><Blabla</li></ul>
Darüber kommt der Knopf, jetzt mal als DIV dargestellt (ums schnell zu machen^^)
<div>Liste einblenden</div>
Nun vergeben wir der Liste eine ID, damit wir sie per JS erfassen können. Ich würde sie jetzt spontan "liste" nennen:
<ul id="liste" style="display:none;"><li><Blabla</li></ul>
Nun geht es ins Eingemachte. Um ein sogenanntes Event zu starten, das ist das was wir nun wollen, brauchen wir einen Auslöser (Eventhandler). Das ist in diesem Fall der Klick auf das DIV wo drinsteht "Liste einblenden"
In JS heißt das "onmousedown" oder "onclick". Ich nehm mal ersteres.
Nachdem der User darufgeklickt hat, soll das JS starten. Nun müssen wir angeben, was genau passieren soll. Dazu müssen wir dem Eventhandler erstmal sagen, WAS geändert werden soll, WELCHES Objekt.
Das geschieht per "getElementById". Wenn man genauer hinschaut, heißt das "get Element By ID", also erfasse Element/Objekt per ID. Wie war doch die ID der Liste? Achja! "liste"
So sieht das aus: getElementById('liste')
Der Eventhandler hat das Objekt nun erfasst. Wir wollen die CSS-Eigenschaft ändern, damit Display nicht mehr auf "none" (nicht sichtbar), sondern auf "block" steht (also sichtbar). Dazu müssen wir erstmal sagen, dass wir einen Style ändern müssen, also geben wir an:
getElementById('liste').style
Nun wollen wir display verändern:
getElementById('liste').style.display
Das geschieht so:
getElementById('liste').style.display='block'
block steht da. Das ist das Wort, dass das ersetzt, was bisher dort stand.
Also nochmal: Der User drückt auf den knopf, der Eventhandler erfasst die ID, kommt zu dem Objekt und geht in seinen Style hinein, erfasst "display" und ändert den Wert der dort steht in den, den du angibst, also 'block'
Der gesamte Strutz kommt in das DIV, das als Knopf fungiert:
<div onmousedown="getElementById('liste').style.display='block';">Liste einblenden</div>
Bitte beachten: Es müssen alle Zeichen EXAKT so da stehen.
Am ende sieht es also so aus:
<div onmousedown="getElementById('liste').style.display='block';">Liste einblenden</div>
<ul id="liste" style="display:none;"><li><Blabla</li></ul>
Wie geht es weiter? Einen neuen button machen, der das display wieder auf none macht. z.B.^^
ihr wisst ja was ich meine.
