CodeS-SourceS
Rechercher un code, un tuto, une réponse

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

Soyez le premier à donner votre avis sur cette source.

Snippet vu 3 334 fois - Téléchargée 7 fois

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

Ajouter un commentaire

Commentaires

Donnez votre avis

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.