Bloc droit colonne avec plusieurs modules (suite)

 

 

Si vous avez bien lu l'article précédent,où j'explique mon système de nom de variable, il devrait vous paraître simple de rajouter un élément à votre liste menu.
C'est bien sûr un exemple ces noms de variables peuvent être changer pour être plus causant pour vous.
Mais ces codes peuvent vous servir de maquette pour créer vos menus personnels car le nom des variables ne s'affichent pas, à vous de voir ce qui vous convient le mieux.

 

Pour rajouter cet élément, il faut  quelques lignes de code :

// --------------------------------------------------
// Création rajout  élément(LI) liste et son lien(a)
// --------------------------------------------------
var liste0Li3 = document.createElement("li");  // Variable élément liste
var liste0Lien3 = document.createElement("a"); // Variable du lien

var texteListe0Lien3 = document.createTextNode("Lien 4"); // création texte de lien
liste0Lien3.appendChild(texteListe0Lien3);      // affectation du texte au lien

// création des attributs du lien, son adresse, le message au survol
liste0Lien3.href = "http://diztest.blog4ever.com/blog/lire-article-205392-2059992-gestion_dynamique_des_modules__du_menu_vertical.html";
liste0Lien3.title = "Texte 4 au survol";

 

En bleu les nouvelles variables  et en rouge les valeurs de ces variables, c'est ce que les internautes verront sur votre blog et l'adresse URL du lien, dont vos modifications personnelles.

 

A ces lignes de code, il manque tout simplement l'affectation de ce lien à la liste du menu de votre  module. Je vais donc insérer ce code dans celui de la création du menu.

 

// --------------------------------------------------
// affectation des liens aux éléments de la liste LI
// --------------------------------------------------
liste0Li3.appendChild(liste0Lien3);

// -----------------------------------------------------
// affectation des éléments au bloc liste UL mod0Liste0
// -----------------------------------------------------
mod0Liste0.appendChild(liste0Li3);

 

 

 

Code complet du menu avec 4 liens.


// -----------------------------------------
// Création de liste de liens du Module1
// -----------------------------------------
// Variables bloc liste (UL)
var mod0Liste0 = document.createElement("ul");

// --------------------------------------------------
// Création premier élément(LI) liste et son lien(a)
// --------------------------------------------------
var liste0Li0 = document.createElement("li");              // Variable élément liste
var liste0Lien0 = document.createElement("a");             // Variable du lien

var texteListe0Lien0 = document.createTextNode("Lien 1");  // création texte de lien
liste0Lien0.appendChild(texteListe0Lien0);                 // affectation du texte au lien

// création des attributs du lien, son adresse, le message au survol
liste0Lien0.href = "http://diztest.blog4ever.com/blog/lire-article-205392-2050386-ajout_de_liens_sur_la_barre_menu.html";
liste0Lien0.title = "Texte 1 au survol";


// --------------------------------------------------
// Création deuxième élément(LI) liste et son lien(a)
// --------------------------------------------------
var liste0Li1 = document.createElement("li");
var liste0Lien1 = document.createElement("a");
var texteListe0Lien1 = document.createTextNode("Lien 2");
liste0Lien1.appendChild(texteListe0Lien1);
liste0Lien1.href = "http://diztest.blog4ever.com/blog/lire-article-205392-2050382-gestion_dynamique_des_liens_du_menu_barre.html";
liste0Lien1.title = "Texte 2 au survol";

// --------------------------------------------------
// Création troisième élément(LI) liste et son lien(a)
// --------------------------------------------------
var liste0Li2 = document.createElement("li");
var liste0Lien2 = document.createElement("a");
var texteListe0Lien2 = document.createTextNode("Lien 3");
liste0Lien2.appendChild(texteListe0Lien2);
liste0Lien2.href = "http://diztest.blog4ever.com/blog/lire-article-205392-2050388-image_differente_pour_chaque_module_de_la_barre.html";
liste0Lien2.title = "Texte 3 au survol";

// --------------------------------------------------
// Création quatrième élément(LI) liste et son lien(a)
// --------------------------------------------------
var liste0Li3 = document.createElement("li");
var liste0Lien3 = document.createElement("a");
var texteListe0Lien3 = document.createTextNode("Lien 4");
liste0Lien3.appendChild(texteListe0Lien3);
liste0Lien3.href = "http://diztest.blog4ever.com/blog/lire-article-205392-2059992-gestion_dynamique_des_modules__du_menu_vertical.html";
liste0Lien3.title = "Texte 4 au survol";

// affectation des liens aux éléments de la liste LI
liste0Li0.appendChild(liste0Lien0);
liste0Li1.appendChild(liste0Lien1);
liste0Li2.appendChild(liste0Lien2);
liste0Li3.appendChild(liste0Lien3);

// affectation des éléments au bloc liste UL mod0Liste0
mod0Liste0.appendChild(liste0Li0);
mod0Liste0.appendChild(liste0Li1);
mod0Liste0.appendChild(liste0Li2);
mod0Liste0.appendChild(liste0Li3);

// affectation de la liste au blocs divMod0
divMod0.appendChild(mod0Liste0);

 

 

 

Le code ajouté placé dans mon code de l'article précédent. Il en sera de même pour rajouter d'autres liens à ce menu dans le premier module.

 

 

La colonne étant crée avec les modules voir les articles : Création colonne  Création de modules

 

Pour créer un autre menu, dans un autre module, j'utilise le même code mais pour facilité la compréhension et rendre la gestion plus aisée par la suite, je ne mélange pas les modules et leur contenu. Je copie le code et je change uniquement les noms des variables puis bien sûr je change la liste et les liens.

 

Tout d'abord je crée le bloc liste UL dans le module que je veux en l'occurrence ModulePlus2

// -----------------------------------------
// Création de listes de liens du  ModulePlus2
// -----------------------------------------
// Variables bloc liste (UL)
var mod1Liste0 = document.createElement("ul");

 

En rouge la variable du bloc liste UL, le seul changement est mod1Liste0, ce petit 1 indique que la liste sera créée dans le module divMod1 voir dans la création des modules, variable qui représente le ModulePlus2.

 

Pour les éléments de liste LI et les liens a, comme je place ce code entre de nouvelles balises Javascript, je peux conserver le nom des variables, je change que les valeurs, comme exemple j'ai mis 2 liens réels et les textes qui correspondent à ces liens. (voir le code complet ci-dessous)

 

Par contre ce qui faut absolument modifier c'est l'affectation des éléments à la liste et de la liste au module.

// affectation des éléments au bloc liste UL mod0Liste0
mod1Liste0.appendChild(liste0Li0);
mod1Liste0.appendChild(liste0Li1);

// affectation de la liste au blocs divMod1
divMod1.appendChild(mod1Liste0);

 

 

 

Création d'un menu dans le module "ModulesPlus2"
Code complet


<script type="text/javascript">// <![CDATA[
// -----------------------------------------
// Création de liste de liens du ModulePlus2
// -----------------------------------------
// Variables bloc liste (UL)
var mod1Liste0 = document.createElement("ul");

// --------------------------------------------------
// Création premier élément(LI) liste et son lien(a)
// --------------------------------------------------
var liste0Li0 = document.createElement("li");  // Variable élément liste
var liste0Lien0 = document.createElement("a"); // Variable du lien

// création texte de lien
var texteListe0Lien0 = document.createTextNode("Création colonne droite");  
liste0Lien0.appendChild(texteListe0Lien0);   // affectation du texte au lien

// création des attributs du lien, son adresse, le message au survol
liste0Lien0.href = "http://diztest.blog4ever.com/blog/lire-article-205392-2061533-bloc_droit_colonne_avec_menu_complementaire.html";
liste0Lien0.title = "Création de colonne droite avec menu complémentaire";

// --------------------------------------------------
// Création deuxième élément(LI) liste et son lien(a)
// --------------------------------------------------
var liste0Li1 = document.createElement("li");
var liste0Lien1 = document.createElement("a");
var texteListe0Lien1 = document.createTextNode("Création modules");
liste0Lien1.appendChild(texteListe0Lien1);
liste0Lien1.href = "http://diztest.blog4ever.com/blog/lire-article-205392-2063428-bloc_droit_colonne_avec_plusieurs_modules.html";
liste0Lien1.title = "Création de plusieurs module dans la colonne droite";

// affectation des liens aux éléments de la liste LI
liste0Li0.appendChild(liste0Lien0);
liste0Li1.appendChild(liste0Lien1);

// affectation des éléments au bloc liste UL mod1Liste0
mod1Liste0.appendChild(liste0Li0);
mod1Liste0.appendChild(liste0Li1);

// affectation de la liste au blocs divMod1
divMod1.appendChild(mod1Liste0);
// ]]></script>

 

 

Vous constaterez que cette méthode réduit le code à modifier, en bleu les variables et en rouge les valeurs.

 

 

Création d'un bloc "img" dans la colonne droite

 

<script type="text/javascript">// <![CDATA[
// ----------------------------------
// Création objet élément HTML image
// ----------------------------------
// Affectation variable
var imgPub = document.createElement("img");


// style direct pour centrer l'image

imgPub.style.display = "block";
imgPub.style.marginTop = "20px";
imgPub.style.marginLeft = "auto";
imgPub.style.marginRight = "auto";
imgPub.style.marginBottom = "20px";

 

// Adresse de l'image

imgPub.setAttribute("src", "https://static.blog4ever.com/2008/05/205392/artimage_205392_2947608_201009235548568.gif");
// Message en cas de non affichage de l'image
imgPub.setAttribute("alt", "Bouton animé pub PapyClic");

// affectation image au blocs divMod2
divMod2.appendChild(imgPub);
// ]]></script>

 

 

Rendre l'image précédente cliquable

Il faut créer le lien, puis affecter l'image à ce lien, qui sera lui même affecté au bloc dans la colonne de droite.


Code complet :

<script type="text/javascript">// <![CDATA[
// --------------------------------------------
// Création objet élément HTML image cliquable
// --------------------------------------------
// Affectation variables
var lienPub = document.createElement("a");
var imgPub = document.createElement("img");

// Création des attributs du lien, adresse et message au survol
lienPub.href = "http://diztest.blog4ever.com/blog/index-205392.html";
lienPub.title = "Retour page d'accueil DizTest";

// Création du style de l'image
imgPub.style.display = "block";
imgPub.style.marginTop = "20px";
imgPub.style.marginLeft = "auto";
imgPub.style.marginRight = "auto";
imgPub.style.marginBottom = "20px";

// Création des attributs de l'image
imgPub.setAttribute("src", "https://static.blog4ever.com/2008/05/205392/artimage_205392_2947608_201009235548568.gif");
imgPub.setAttribute("alt", "Bouton animé pub PapyClic");

// affectation de l'image au lien
lienPub.appendChild(imgPub);

// affectation du lien au blocs divMod2
divMod2.appendChild(lienPub);
// ]]></script>

 

 

Déplacement du module sondage dans la colonne droite

 

<script type="text/javascript">// <![CDATA[
// -------------------------------
// ----  Module Sondage déplacé
// -------------------------------
// Positionnement de bloc interne existant
// Affectation variable
var menuSondage = document.getElementById("menu_sondage");
 
// Affectation module Sondage dans la nouvelle colonne
nvColonne.appendChild(menuSondage);
// ]]></script>

 

 

 

Dans les menus créés de cette façon, vous pouvez rajouter aux liens une petite image puce ou news. Quelques lignes de code suffisent :

 

// ----------------------------------------------------------
// Création de puces et son insertion avant le texte du lien
// ----------------------------------------------------------
var imgPuce0 = document.createElement("img");

// Adresse de l'image
imgPuce0.setAttribute("src", "https://static.blog4ever.com/2008/05/205392/artimage_205392_1212789_201004220912334.gif");
imgPuce0.setAttribute("border", "0"); // Attribut bordure
liste0Lien0.appendChild(imgPuce0); // Affectation au lien

 

Ce code est à placer en-dessous de la création du lien, vous avez à mettre l'adresse de l'image, la même ou une autre (attention à la taille), et à modifier les variables.

 

 

Code modifié pour réaliser le ModulePlus2 sur cet article

<script type="text/javascript">// <![CDATA[
// -----------------------------------------
// Création de liste de liens du ModulePlus2
// -----------------------------------------
// Variables bloc liste (UL)
var mod1Liste0 = document.createElement("ul");

// --------------------------------------------------
// Création premier élément(LI) liste et son lien(a)
// --------------------------------------------------
var liste0Li0 = document.createElement("li");  // Variable élément liste
var liste0Lien0 = document.createElement("a"); // Variable du lien

// ----------------------------------------------------------
// Création de puces et son insertion avant le texte du lien
// ----------------------------------------------------------
var imgPuce0 = document.createElement("img");

// Adresse de l'image
imgPuce0.setAttribute("src", "https://static.blog4ever.com/2008/05/205392/artimage_205392_1212789_201004220912334.gif");
imgPuce0.setAttribute("border", "0"); // Attribut bordure
liste0Lien0.appendChild(imgPuce0); // Affectation au lien

// création texte de lien
var texteListe0Lien0 = document.createTextNode("Création colonne droite");  
liste0Lien0.appendChild(texteListe0Lien0);   // affectation du texte au lien

// création des attributs du lien, son adresse, le message au survol
liste0Lien0.href = "http://diztest.blog4ever.com/blog/lire-article-205392-2061533-bloc_droit_colonne_avec_menu_complementaire.html";
liste0Lien0.title = "Création de colonne droite avec menu complémentaire";

// --------------------------------------------------
// Création deuxième élément(LI) liste et son lien(a)
// --------------------------------------------------
var liste0Li1 = document.createElement("li");
var liste0Lien1 = document.createElement("a");
var imgPuce1 = document.createElement("img");
imgPuce1.setAttribute("src", "https://static.blog4ever.com/2008/05/205392/artimage_205392_1212789_201004220912334.gif");
imgPuce1.setAttribute("border", "0");
liste0Lien1.appendChild(imgPuce1);
var texteListe0Lien1 = document.createTextNode("Création modules");
liste0Lien1.appendChild(texteListe0Lien1);
liste0Lien1.href = "http://diztest.blog4ever.com/blog/lire-article-205392-2063428-bloc_droit_colonne_avec_plusieurs_modules.html";
liste0Lien1.title = "Création de plusieurs module dans la colonne droite";

// affectation des liens aux éléments de la liste LI
liste0Li0.appendChild(liste0Lien0);
liste0Li1.appendChild(liste0Lien1);

// affectation des éléments au bloc liste UL mod1Liste0
mod1Liste0.appendChild(liste0Li0);
mod1Liste0.appendChild(liste0Li1);

// affectation de la liste au blocs divMod1
divMod1.appendChild(mod1Liste0);
// ]]></script>

 

 

 

...



05/01/2011
1 Poster un commentaire

A découvrir aussi


Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 42 autres membres


Rechercher sur Diztest ? :

Recommander ce blog | Contact | Signaler un contenu | RSS | Espace de gestion

retour Accueil Page precedente Bas de page Plein ecran - Retour alt+F4 Haut de page Page suivante Envoyer un mail a PapyClic le webmaster de Test-DizPerso