Codice PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script language="javascript" src="prototype.js"></script>
<script language="javascript" src="scriptaculous.js?load=effects"></script>
<script language="javascript">
//list of buttons
var taskbarButtons = new Array();
taskbarButtons.push( { "pid":"testA","parent":"pulsanteA","target":"divTestA" } );
taskbarButtons.push( { "pid":"testB","parent":"pulsanteB","target":"divTestB" } );
taskbarButtons.push( { "pid":"testC","parent":"pulsanteC","target":"divTestC" } );
var lstOpened = null;
var utils = {
basePosition : { "left":"-300px","top":"-300px" }
};
utils.Timeouts = function(){
var _timeouts = new Array();
var checkTimeoutExists = function(timeout){
return (_timeouts.indexOf(timeout) > -1 ? true : false);
};
var _public = {
push:function(t){
//check existing timeout
if(!checkTimeoutExists(t))
_timeouts.push(t);
return _public;
},
clearAll:function(){
_timeouts.each( function(t){ window.clearTimeout(t); });
_timeouts = new Array();
return _public;
},
size:function(){
return _timeouts.size();
}
}
return _public;
};
utils.MoveIn = function(targetId,parentId){
var target = $(targetId);
var parent = $(parentId);
var nCoord = Element.cumulativeOffset(parent);
var dim = { 'width':parent.getWidth(),'height':parent.getHeight() }
//set x,y coord for div
target.style.top = (dim['height'] + nCoord['top'] + 10 )+"px";
target.style.left = (nCoord['left'] - (target.getWidth()-parent.getWidth()))+"px";
return this;
};
utils.MoveOut = function(target){
$(target).style.top = this.basePosition.top;
$(target).style.left = this.basePosition.left;
};
var timeouts = utils.Timeouts();
function revert(pls,callback){
new Effect.BlindUp(pls['target'], {
duration:0.2,
scaleX:true,
beforeStart: function(){
Event.stopObserving( pls['pid'], 'click' );
Event.stopObserving( pls['target'], 'onmouseover' );
lstOpened = null;
},
afterFinish: function(){
//move target away from document
utils.MoveOut(pls['target']);
//restore click function to button
Event.observe( pls['pid'], 'click', onClickOpenHandler.bindAsEventListener(null,pls));
if(callback)
callback();
},
queue: { position: 'front', scope: 'taskbar' }
});
}
function displayDiv(pls){
if(lstOpened){
revert(lstOpened,function(){ displayDiv(pls); });
}else{
utils.MoveIn(pls['target'],pls['parent']);
new Effect.BlindDown( pls['target'], {
duration:0.2,
scaleX:true,
beforeStart: function(){
lstOpened = pls;
},
afterFinish: function(){
//setup automatic closing
timeouts.push(revert.delay( 3, pls ));
//start observing onClickClose function to close opened target
Event.observe( pls['pid'], 'click', onClickCloseHandler.bindAsEventListener(null,pls));
//start observing onmouseOver on target div to clear auto-closing timeout
Event.observe( pls['target'], 'mouseover', onMouseoverHandler.bindAsEventListener(null,pls));
},
queue: { position: 'end', scope: 'taskbar' }
});
}
}
function onClickOpenHandler(evt){
var data = $A(arguments);
data.shift();
var pls = data[0];
Event.stopObserving( pls['pid'], 'click' );
if(timeouts.size())
timeouts.clearAll();
displayDiv(pls);
}
function onClickCloseHandler(evt){
var data = $A(arguments);
data.shift();
var pls = data[0];
if(timeouts.size())
timeouts.clearAll();
timeouts.push(revert.delay( 0.1, pls ));
}
function onMouseoverHandler(evt){
var data = $A(arguments);
data.shift();
var pls = data[0];
//clear timeout to avoid auto-closing function of target
if(timeouts.size())
timeouts.clearAll();
}
function init(){
taskbarButtons.each(
function(pls){
Event.observe( pls['pid'], 'click', onClickOpenHandler.bindAsEventListener(null,pls));
}
);
}
document.observe("dom:loaded", function() {
init();
});
</script>
<style type="text/css">
ul{list-style-type:none; margin:0; padding:0; }
li{ float:left; width:100px; }
.box{ background:#036; color:#FFF; position:absolute; top:-300px; left:-300px; z-index:10000; width:450px; }
</style>
</head>
<body>
<div class="box" id="divTestA" style="height:70px; display:none;">
ciao
questo è il div di prova A
</div>
<div class="box" id="divTestB" style="height:100px; display:none;">
ciao
questo è il div di prova B
</div>
<div class="box" id="divTestC" style="height:120px; display:none;">
ciao
questo è il div di prova C
</div>
<div id="container" style="margin:0 auto; margin-top:20px; width:400px; background:#3F9; position:relative; z-index:100">
<ul>
[*]
<div id="pulsanteA" style="background:#603; width:80px;" align="center">
<input type="button" name="test" value="pulsanteA" id="testA" />
</div>
[*]
<div id="pulsanteB" style="background:#603; width:80px;" align="center">
<input type="button" name="test" value="pulsanteB" id="testB" />
</div>
[*]
<div id="pulsanteC" style="background:#603; width:80px;" align="center">
<input type="button" name="test" value="pulsanteC" id="testC" />
</div>
[/list]
<div style="clear:both"></div>
<div id="left" style="float:left; width:100px; margin-top:20px; background:#F00; height:100px;"></div>
<div style="clear:both"></div>
</div>
</body>
</html>
Rispondi quotando