miércoles, 20 de febrero de 2013

La iteración rezisable en jQuery UI

Por media de esta iteración podemos cambiar el tamaño de una división, en tiempo de ejecución, arrastrando la esquina inferior izquierda.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="css/ui-lightness/jquery-ui-1.10.1.custom.min.css" rel="stylesheet"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-ui-custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(inicio);
function inicio(){
    $("#arrastrame").resizable();
    $("#sueltame").droppable({drop:onSuelta});
}
function onSuelta(){
    $("#sueltame").css("background-color", "#F60");
    $("#sueltame").text("Afrodita es la diosa del amor");
}
</script>
<title>Draggable</title>
<style>
#arrastrame{
    background-image:url(imagenes/afrodita160x196.jpg);
    background-repeat:no-repeat;
    background-size:100%;
    width:160px;
    height:196px;
    text-align:center;   
   
}
#sueltame{
    width:400px;
    height:400px;
    border:solid 1px black;
    background-color:pink;
    text-align:center;
    position:absolute;
    left:250px;
    top:50px;   
}
</style>
</head>

<body>
<div id="sueltame">Diosa del amor</div>
<div id="arrastrame">Arrástrame</div>

</body>
</html>

No hay comentarios:

Publicar un comentario