1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
.selected{
border:1px solid red;
}
.unselected{
border:none;
}
</style>
<script type="text/javascript">
var current = null;
//*************************** nétoie les noeuds vide !!
var notWhitespace = /\S/;
var TEXT_NODE;
try {
TEXT_NODE = Node.TEXT_NODE;
} catch(e) {
TEXT_NODE = 3;
}
var ELEMENT_NODE;
try {
ELEMENT_NODE = Node.ELEMENT_NODE;
} catch(e) {
ELEMENT_NODE = 1;
}
function cleanWhitespace(node) {
for (var x = 0; x < node.childNodes.length; x++) {
var childNode = node.childNodes[x];
if ((childNode.nodeType == TEXT_NODE)&&(!notWhitespace.test(childNode.nodeValue))) {
node.removeChild(node.childNodes[x]);
x--;
}
if (childNode.nodeType == ELEMENT_NODE) {
cleanWhitespace(childNode);
}
}
}
//*********************** fin de la méthode de nétoyage
function selectElement(element){
for(var i = 0 , l = element.parentNode.getElementsByTagName('div').length; i < l;i++){
element.parentNode.getElementsByTagName('div')[i].className = 'unselected';
}
element.className = 'selected';
current = element ;
}
function monter(){
var parent = current.parentNode;
var precedant = current.previousSibling;
parent.insertBefore(current, precedant);
}
function descendre(){
var parent = current.parentNode;
var suivant = current.nextSibling;
parent.insertBefore(current, suivant.nextSibling);
}
</script>
</head>
<body>
click sur un élément pour le selectionner puis click sur un des boutons :) <br />
<input type="button" value="monter" onclick="monter()" >
<input type="button" value="suivant" onclick="descendre()" >
<div id="conteneur">
<div id="div1" onclick="selectElement(this)">
contenu div1
</div>
<div id="div2" onclick="selectElement(this)">
contenu div2
</div>
<div id="div3" onclick="selectElement(this)">
contenu div3
</div>
<div id="div4" onclick="selectElement(this)">
contenu div4
</div>
</div>
<script type="text/javascript">
cleanWhitespace(document.getElementById('conteneur'));
</script>
</body>
</html> |
Partager