• [SCRIPT] Afficher des fenêtres de même style que celles d'Eklablog

    Pour utiliser Javascript, il faut au préalable demander aux responsables de l'activer sur vos blog, en passant par le formulaire de contact.

    Attention : nous allons utiliser le système de fenêtres d'Eklablog : les codes ne fonctionnent donc que sur Eklablog, et seront éventuellement à adapter si Eklablog effectue des modifications.

    Aujourd'hui on va afficher des fenêtres personnalisés.

    Nous avons vu dans un article précédent (Mon premier code Javascript - afficher un message) qu'il était possible d'utiliser la fonction alert pour afficher un message simple.

    Nous allons créer une fonction plus complète pour :

    • afficher un titre dans la barre bleue en haut de la fenêtre ;
    • pouvoir écrire du HTML dans le contenu (image, mis en forme...) ;
    • modifier la taille de la fenêtre.

    Cliquez sur le bouton ci-dessous pour afficher la fenêtre que l'on obtiendra :

    Vous devriez voir ceci à l'écran :

    On note la présence du titre et le contenu avec une image et du texte en gras.

    Un bouton OK a été ajouté pour reproduire le comportement de la fenêtre simple affiché avec la fonction alert.

    Ces fenêtres sont intéressantes car elle sont repositionnables et restent affichées lorsqu'on fait défiler la page.

    Ce sont en fait les mêmes fenêtres qui sont utilisées par exemple pour les écrans d'édition d'articles, la plupart des fenêtres de configuration...

    Voici le code minimal pour créer une fenêtre :

    Code Javascript Fenêtre  Tout sélectionner

      Addons.load("Windows", function(){
    b=Windows.add(); // Nouvelle fenêtre
    b.setTitle("Test de fenêtre"); // Titre
    b.setContent("Bonjour à <strong>tous</strong> !"); // Contenu
    b.generate(); // Génère la fenêtre
    });
    Exécuter ce code

    Pour pouvoir facilement créer une fenêtre, on peut créer une fonction réutilisable :

    Function Javascript réutilisable  Tout sélectionner

    function EklaWindowDisplay(html,title,width,height)
    {
    var b=null;
    Addons.load("Windows", function(){
    b=Windows.add(); // Nouvelle fenêtre
    b.setTitle((title==undefined) ? "" : title); // Titre
    html=html.replace(new RegExp("\\[winid\\]",'ig'),b.id); // Remplace [windid] par l'id de fenêtre
    b.setContent(html); // Contenu
    if (width!=undefined) {b.setWidth(width);} // Largeur
    b.generate(); // Génère la fenêtre
    if (height!=undefined) { // Si largeur définie
    b.setHeight(height) // Modifie la largeur
    b.center(); // Centre la fenêtre
    }
    });
    return b; // Renvoit la fenêtre
    }

    Je vous invite à ranger cette fonction dans un module comme expliqué ici : Ranger ses fonctions Javascript dans un module masqué.

     Il suffit ensuite d'appeler cette fonction en passant en paramètre :

    • le code HTML du contenu ;
    • le titre ;
    • la largeur en pixels ;
    • la hauteur en pixels.

    Les paramètres sont optionnels.
    La hauteur s'adapte automatiquement au contenu.

    Voici un exemple d'utilisation :

    Code affichage d'une fenêtre  Tout sélectionner

    var html="<p style=\"text-align: center;\">" +
    "<img style=\"display: block; margin-left: auto; margin-right: auto;\" src=\"http://ekladata.com/gerer-mon-blog.eklablog.fr/perso/images/divers/avatar.jpg\" alt=\"\" width=\"48\" height=\"42\" />" +
    "&nbsp;Bonjour, ceci est une fen&ecirc;tre personnalis&eacute;e <strong>avec une image</strong> centrée.&nbsp;</p>";
    myWin=EklaWindowDisplay(html, "Test de fenêtre",200);
    Exécuter ce code

    Notez que le HTML est une chaîne de caractères entre guillemets (").
    Pour y écrire des guillemets, il faut remplacer " par \"
    On évite également les retours à la ligne (utilisez <br /> pour un retour à la ligne en HTML).

    Pour faciliter la lecture, vous pouvez écrire une chaîne de caractères sur plusieurs lignes en concaténant plusieurs chaînes (chacune délimitée par des guillemets) avec le signe +.

    Il manque un bouton OK, même si on peut fermer la fenêtre avec la croix en haut à droite.

    Pour ajouter un bouton, il faut l'intégrer dans le code HTML.
    Ce bouton aura pour action de supprimer la fenêtre avec la fonction del.
    Voici comment l'ajouter :

    Code avec bouton OK  Tout sélectionner

    var html="<p style=\"text-align: center;\">" +
    "<img style=\"display: block; margin-left: auto; margin-right: auto;\" src=\"http://ekladata.com/gerer-mon-blog.eklablog.fr/perso/images/divers/avatar.jpg\" alt=\"\" width=\"48\" height=\"42\" />" +
    "&nbsp;Bonjour, ceci est une fen&ecirc;tre personnalis&eacute;e <strong>avec une image</strong> centrée.&nbsp;</p>";
    html=html+"<div style=\"text-align:center\">" +
    "<input type=\"button\" value=\"OK\" onclick=\"Windows.del([winid]);\" style=\"width:100px;\"/>" +
    "</div>";
    myWin=EklaWindowDisplay(html, "Test de fenêtre",200);
    Exécuter ce code

    J'ai ajouté une ligne avec un input de type « button ».

    Dans l'événement onclick de ce bouton on exécute : Windows.del([winid]);

    Dans la fonction EklaWindowDisplay, on peut voir un remplacement de [winid] par l'identifiant de la fenêtre en cours de génération.

    En effet, avant l'appel à la fonction, on ne connaît pas l'identifiant de la fenêtre.
    Il suffit de mettre [winid] dans le html et il sera remplacé par l'identifiant réél.

    Voilà pour une première fenêtre.

    D'autres articles viendront certainement pour détailler d'autres possibilités.

    « [SCRIPT] Ranger ses fonctions Javascript dans un module masqué[CSS] Ajouter du texte au module Newsletter et agrandir les éléments »

  • Commentaires

    1
    Dimanche 13 Avril 2014 à 21:04

    Je vais tenter de faire ça demain, en tout cas merci pour le tutoriel, c'est exactement ce que je cherchais  =)

    2
    Lundi 14 Avril 2014 à 11:03

    Bonjour, après un premier essai, il semble que je fasse une erreur de manipulation ou je ne sais trop quoi parce que rien ne s'affiche en nouvelle fenêtre.

    J'ai compris et procédé comme suit votre tutoriel:

    1. J'ai placé le code Javascript de la fonction réutilisable dans un module caché (en ajoutant les balises <script>)

    2. J'ai essayé de coller votre exemple dans ce même module pour voir si une fenêtre s'ouvrait et c'est là que je dois faire une erreur à mon avis parce que rien ne se passe... Enfin si, le texte de l'exemple est écrit tel quel dans le module mais comme si c'était un simple texte. Faut-il le placer autre part? Ajouter quelque chose? La fenêtre doit bien se déclencher automatiquement à l'ouverture du blog?

     

    3
    Lundi 14 Avril 2014 à 11:20

    Bonjour,

    Tout doit être écrit dans l'éditeur de Code source entre balises <script>.

    Si le message doit s'afficher à l'ouverture du blog, attention à placer le code dans onJSFilesLoaded (cf. Mon premier code Javascript - afficher un message).

    4
    Lundi 14 Avril 2014 à 11:30

    Ah voilà, je vois apparaître la fenêtre : ) Quand vous parlez de OnJSFilesLOaded. Est-ce que je dois prendre cette partie du code * et la placer au-dessus du code la fonction réutilisable? Ou dois-je supprimer quelque chose de la fonction réutilisable avant de l'intégrer? Merci pour votre aide en tout cas :)

    * if(typeof(onJSFilesLoaded) != "object")
    	   onJSFilesLoaded = [];
    	onJSFilesLoaded.push(function()

    5
    Lundi 14 Avril 2014 à 11:43

    Pour un affichage d'une fenêtre à l'ouverture ça devrait être comme ça :

     <script>// <![CDATA[
    // Début du code Javascript 
    	if(typeof(onJSFilesLoaded) != "object")
    	   onJSFilesLoaded = [];
    	onJSFilesLoaded.push(function(){
    	  // Début du code au chargement
    	  var html="<p style=\"text-align: center;\">" +
    	    "<img style=\"display: block; margin-left: auto; margin-right: auto;\" src=\"http://ekladata.com/gerer-mon-blog.eklablog.fr/perso/images/divers/avatar.jpg\" alt=\"\" width=\"48\" height=\"42\" />" +
    	    "&nbsp;Bonjour, ceci est une fen&ecirc;tre personnalis&eacute;e <strong>avec une image</strong> centrée.&nbsp;</p>";
    	  myWin=EklaWindowDisplay(html, "Test de fenêtre",200);	  
    	  // Fin du code au chargement
    	});
    	// Début autres fonctions
    	// Si vous avez d'autres fonctions...
    	// Fin autres fonctions
    // Fin du code Javascript
    // ]]></script>

    Par rapport à l'article avec alert, je remplace alert par un appel à EklaWindowDisplay.

    La fonction réutilisable EklaWindowDisplay peut être écrite par exemple à la place de // Si vous avez d'autres fonctions...

    Ce n'est pas cette fonction réutilisable qui doit être placée dans le onJSFilesLoaded, cette fonction ne fait rien tant qu'on ne l'appelle pas. Par contre lorsqu'on appelle EklaWindowDisplay, il faut que le javascript d'Eklablog soit chargé, on attend donc avec onJSFilesLoaded que ce soit le cas.

    6
    Lundi 14 Avril 2014 à 12:00

    Voilà, ça fonctionne nickel! Merci beaucoup, il ne me reste plus qu'à le personnaliser :D Bonne journée!

    7
    Lundi 14 Avril 2014 à 14:34

    Dernière petite question (et puis j’arrête ;)), j'ai beau essayer de mettre <a href="monlien">texte</a> dans l'emplacement du contenu, rien ne se passe. Y a-t-il quelque chose de particulier à faire lorsqu'on intègre un lien dans la fenêtre?  

    8
    Lundi 14 Avril 2014 à 14:49

    Trouvé il me manquait un "\" :) Encore un tout grand merci pour ce tutoriel.

    • Nom / Pseudo :

      E-mail (facultatif) :

      Site Web (facultatif) :

      Commentaire :


    9
    Jeudi 12 Mars 2015 à 20:35

    pas compris snif .....

     

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :