• [SCRIPT] Ranger ses fonctions Javascript dans un module masqué

    On peut trouver, sur divers blogs et sur le forum, de nombreuses fonctions écrites en javascript.

    Ces fonctions peuvent être réutilisées dans plusieurs articles.
    Inutile donc de les écrire en doublon dans chacun des articles, il vaut mieux les écrire dans un module dédié.

    Ainsi, si on corrige une fonction utilisée par plusieurs articles, la correction sera appliquée automatiquement à tous les articles qui appellent cette fonction.

    C'est beaucoup plus simple, et cela permet d'avoir toutes ses fonctions à un seul endroit pour les retrouver facilement.
    On peut aussi envisager de créer plusieurs modules pour regrouper des fonctions.

    Par exemple, j'ai une fonction pour lire le pseudo de l'utilisateur connecté :

    Exemple de fonction Javascript  Tout sélectionner

    // Recherche le nom d'utilisateur connecté
    function EklaGetUser()
    {
    try {
    var ekla_login=document.id('menubar_section_account');
    if (ekla_login)
    {
    ekla_login=ekla_login.getElementsByTagName("a").item(0);
    ekla_login = (ekla_login.innerText) ? ekla_login.innerText : ekla_login.text;
    return ekla_login.trim();
    }
    else
    {return "";}
    } catch(e) {return "";}
    }

    Cliquez sur le bouton ci-dessous pour tester cette fonction qui affichera votre pseudo (si vous êtes connecté) dans une fenêtre de message :

    Notez que cette fonction est écrite dans un module de mon blog que vous ne voyez pas : il est masqué.
    Les articles, pages et modules peuvent partager des fonctions Javascript, dans la mesure où ils sont chargés.

    Un module est toujours chargé, même s'il est masqué : on peut donc appeler une fonction d'un module depuis un article ou une page.

    Pour masquer un module, il suffit d'ajouter ce code au CSS du blog, en modifiant XXXXXXXXX par l'identifiant de votre module :

    CSS niveau blog : masquer le module  Tout sélectionner

    /* Masquer ce module : remplacer l'identifiant numérique par celui de votre module */
    #module_menuXXXXXXXXX {display:none}

    Si vous ne savez pas où mettre ce code, voir cet article : Mon premier code CSS - images au coins arrondis avec ombrage.

    Pour trouvez l'identifiant du module, utilisez les outils développeurs du navigateur, voir cet article : Structure d'un blog Eklablog.
    Vous pouvez également voir l'identifiant en survolant les boutons d'édition ou de suppression du module ; l'identifiant est numérique : par exemple 139801640.

    Vous pouvez éventuellement préférer écrire ce code dans le module (en édition « Code Source ») en ajoutant alors des balises style :

    CSS niveau module : masquer le module  Tout sélectionner

    <style type="text/css"><!--
    /* Masquer ce module : remplacer l'identifiant numérique par celui de votre module */
    #module_menuXXXXXXXXX {display:none}
    --></style>

    Le module est alors invisible : vous pouvez le retrouver dans le menu « Apparence » => « Gérer les menus ».

    Pour écrire du code Javascript, éditer le module et passez en édition « Code source ».

    Note : passez en mode « Normal » ou « Expert » pour voir cette option de l'éditeur.

    Il faut ensuite indiquer que l'on va écrire du code Javascript : cela se fait en plaçant le code dans un élément script :

    Exemple de fonction Javascript dans un module  Tout sélectionner

    <script>// <![CDATA[
    // Recherche le nom d'utilisateur connecté
    function EklaGetUser()
    {
    try {
    var ekla_login=document.id('menubar_section_account');
    if (ekla_login)
    {
    ekla_login=ekla_login.getElementsByTagName("a").item(0);
    ekla_login = (ekla_login.innerText) ? ekla_login.innerText : ekla_login.text;
    return ekla_login.trim();
    }
    else
    {return "";}
    } catch(e) {return "";}
    }
    // ]]>
    </script>

    Votre fonction EklaGetUser peut maintenant être utilisée n'importe où dans le blog.

    « [CSS] Info-bulles en CSS sans Javascript[SCRIPT] Afficher des fenêtres de même style que celles d'Eklablog »

  • Commentaires

    1
    Vendredi 11 Avril 2014 à 15:36

    Salut,

    Je viens de découvrir ton blog et je le trouve plutôt pas mal. Sympa l'idée de proposer aux utilisateurs ta fonction.

    2
    Jeudi 12 Juin 2014 à 20:50

    Belle idée !!!

    moi je recherchai des boutons j'♥ mais je ne trouve ke des boutons style partage avec facebook et autre et c'est pas du tout ce ke je veux

    je voudrai kon puisse cliker sur un coeur♥ et ke ça donne le nombre de clic à coté mais un seul clic par personne !!! et cela pour chaque billet , donc un seul clic par billet

    je sais pas si c'est  clair mon explication !!!! serait-ce faisable lol ????

    je reviendrai voir réponse ici car mes commentaires sont désactivé en kelke sorte mdr !!!

    3
    Mardi 29 Juillet 2014 à 10:18

    Je reviens vers ce billet bien ke je n'ai jamais mis de module en" display none" mais seulement les titres !

    je viens de faire essais de mettre un module en cacher alors je viens te prévenir k'avec le changement ka fait ekla il sera plus possible de modifier le module caché puiskil vont bientôt supprimer la fenetre "gérer les menus"

    Dans la colonne menu, si le module est caché, yaura plus le crayon pour rééditer, puiske le module est sensé etre caché

    4
    Mardi 29 Juillet 2014 à 10:27

    en faite javais essayé avec un module dont javais display none le titre

    mais si on laisse titre, c bon ya crayon pour éditer

    Désolée mais fallait ke je vérifie ce détail lol

    bonne continuation

    5
    Lundi 4 Août 2014 à 17:12

    Merci pour l'info sur la disparition de la fenetre "gérer les menus".
    Dans ce cas il faudrait passer par javascript pour masquer totalement le module.
    On peut écrire une fonction qui affiche le module si par exemple "Contenu" est disponible dans la barre de menu.
    Comme ça le module ne s'afficherait que si on est gestionnaire du blog.


    <script>// <![CDATA[
    if(typeof(onJSFilesLoaded) != "object")
     onJSFilesLoaded = [];
     onJSFilesLoaded.push(function(){
      if ($('menubar_section_content')==null) {$('module_menuXXXXXXXXX').style.display='none';}
     });
    // ]]></script>


    C'est un peu plus lourd mais ça fonctionne.

    6
    Mardi 26 Janvier 2016 à 12:42

    Bonjour ! J'aimerais savoir : La fonction EklaGetUser, comment on l'écrit en HTML ???

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :