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.
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
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 += "<" + 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>
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
- Manipulation du dom, fonction récursive de la page, boite a outils
- Fonction puissance recursive - Conseils pratiques -PHP
- Exemple de page d'authentification - Conseils pratiques -PHP
- Boite a outils vide ✓ - Forum Visual Basic 6
- Fermer boite de dialogue excel - Forum Visual Basic
- Exemple de code html page d'accueil ✓ - Forum Graphisme/design
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.