Salut,
Si j'ai bien compris ce que tu veux faire, tu n'as pas besoin d'AJAX, qui lui est utile pour faire des appel à la BD en dynamique.
Pour ton problème, il te suffit d'utiliser un attribut "personnalisé" dans tes DIV, et de les utiliser par la suite dans une boucle javascript.
Teste cet exemple, tu comprendras facilement la fonction Filter :
<html>
<head>
<style>
.divBorderFloat {
width:100px;
height:100px;
border:1px solid;
float: left;
}
</style>
<script language="javascript">
function filter(val) {
var m = document.getElementsByTagName("DIV");
for (i=0; i<m.length; i++) {
if (m.item(i).getAttribute("filter") != val) {
m.item(i).style.display="none";
} else {
m.item(i).style.display="block";
}
}
}
</script>
</head>
<body style="font-size:10px">
<button onclick="javascript:filter(1)">FILTRE 1</button>
<button onclick="javascript:filter(2)">FILTRE 2</button>
<button onclick="javascript:filter(3)">FILTRE 3</button>
<div class="divBorderFloat" filter="1">FILTRE = 1</div>
<div class="divBorderFloat" filter="2">FILTRE = 2</div>
<div class="divBorderFloat" filter="3">FILTRE = 3</div>
<div class="divBorderFloat" filter="3">FILTRE = 3</div>
<div class="divBorderFloat" filter="2">FILTRE = 2</div>
<div class="divBorderFloat" filter="3">FILTRE = 3</div>
<div class="divBorderFloat" filter="1">FILTRE = 1</div>
<div class="divBorderFloat" filter="2">FILTRE = 2</div>
</body>
</html>
A plus ...
Patrice
Salut,
Si j'ai bien compris ce que tu veux faire, tu n'as pas besoin d'AJAX, qui lui est utile pour faire des appel à la BD en dynamique.
Pour ton problème, il te suffit d'utiliser un attribut "personnalisé" dans tes DIV, et de les utiliser par la suite dans une boucle javascript.
Teste cet exemple, tu comprendras facilement la fonction Filter :
<html> <head> <style> .divBorderFloat { width:100px; height:100px; border:1px solid; float: left; } </style> <script language="javascript"> function filter(val) { var m = document.getElementsByTagName("DIV"); for (i=0; i<m.length; i++) { if (m.item(i).getAttribute("filter") != val) { m.item(i).style.display="none"; } else { m.item(i).style.display="block"; } } } </script> </head> <body style="font-size:10px"> <button onclick="javascript:filter(1)">FILTRE 1</button> <button onclick="javascript:filter(2)">FILTRE 2</button> <button onclick="javascript:filter(3)">FILTRE 3</button> <div class="divBorderFloat" filter="1">FILTRE = 1</div> <div class="divBorderFloat" filter="2">FILTRE = 2</div> <div class="divBorderFloat" filter="3">FILTRE = 3</div> <div class="divBorderFloat" filter="3">FILTRE = 3</div> <div class="divBorderFloat" filter="2">FILTRE = 2</div> <div class="divBorderFloat" filter="3">FILTRE = 3</div> <div class="divBorderFloat" filter="1">FILTRE = 1</div> <div class="divBorderFloat" filter="2">FILTRE = 2</div> </body> </html>A plus ...
Patrice