Javascript : Manipulation du dom, fonction récursive de la page, boite a outils

Contenu du snippet

Manipulation du DOM

Le but du travail consiste à afficher la structure d’une page web et d’offrir des outils pour
modifier la page.
La page web est affichée dans une page de disposition divisée en 3 zones et contenant les scripts de manipulation de la page.
La première zone contient à page à afficher. La deuxième contient la structure html de la page. La troisième contient des outils de manipulation de la page.

Lorsque l’utilisateur clique sur un des éléments de la structure, l’élément est sélectionné et mis en
évidence dans la zone 1. Les informations sont aussi actualisées dans la boite à outils.

Boîte à outils
Un bouton permet d’ajouter un attribut avec sa valeur. La zone d'entrée du nom de l'attribut est
une zone d’auto-complétion. L’attribut ajouté est affiché avec la liste et l'utilisateur peut en
ajouter un autre. N’affichez pas les attributs que vous ajoutez pour la gestion de l'application
Le deuxième onglet a le même format que le premier, sauf qu'au lieu d'afficher les attributs, vous
affichez toutes les propriétés de style de l'élément.

Source / Exemple :

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Validation</title>
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
	<link rel="stylesheet" href="/resources/demos/style.css" />
	<style type="text/css">#main { width:400px; } .indentation { margin-left: 25px; } #tabs { width: 500px; height: 400px; margin-left: 600px; position: fixed; top:25px; } </style>
    <script type="text/javascript">
		var LoadingFini;
		var HL;
		$(function() {
			$( "#tabs" ).tabs();
		
		});
		
		
		
        function RecursiveFnc(Node){
			var Noeud = Node;
			if(Node == null) { Noeud = document.getElementById('main'); }
			champsAttributs = Noeud.attributes;
			for (i = 0; i < champsAttributs.length; i++) {
				if(champsAttributs[i].nodeName.toLowerCase() == "id") {
					IDduMoment = champsAttributs[i].nodeValue;
				}
			}
		
		
			var output = "<ul><li onclick=\"HighLightText('" + IDduMoment + "')\">";
			output += "&#60;" + Noeud.tagName + "&#62;";
			if (Noeud.tagName != "UL"  && Noeud.tagName != "DIV" ) { output += "<br />" + "<span class=\"indentation\" onclick=\"HighLightText('" + IDduMoment + "')\">" + Noeud.textContent + "</span>"; }
			if (Noeud.hasChildNodes()) {
				var nodeChild = Noeud.firstChild;
			    while (nodeChild) {
					if (nodeChild.nodeType == 1){
						output += RecursiveFnc(nodeChild)
					}
					nodeChild = nodeChild.nextSibling;
				}
			}
			output += "</li><li onclick=\"HighLightText('" + IDduMoment + "')\" >&#60;/" +  Noeud.tagName + "&#62;</li></ul>";
			return output;
		}
 
		var HightLightDuMoment; 
		function HighLightText(idChamps) {
			if(HL==true) {
			unHighLightText();
			$(function() {
					$( "#" + idChamps ).css("background-color", "lightblue");
			});
			
			HightLightDuMoment = idChamps;
			HL=false;
			BoiteAOutil(idChamps);
			}
			if(idChamps=="main") { HL=true; }
		
			
		}
		
		function unHighLightText() {
			$(function() {
					$( "#" + HightLightDuMoment ).css("background-color", "transparent");
			});
		}
		 
		 window.onload = function () {
			x = document.getElementById("resultat");
			x.innerHTML = "";
			txt = RecursiveFnc();
			x.innerHTML = txt;		
			}
		
		function BoiteAOutil(idChamps) {
			LoadingFini = false;
			champs = document.getElementById(idChamps);
			champsAttributs = champs.attributes;
			tabAttributs = document.getElementById('tabs-1');
			tabStyle = document.getElementById('tabs-2');
			tabAttributs.innerHTML = '';
			tabStyle.innerHTML = '';
				
			for (i = 0; i < champsAttributs.length; i++) {
				ElemP = document.createElement("P");
				
				if(champsAttributs[i].nodeName.toLowerCase() == "id") {
					ElemInputHidden = document.createElement("INPUT");
					ElemInputHidden.setAttribute("type", "hidden");
					ElemInputHidden.setAttribute("id", "idCacher");
					ElemInputHidden.setAttribute("value", champsAttributs[i].nodeValue);
				}
				
				if(champsAttributs[i].nodeName.toLowerCase() == "style") {
					style = champsAttributs[i].nodeValue;
				}
				
				ElemInputName = document.createElement("INPUT");
				ElemInputName.setAttribute("type", "text");
				ElemInputName.setAttribute("id", champsAttributs[i].nodeName + "_name");
				ElemInputName.setAttribute("value", champsAttributs[i].nodeName);
				ElemInputName.setAttribute("readonly", true);
				ElemInputName.setAttribute("disabled", true);
				
				ElemInputValue = document.createElement("INPUT");
				ElemInputValue.setAttribute("type", "text");
				ElemInputValue.setAttribute("id", champsAttributs[i].nodeName + "_value");
				ElemInputValue.setAttribute("value", champsAttributs[i].nodeValue);
				ElemInputValue.setAttribute('onblur',"MettreAJourAttributs(\"" + champsAttributs[i].nodeName + "\")");
				

				ElemIMG = document.createElement("IMG");
				ElemIMG.setAttribute("src", "moins.png");
				ElemIMG.setAttribute('onclick',"SupprimerAttribut(\"" + champsAttributs[i].nodeName + "\")");
			
				ElemP.appendChild(ElemInputName);
				ElemP.appendChild(ElemInputValue);
				ElemP.appendChild(ElemIMG);
				
				tabAttributs.appendChild(ElemP);
					
			}	
			
				ElemP = document.createElement("P");
				
				ElemInputName = document.createElement("INPUT");
				ElemInputName.setAttribute("type", "text");
				ElemInputName.setAttribute("id", "nouveau_name");
				ElemInputName.setAttribute("value", "");
				ElemInputName.setAttribute('onblur',"AjouterAttribut()");
				
		
				ElemInputValue = document.createElement("INPUT");
				ElemInputValue.setAttribute("type", "text");
				ElemInputValue.setAttribute("id", "nouveau_value");
				ElemInputValue.setAttribute("value", "");
				ElemInputValue.setAttribute('onblur',"AjouterAttribut()");
				
				ElemIMG = document.createElement("IMG");
				ElemIMG.setAttribute("src", "plus.png");
				
				
				ElemP.appendChild(ElemInputName);
				ElemP.appendChild(ElemInputValue);
				ElemP.appendChild(ElemIMG);
				
				tabAttributs.appendChild(ElemP);
				tabAttributs.appendChild(ElemInputHidden);
				
				
				SplitStyle = style.split(";");
				
				for (i = 0; i < SplitStyle.length-1; i++) {
					if(SplitStyle[i] != "") {
						SplitSplit = SplitStyle[i].split(":");
						ElemInputName = document.createElement("INPUT");
						ElemInputName.setAttribute("type", "text");
						ElemInputName.setAttribute("id", $.trim(SplitSplit[0]) + "_stylename");
						ElemInputName.setAttribute("value", $.trim(SplitSplit[0]));
						ElemInputName.setAttribute("readonly", true);
						ElemInputName.setAttribute("disabled", true);
						
						ElemInputValue = document.createElement("INPUT");
						ElemInputValue.setAttribute("type", "text");
						ElemInputValue.setAttribute("id", $.trim(SplitSplit[1]) + "_stylevalue");
						ElemInputValue.setAttribute("value", $.trim(SplitSplit[1]));
						ElemInputValue.setAttribute('onblur',"MettreAJourStyle(\"" + $.trim(SplitSplit[0]) + "\")");
						

						ElemIMG = document.createElement("IMG");
						ElemIMG.setAttribute("src", "moins.png");
						ElemIMG.setAttribute('onclick',"SupprimerStyle(\"" + $.trim(SplitSplit[0]) + "\")");
					
						ElemP = document.createElement("P");
						ElemP.appendChild(ElemInputName);
						ElemP.appendChild(ElemInputValue);
						ElemP.appendChild(ElemIMG);
						
						tabStyle.appendChild(ElemP);
					}
				}

				ElemP = document.createElement("P");
				
				ElemInputName = document.createElement("INPUT");
				ElemInputName.setAttribute("type", "text");
				ElemInputName.setAttribute("id", "nouveaustyle_name");
				ElemInputName.setAttribute("value", "");
				ElemInputName.setAttribute('onblur',"AjouterStyle()");
				
		
				ElemInputValue = document.createElement("INPUT");
				ElemInputValue.setAttribute("type", "text");
				ElemInputValue.setAttribute("id", "nouveaustyle_value");
				ElemInputValue.setAttribute("value", "");
				ElemInputValue.setAttribute('onblur',"AjouterStyle()");
				
				ElemIMG = document.createElement("IMG");
				ElemIMG.setAttribute("src", "plus.png");
				
				
				ElemP.appendChild(ElemInputName);
				ElemP.appendChild(ElemInputValue);
				ElemP.appendChild(ElemIMG);
				
				tabStyle.appendChild(ElemP);
				
				availableTags = [
				"background-color",
				"border",
				"color",
				"font-family",
				"font-size",
				"margin",
				"padding",
				"text-align",
				"text-decoration",
				"width"
				];
			
				$("#nouveaustyle_name").autocomplete({ source: availableTags});
				LoadingFini = true;
		}
		
		
		function MettreAJourAttributs(idChamps) {
		    if(LoadingFini == true){
				champscacher = document.getElementById('idCacher');
				champs = document.getElementById(idChamps + '_value');
				$("#" + champscacher.value).attr(idChamps, champs.value);
				BoiteAOutil(champscacher.value);
			}
		}
		
		function AjouterAttribut() { 
		    if(LoadingFini == true){
				champscacher = document.getElementById('idCacher');
				champsName =  document.getElementById('nouveau_name');
				champsValue =  document.getElementById('nouveau_value');
				if(champsName.value != "" && champsValue.value != "") {
					$("#" + champscacher.value).attr(champsName.value,champsValue.value);
					BoiteAOutil(champscacher.value);
				}
			}
		}
		       
		function SupprimerAttribut(idChamps) {
			if(idChamps.toLowerCase() != "id") { 
				champscacher = document.getElementById('idCacher');
				$("#" + champscacher.value).removeAttr(idChamps);
				BoiteAOutil(champscacher.value);
			}
			else { alert("Pas une super idée de supprimer l'ID, Marc"); }
		}
		
		function MettreAJourStyle(idChamps) {
		    if(LoadingFini == true){
				champscacher = document.getElementById('idCacher');
				champs = document.getElementById(idChamps + '_stylevalue');
				$("#" + champscacher.value).attr(idChamps, champs.value);
				BoiteAOutil(champscacher.value);
			}
		}
		
			function AjouterStyle() { 
		    if(LoadingFini == true){
				champscacher = document.getElementById('idCacher');
				champsName =  document.getElementById('nouveaustyle_name');
				champsValue =  document.getElementById('nouveaustyle_value');
				if(champsName.value != "" && champsValue.value != "") {
					style = $("#" + champscacher.value).css(champsName.value, champsValue.value);
					BoiteAOutil(champscacher.value);
				}
			}
		}
		     
		function SupprimerStyle(idChamps) {
				champscacher = document.getElementById('idCacher');
				$("#" + champscacher.value).css(idChamps, "");
				BoiteAOutil(champscacher.value);
		}			 
    </script>
</head>
<body>
	 <div id="main">
        <h3 id="Titre">
            Liste des produits</h3>
        <ul id="ulListe">
                <li id="Chang">Chang</li>      
                <li id="Anised">Anised Sirup</li>      
                <li id="Guarana">Guaran&#225; Fant&#225;stica</li>      
                <li id="sasquatch">Sasquatch Ale</li>      
                <li id="steeleye">Steeleye Stout</li>      
                <li id="cote">C&#244;te de Blaye</li>      
                <li id="chartreuse">Chartreuse verte</li>      
                <li id="ipoh">Ipoh Coffee</li>      
                <li id="laughing">Laughing Lumberjack Lager</li>      
                <li id="outback" >Outback Lager</li>      
                <li id="rhonbrau">Rh&#246;nbr&#228;u Klosterbier</li>      
                <li id="lakkalik">Lakkalik&#246;&#246;ri</li>      
        </ul>
   
          
        </p>
    </div>
	<div id="result" style="border-top: 2px solid black; width: 500px;">
		  <p id="resultat"></p>
	</div>
	<div id="tabs">
		<ul>
			<li><a href="#tabs-1">Attributs</a></li>
			<li><a href="#tabs-2">Style</a></li>
		</ul>
		<div id="tabs-1">
			<p>Selectionner un noeud</p>
		</div>
		<div id="tabs-2">
			<p>Selectionner un noeud</p>
		</div>
	</div>
</body>

</html>

Conclusion :

Il est a noter que ce script est n'est mit en ligne qu'a titre d'exemple complet, il peut être fortement optimisé et amélioré, mais ce code a été conçu en quelques heures dans une journée avec un deadline. Donc ce code ne sera pas améliorer et autant bien le poster tel quel.

N.B. les images du plus.png et moins.png ne sont pas fourni

A voir également

Fonction récursive javascript
Recursion javascript - Meilleures réponses
Fonction recursive js - Meilleures réponses
Javascript : Yield* et fonction récursive - CodeS SourceS - Guide
Fonction factorielle javascript - Guide
Fonction récursive fibonacci python - Guide
Fonction recursive puissance en c - Conseils pratiques - PHP
Visual Basic / VB.NET : Petit exemple de fonction recursive - CodeS SourceS - Guide

Ajouter un commentaire Commentaire

alfrai

Messages postés: 69
Date d'inscription: mardi 11 avril 2006
Statut: Membre
Dernière intervention: 23 juillet 2013

10 juin 2013 à 12:22

Merci pour le code !

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Manipulation du dom, fonction récursive de la page, boite a outils

Contenu du snippet

Source / Exemple :

Conclusion :

A voir également

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Du même auteur (ircland)

Signateur d'application android

Gestionnaire de fichier sur le serveur d'application

Modificateur d'indice de performance windows 7

Trieur de contacts msn/wlm

Source / Exemple :

Conclusion :

A voir également

Vous n'êtes pas encore membre ? inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Du même auteur (ircland)

Signateur d'application android

Gestionnaire de fichier sur le serveur d'application

Modificateur d'indice de performance windows 7

Trieur de contacts msn/wlm

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !