|
||||||||||||||||||||||||||||||||||||||||||
Tutorial Formular-Aktion im MLR (Multi Layout Region) von NOF auf andere Layout-Regionen verlinken
Hier möchte ich die Möglichkeit aufzeigen, wie man mittels Formular-Aktion auf einen anderen Layout-Bereich einer Multi-Layout-Region (MLR) von NOF verlinken kann.
Die einzelnen Layout-Regionen vom MLR sind von NOF angelegte Bereiche, die mittels “Anker” aufgerufen werden. Man kann also z.B. eine bestimmte Layout-Region mittels Link aufrufen. Hier als Beispiel zu meiner “Seite 2” die URL:
http://www.tommyherrmanndesign.com/nof/MLR-Anker/#Bereich2LYR
... bei diesem Link ist dann also #Bereich2LYR meine Bezeichnung und ID für den Layout-Bereich und den Anker meiner “Seite 2”
Man kann allerdings nicht auf der gleichen Seite, also innerhalb einer Layout-Region solche Anker setzen, da die Seite zunächst neu aufgerufen werden muss. Um dies zu erreichen habe ich in meinem Beispiel Formular-Buttons, bzw. Links eingesetzt, die mittels “action” (Formular-Aktion) den entsprechenden Bereich ansteuern.
Unten ein Screenshot meiner Multi-Layout-Region.
Ich habe mir hier für jeden Senden-Button einen eigenen Layout-Bereich aufgezogen, den ich mittels Häkchen als Formular deklariert habe. Dann habe ich den Senden-Button aufgezogen und im Fenster “Schaltfläche-Eigenschaften” unter Methode “Verschicken” gewählt und bei “Aktion” den anzusteuernden Layout-Bereich als internen Link eingetragen an den die Aktion geschickt werden soll - also hier:
./index.html#Bereich2LYR
Man kann das ebenso mit einem Text-Link tun, so wie bei dem Link zu meiner “Seite 4” des MLR.
Dazu habe ich meinen zu verlinkenden Text in ein Textfeld geschrieben. Jedes so verwendete Textfeld muss seine eigene ID haben, auf die ich mich später beziehen werde. Um diese ID einzutragen, stellt Ihr die Arbeitsfläche auf “Fortgeschritten”
> Menü oben > Ansicht > Arbeitsfläche > “Fortgeschritten”
... jetzt könnt Ihr im Fenster “Text-Eigenschaften” auch das <p> Tag bearbeiten und dort die ID eintragen. Ich habe diese ID hier “gotoLayout4” genannt.
Nun markiert Ihr den für den Link zu verwendenden Text (hier “zur Seite 4”) und wählt im Link-Fenster als Typ “Smart Link” und dort dann “Leer” um eine Javascript-Anweisung eintragen zu können.
Klickt in dem Link-Fenster anschließend unten links auf den Button “HTML” und tragt dort “im Tag” (ab NOF 11 “innen”) den “onclick” Befehl ein, indem Ihr die ID des Textfeldes erkennen könnt. Also in meinem Beispiel dann:
onclick="document.gotoLayout4.submit()"
Damit der “submit()” (zustellen) Befehl funktioniert, muss nun das gesamte Textfeld noch als Formular mit der dazugehörigen ID "gotoLayout4" und der entsprechenden “action” deklariert werden.
Dazu tragt Ihr (für mein Beispiel) “vor dem Tag” (ab NOF 11 “vorher”) in die Objekt-HTML (Button “HTML” im Fenster “Text-Eigenschaften”) ein:
<form name="gotoLayout4" action="./index.html#Bereich4LYR" method="post">
... und schließt das Formular-Tag “nach dem Tag” (ab NOF 11 “nachher”) mit:
</form>
Jedes weitere, so angelegte Textfeld, muss eine andere ID bekommen und das Skript muss dann entsprechend auf die andere ID natürlich auch angepasst werden.
