so, habs hinbekommen. falls sowas mal wieder jemand braucht:
<html>
<head>
<title> schweinetest </title>
</head>
<body>
<div id="statusdiv" style="visibility:hidden;">MOVING</div>
<div id="dndArea" style="background: url('bg.jpg');
width:1004px; height:748px; border:1px solid black;
margin:10px; padding:10px; text-align:left;">
<div id="window1icon" class="icons" style="text-align:center;
display:inline-block;">
<img src="icon48.png" style="width:48px; height:48px;"/>
</br>Schweinefenster 1.0
</div>
<div id="window1" style="
background:white; border:1px solid black;
visibility:hidden; width:640px; height:480px;">
<div id="window1titlebar" style="height:32px; width:100%;
text-align:center;
margin:bottom:10px; border-bottom:1px solid black;">
<div id="window1close" style="float:right;
height:32px; width:32px;
background-color:red;">X</div>
<div id="window1titleicon" style="float:left; height:32px; width:32px;
background:green;">O</div>
<div id="window1Handler" style="background:blue; height:32px;
color:white;">Schweinefenster!</div>
</div>
<div id="window1content">
Hier koennen dann schweineviele Schweineelemente rein...</br>
Und schweinegeil gestylt werden kann das natuerlich auch noch...</br>
</div>
</div>
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js" type="text/javascript" djConfig="parseOnLoad:true">
</script>
<script>
dojo.require("dojo.dnd.Moveable");
dojo.require("dojo.fx");
dojo.require("dojo._base.fx");
dojo.addOnLoad(function () {
hideWindow();
var dnd1 = new dojo.dnd.Moveable(dojo.byId('window1'),
{ handle : dojo.byId('window1Handler') });
var dnd2 = new dojo.dnd.Moveable(dojo.byId('window1icon'));
dojo.connect(dojo.byId('window1icon'),
'ondblclick', showWindow);
dojo.connect(dojo.byId('window1close'),
'onclick', hideWindow);
dojo.connect(dnd1, 'onMoveStart', windowMovingStarts);
dojo.connect(dnd1, 'onMoveStop', windowMovingStops);
});
function showWindow() {
dojo.style("window1", "visibility", "visible");
dojo.fadeIn({node : "window1"}).play();
}
function hideWindow() {
var anim = dojo.fadeOut({node : "window1"});
dojo.connect(anim,"onEnd", function() {
dojo.style("window1", "visibility", "hidden");});
anim.play();
}
function windowMovingStops() {
dojo.style("statusdiv", "visibility", "hidden");
var anim = dojo.animateProperty({node:"window1", delay:10,
properties: { opacity: {
end:1.0}}});
anim.play();
}
function windowMovingStarts() {
dojo.style("statusdiv", "visibility", "visible");
var anim = dojo.animateProperty({node:"window1", delay:10,
properties: { opacity: {
end:0.5}}});
anim.play();
}
</script>
</html>
[gelöst] divs positionieren mit vorgaben
12 Jul 2010, 17:21
Antworten
Neues Thema