8.1 JavaScript und CSS
Unten rechts im Speicherbereich können Sie den kleinen orangefarbenen Pfeil anklicken und damit den unteren Bereich – Mittel – öffnen. Sie haben hier die Möglichkeit der zusätzlichen CSS- und HTML-Gestaltung für das Feld und können auch JavaScript eingeben.
In CSS-Klassen können Sie einen eigenen Klassennamen eintragen und über diesen dann das Feld nach Gusto formatieren. Oder Sie tragen einen der vorgegebenen CSSKlassennamen ein, die Sie in Anhang A finden.
Unter Eigene Attribute haben Sie die Möglichkeit, HTML-Elementattribute einzutragen, also beispielsweise:
001 |
width="100" |
Mit dem style-Attribut können Sie auch direkt CSS-Angaben an das Feld übergeben. Beispielsweise:
001 |
style="color:red;font-size:18pt;" |
Da das Attribut id bereits von SEBLOD vorbelegt ist, können Sie an dieser Stelle keine neue id vergeben. Der Eintrag id="meineID" wird also ignoriert.
Ebenso können Sie JavaScript eingeben. So können Sie eine Ausgabe eintragen, die bei Aufruf des Formulars angezeigt wird. Beispielsweise öffnet die JavaScript-Befehlszeile
001 |
alert ("Ein wichtiger Hinweis"); |
einen entsprechenden Hinweistext, der mit OK bestätigt werden muss. Sie können natürlich auch umfangreicheren JavaScript-Code eingeben.
Sie haben auch die Möglichkeit, mit JavaScript den Standardwert zu beeinflussen bzw. zu überschreiben. Mit folgendem JavaScript-Code können Sie in einem Feld mit dem Alias "dummyfeld", aus dem SEBLOD die ID erstellt, den Standardwert überschreiben:
001 |
var text = document.getElementById("dummyfeld"); |
002 |
text.value = "Hallo SEBLOD-Welt!"; |
Auf diese Weise haben Sie auch die Möglichkeit, beispielsweise URLs zusammenzusetzen, die sich aus der Eingabe ergeben. Im folgenden Beispiel werden zwei Felder im Adminformular, wahlweise im Frontend-Formular, angelegt:
- Ein Textfeld (beitragsid) mit der standardmäßigen Speicherung der Artikel-ID.
Dieses Feld kann auch gut als Nur lesen oder Versteckt (hidden) angelegt werden.
- Ein zweites Textfeld (linkfeld) für den JavaScript-Code, der eine URL zusammensetzt, die sich aus der Artikel-ID ergibt.
Die Speicherung kann gut auf Benutzerdefiniert introtext eingestellt werden, oder statt introtext gibt es den link. Wollen Sie in letztere Spalte abspeichern, können Sie auch als Standard speichern.
Wichtig sind die Aliase. Heißen sie anders bei Ihnen, müssen Sie die ID-Namen im Code entsprechend anpassen:
001 |
var link = document.getElementById("linkfeld"); |
002 |
var beitrag = document.getElementById("beitragsid"); |
003 |
link.value = "index.php?option=com_content&view=article&id=" + beitrag.value; |
In var link sprechen Sie die ID an und weisen sie etwas weiter unten mit beitrag. value dem Link zu. In link.value setzen Sie den Link entsprechend zusammen. Einziger Nachteil dieser Methode ist, dass Sie den Beitrag erst einmal speichern müssen, da sonst keine ID vorhanden ist. Wenn Sie so etwas einsetzen wollen, ist ein entsprechender Hinweistext, beispielsweise mit einem Freitextfeld, sinnvoll.