Soyez le premier à donner votre avis sur cette source.
Snippet vu 5 397 fois - Téléchargée 17 fois
<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 += "<" + Noeud.tagName + ">"; 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 + "')\" ></" + Noeud.tagName + "></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á Fantástica</li> <li id="sasquatch">Sasquatch Ale</li> <li id="steeleye">Steeleye Stout</li> <li id="cote">Cô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önbräu Klosterbier</li> <li id="lakkalik">Lakkaliköö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>
10 juin 2013 à 12:22
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.