Ho fatto questo, ma ho 2 problemi.
1 che quando si minimizza ha due passaggi uno la chiusura totale, alla fine imposto la finestra all'altezza di 20px e poi la irapro per quei 20px. se in questi passaggi, dopo averla chiusa inserisco $( ".win" ).resizable({ disabled:true }); per disabilitare resizable, la finestra prene un effetto strano, tipo come se avesse trasparenza, poi quando la riapro ritorna normale.
guarda
2 all'inizio dello script prendo la altezza massima della finestra (massima in quel momento perchè uno la può allungare) quindi quando uno la minimizza e poi la riapre lo script sa già quanto riaprirla, ma io vorrei che la riaprisse allo stesso punto di quando è stata resizzata.
Esempio se prendi la finestra la allunghi di altezza, poi la minimizzi e la riapri si riapre com'era all'inizio e non come l'ho allungata.
Guarda qui http://wordsbank.altervista.org/prove/draggable.php
e io codice
codice:
<!DOCTYPE html>
<html>
<head>
<title>Finestra trascinabile</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
.win{
overflow: hidden;
background:#eeeeee;
border:1px solid gray;
border-radius:2px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
width:200px;
padding-top:3;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
box-shadow: 0px 0px 5px gray;
}
.top{
text-align:center;
position:relative;
top:0;
left:0;
height:27px;
border-bottom:1px solid gray;
}
.content{
position:relative;
}
.top:hover{
cursor:move;
}
.cont_but{
position:absolute;
right:1px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
//prendo l'altezza massima della finestra
var h_max = $(".win").height();
$( ".win" ).draggable({ handle:'.top' });
$( ".win" ).resizable({
minHight: 50,
minWidth: 150,
ghost: true
});
//chiudi finestra
$(".close").click(function(){
$(".win").hide("slow");
});
//minimizza
$(".mini").click(function(){
//prendo l'altezza massima dellla fin
var h = $(".win").height();
//se è aperta
if (h != 20){
//la rimpicciolisco
$(".win").slideUp("slow",function(){
$( ".win" ).resizable({ disabled:true });
$(".win").height(20);
$(".win").slideDown("fast");
});
}
else{
//la ingrandisco
$(".win").slideUp("fast",function(){
$(".win").height(h_max);
$( ".win" ).resizable({
minHight: 50,
minWidth: 150,
ghost: true,
disabled:false
});
$(".win").slideDown("slow");
});
}
});
});
</script>
</head>
<body>
<div class="win">
<div class="top">
<div class="cont_but">
<input type="submit" value="-" class="mini"/>
<input type="submit" value="X" class="close"/>
</div>
Drag me
</div>
<div class="content">
<p id="p">Hi, i'm a p tag, sometimes use me to write a medium-long paragraph, but i i'm very tired for this! =)</p>
</div>
</div>
</body>
</html>
Rispondi quotando
