addScript ~ ajoute un fichier ou du code JS

Cette action permet d'ajouter un fichier JS dans le head ou du code JS ou JQuery dans le head ou à la position du shortcode.

➠ addscript : ajoute du JS ou JQuery

Cliquer pour lire la documentation

- un fichier JS dans le head
- du code JS ou JQuery dans le head ou à la position shortcode (body)
syntaxe {up addScript=body | jquery }code ou fichier{/up addScript}
author LOMART version 1.0 license GNU/GPLv3
  • addscript=head: ou body = au niveau du shortcode
  • jquery=0: 1: entoure avec appel jquery (sauf fichier)

    Pour tout les exemples de cette page, il faut afficher le source de la page avec Ctrl+U ou utiliser l'inspecteur de code pour voir le résultat.

    Ajouter un fichier JS dans le head

    Le fichier doit avoir une extension .JS. Le chemin complet peut être indiqué, sinon le fichier est cherché sur le serveur.

    {up addScript}plugins/content/up/actions/sameheight/sameheight.js{/up addScript}
    {up addScript}https://unpkg.com/leaflet@1.3.1/dist/leaflet.js{/up addScript}

    Le code ci-dessus doit afficher ces lignes dans le head de cette page. Vous pouvez le vérifier avec un inspecteur de code

    Ajouter du code JavaScript

    dans le head

    Voici le code ajouté dans l'article pour faire fonctionner ce bouton

    {up addscript}function myAlertJSHead(){alert('Coucou. Ici le test d\'insertion JS dans le head')};{/up addscript}
    <button onclick='myAlertJSHead()'>Cliquer pour tester l'insertion de code JS dans le head</button>

    A la position du shortcode

    Voici le code ajouté dans l'article pour faire fonctionner ce bouton

    {up addscript=body}function myAlertJSBody(){alert('Coucou. Ici le test d\'insertion JS à la position du shortcode')};{/up addscript}
    <button onclick='myAlertJSBody()'>Cliquer pour tester l'insertion de code JS dans le body à la position du shortcode</button>
    

    Par défaut, le code est inséré dans le head. Pour le mettre à la position du curseur, il suffit de mettre 'body' comme argument principal

    Ajouter du code jQuery

    L'ajout du paramètre 'jquery' permet d'encapsuler le code avec l'appel à jQuery recommandé pour Joomla.

    jQuery(document).ready(function($) {
      // --- le code ---
    });
    

    dans le head

    Le bloc bordé de rouge est affiché par les shortcodes ci-dessous. Cela a peu de sens, mais il fallait bien faire une démo ;)

    {up addscript | jquery}
      $('#messageJQuery').html('Hello world. Ce texte est affiché par jQuery.');
    {/up addscript}
    {up html=div | id=messageJQuery | style=border:2px red solid;text-align:center}
    

    A la position du shortcode

    Pour obtenir cet effet, on utilise le shortcode ci-dessous :

    {up addscript=body | jquery}
    $("#btn").click(function() {
       $("body").toggleClass("bg-bleuPale");
    });
    {/up addscript}

    ATTENTION - RISQUE DE PAGE BLANCHE !

    Comme pour toutes les actions qui vous permettent d'insérer du code dans vos articles, vous en êtes responsable.
    En cas de souci, supprimer votre code et procéder étape par étape pour le remettre.
    Dans un premier temps, contrôler l'appairage des parenthèses et la présence des points-virgules.