Modul nutzen

JavaScript ├╝ber ein eigenes Modul laden

Mit einem eigenen Modul k├Ânnen Sie JavaScript einem Formular hinzuf├╝gen.

Das Modul wird dabei so konfiguriert, dass

  • es unsichtbar bleibt,
  • den Aufbau der Seite nicht st├Ârt,
  • es nur zusammen mit dem Formular geladen wird.

Site-Modul vom Typ ‘Eigenes Modul’ erzeugen

Sie ben├Âtigen ein HTML Skript-Element mit den gew├╝nschten JavaScript-Zeilen, dort wo Sie Visforms im Frontend anzeigen (Formular, Daten, Daten editieren). Sie k├Ânnen das HTML Skript-Element zusammen mit Visforms laden, indem Sie ein Site-Modul vom Typ ‘Eigenes Modul’ verwenden.

Erstellen Sie hierzu ein Joomla Site-Modul vom Typ ‘Eigenes Modul’.

JavaScript-Code einf├╝gen

F├╝gen Sie ein HTML Skript-Element mit Ihrem JavaScript-Code als Inhalt des Moduls hinzu.
Ein Beispiel:

<script>
    jQuery(document).ready(function() {
        // console.log('called');
        // weiterer JavaScript-Code folgt hier:
    });
</script>

Die auskommentierte Zeile kann helfen, in den Entwicklungstools des Webbrowsers zu sehen, ob das Skript geladen wird.

CSS-Regeln einf├╝gen

F├╝gen Sie ein HTML Style-Element mit Ihren CSS-Regeln als Inhalt des Moduls hinzu.
Ein Beispiel:

<style>
    /* The animation code */
    @keyframes example1 {
        from {background-color: red;}
        to {background-color: yellow;}
    }
    @keyframes example2 {
        from {opacity: 0;}
        to {opacity: 1;}
    }
    // slected conditional fields
    .conditional.field292 {
        animation-name: example1;
        animation-duration: 2s;
    }
    .conditional.field293 {
        animation-name: example2;
        animation-duration: 2s;
    }
    .conditional.field294 {
        animation-name: fadeIn;
        animation-duration: 2s;
    }
    // all other conditional fields
    .conditional {
        animation-name: fadeIn;
        animation-duration: 2s;
    }
    // set special field color
    #field294 {
        color: green;
    }
    // all custom text: text alignment
    .visCustomText {
        text-align: center;
    }
    // hide special field on the summary page
    .fieldset-summarypage tr:nth-child(4) {
        display: none;
    }
</style>

Hinweise zum Einf├╝gen des Codes

Hinweis: Oftmals ist es nicht selbstverst├Ąndlich und direkt m├Âglich, das script Tag in das Modul einzuf├╝gen. Das kann unterschiedliche Ursachen haben.

WYSIWYG Editoren k├Ânnen st├Âren

In Joomla ist standardm├Ą├čig der WYSIWYG Editor ‘TinyMCE’ vorausgew├Ąhlt.
WYSIWYG Editoren ver├Ąndern oft, insbesondere beim Einf├╝gen von Skript-Code, den exakten Inhalt oder entfernen den notwendigen script Tag komplett.

Stellen Sie f├╝r das Einf├╝gen und Editieren des JavaScript-Codes den WYSIWYG Editor zumindest vor├╝bergehend aus.

Editor komplett abstellen:

Das erreichen Sie ├╝ber folgende Einstellung.
Konfiguration » Reiter ‘Site’ » Gruppe ‘Website’ » Parameter ‘Standard Editor’ = ‘Editor Keiner’.

Editor f├╝r Ihren Benutzer abstellen:

Das erreichen Sie ├╝ber folgende Einstellung.
Benutzer » Verwalten » ausgew├Ąhlter Benutzer » Benutzerkontodetails » Parameter ‘Editor’ = ‘Editor Keiner’.

Editoren konfigurieren

WYSIWYG Editoren k├Ânnen umfangreich konfiguriert werden. Der Editor l├Âscht alle nicht erlaubten HTML-Tags aktiv heraus. Konfigurieren Sie alternativ den Editor so, dass Sie den script Tag verwenden k├Ânnen un dieser nicht gel├Âscht wird.

Unter den M├Âglichkeiten der Konfiguration, befinden sich auch Einstellungen zu HTML-Tags, die etwa

  • erlaubte Tags,
  • zus├Ątzlich erlaubte Tags,
  • verbotene Tags.

Editor ‘TinyMCE’ konfigurieren

Die Einstellungen beziehen sich immer auf eine der 3 m├Âglichen Voreinstellungen. W├Ąhlen Sie die Voreinstellungen f├╝r die Benutzer-Gruppe ‘Administrator’ aus, falls diese nicht schon ausgew├Ąhlt ist (Default). Voreinstellungen f├╝r die Benutzer-Gruppe 'Administrator'

In der folgenden Konfiguration:

  • sind die Joomla-Textfilter deaktiviert (siehe unten).
  • ist das applet Tag explizit verboten (Einstellung ‘Verbotene Elemente’).
  • ist laut Standardeinstellung ein Mix aus der vollen HTML5- und HTML4-Spezifikation erlaubt (Einstellung ‘Erlaubte Elemente’ ist leer)
    Zu diesem Mix geh├Ârt auch das script Tag und muss daher auch nicht weiter spezifiziert werden.
  • sind tcpdf und table Tags explizit erlaubt (Einstellung ‘Zus├Ątzlich erlaubte Elemente’).

Voreinstellungen f├╝r die Benutzer-Gruppe 'Administrator'

Joomla-Textfilter k├Ânnen st├Âren

Ebenso k├Ânnen die Einstellungen zu den Joomla-Textfiltern dazu f├╝hren, dass script Tags nicht gespeichert werden k├Ânnen.
In der Beispiel-Konfiguration zum Editor ‘TinyMCE’ sind die Joomla-Textfilter deaktiviert.

Die Einstellungen zu den Joomla-Textfilter befinden sich hier: System » Konfiguration » Reiter ‘Textfilter’.
Die Einstellungen sind spezifisch f├╝r jede Benutzer-Gruppe.

Das Site-Modul konfigurieren

Es sollen keine sichtbaren Elemente wie Titel, Rahmen oder andere Div-Elemente entstehen. Das Modul soll daher unsichtbar bleiben. Um dies zu erreichen sind die folgenden Einstellungen vorzunehmen.

Parameter ‘Titel’ = ‘Verbergen’.

Setzen Sie in der Modul-Konfiguration den Parameter ‘Titel’ = ‘Verbergen’.

Geeignete Modul-Position ausw├Ąhlen

W├Ąhlen Sie in der Modul-Konfiguration einen geeigneten Modulplatz aus. Die Modul-Position muss dort vorhanden sein, wo Ihr Formular erscheint. Diese Einstellung ist spezifisch f├╝r das von Ihnen verwendete Template vorzunehmen.

Bei dem Joomla Standard Template ‘Cassiopeia’ ist das etwa wie folgt der Fall.
Setzen Sie in der Modul-Konfiguration den Parameter ‘Position’ = ‘Banner’. Titel Verbergen

Parameter ‘Modulstil’ = ‘none’

Stellen Sie auf der Registerkarte ‘Erweitert’ sicher, dass nur das n├Âtigste HTML generiert wird. Setzen Sie hierzu den Parameter ‘Modulstil’ = ‘none’. Modulstil: none

Parameter ‘Modulzuordnung’ = ‘Nur auf den ausgew├Ąhlten Seiten’

Die Men├╝zuweisung f├╝r das Modul muss eingegrenzt und genau festgelegt werden, sodass es zusammen mit dem Formular erzeugt wird.
Setzen Sie den Parameter ‘Modulzuordnung’ = ‘Nur auf den ausgew├Ąhlten Seiten’.
W├Ąhlen Sie in der Modul-Konfiguration auf der Registerkarte ‘Men├╝zuweisung’ nur das eine Men├╝ aus, welches Sie zum Anzeigen des Formulars verwenden. Modulzuordnung: Nur auf den ausgew├Ąhlten Seiten