<!DOCTYPE html>
<html>
<head>
<title>jQuery: ordinamento elementi div</title>
<meta charset="utf-8"/>
<style type="text/css">
#main{
border-style: solid;
border-width: medium;
border-color: rgb(152, 191, 33);
padding: 15px;
margin: 10px;
width: 450px;
}
#main div{
border-style: solid;
border-width: medium;
border-color: rgb(255, 191, 33);
padding: 5px;
margin: 3px;
}
p{
padding-left:1em
}
p a{
background:#33f;
color:#fff;
padding:5px;
text-decoration:none;
margin-right:0.5em;
font-weight:bold
}
</style>
</head>
<body>
Ordinamento dei div
<div id='main'>
<div name='ROSSO'>Questo è il 1° DIV. Il suo nome è ROSSO</div>
<div name='VERDE'>Questo è il 2° DIV. Il suo nome è VERDE</div>
<div name='GIALLO'>Questo è il 3° DIV. Il suo nome è GIALLO</div>
<div name='NERO'>Questo è il 4° DIV. Il suo nome è NERO</div>
<div name='BLU'>Questo è il 5° DIV. Il suo nome è BLU</div>
</div>
<p><a href="#" id="asc">Ascendente</a> <a href="#" id="desc">Discendente</a></p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
var Sortable={};
Sortable.sort=function(which,dir){
Sortable.dir=(dir=='desc')?-1:1;
$(which).each(function(){
var sorted=$(this).find('> div').sort(function(a,b){
return $(a).attr("name").toLowerCase() > $(b).attr("name").toLowerCase() ? Sortable.dir : -Sortable.dir;
});
$(this).append(sorted);
});
};
$(function(){
$('#asc').click(function(){
Sortable.sort('#main','asc');return false;
});
$('#desc').click(function(){
Sortable.sort('#main','desc');return false;
});
});
</script>
</body>
</html>
Nessun commento:
Posta un commento