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.

Pour tous 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

Cliquer pour tester l'insertion de code JS 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>

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

A la position du shortcode

Cliquer pour tester l'insertion de code JS dans le body à 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}
{up html=button | onclick=myAlertJSBody() | class=btn btn-primary}Cliquer pour tester l'insertion de code JS dans le body à la position du shortcode{/up html}

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

Permuter la couleur d'arrière-plan de la page de blanc à bleu pâle

Pour obtenir cet effet, on utilise les shortcodes ci-dessous.
L'utilisation de l'action HTML n'est pas indispensable car le bouton ne définit pas d'attribut à risque. Toutefois, elle permet de voir l'id du bouton.

{up addscript=body | jquery}
  $("#btn").click(function() {
    $("body").toggleClass("bg-bleuPale");
  }); 
{/up addscript}
{up html=button | id=btn | class=btn btn-primary}
  Permuter la couleur d'arrière-plan de la page de blanc à bleu pâle
{/up html}

Version 2.2

Nettoyage du code pour palier à la fâcheuse habitude des éditeurs wysiwyg d'ajouter des sauts de ligne en HTML et de convertir des caractères en entités HTML 

&amp, < $gt; &quote;