wangdaping
/
wp


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
							<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>dojox.layout.SizingPane</title>
		
	<script type="text/javascript" src="../../../dojo/dojo.js"></script>
	<script type="text/javascript">
		dojo.require("dijit.dijit"); 
		dojo.require("dojo.fx"); 
	</script>
	<style type="text/css">
		@import "../../../dojo/resources/dojo.css";
		@import "../../../dijit/themes/dijit.css";
		@import "../../../dijit/themes/tundra/tundra.css";
		@import "../../../dijit/tests/css/dijitTests.css";

	body { background:#ededed; color:#666; }  

	#nav { 
		position:absolute;
		top:100px;
		left:10px;
		width:200px; 
		-moz-border-radius:8pt 8pt;
		background:#fff;
		border:2px solid #ccc; 
	}

	#box1 { 
		overflow:hidden; 
		position:absolute; 
		display:block;
		width:25px;	
		height:25px;
		-moz-border-radius:8pt 8pt;
		radius:8pt;
		-webkit-border-radius:8pt 8pt; 
		background:#fff;
		border:2px solid #ccc; 
		padding:7px; 
	}	

	</style>
	<script>
		var animationMethod = "chain";  // || combine
		var _showing = false;
		var animG, offsetW, offsetH = null;
		var box1 = null;
		var boxMixin = {
			startWidth: 25,
			startHeight: 25,
			endWidth: 320,
			endHeight: 320,
			duration: 300
		};

		dojo.addOnLoad(function() {
			box1 = dojo.byId('box1'); 
			centerNode(box1);
			dojo.connect(box1,"onmouseover",null,"show");
			dojo.connect(box1,"onmouseout",null,"hideCheck"); 
			//dojo.connect(box1,"onmouseout",null,"hideCheck"); 
			//dojo.connect(but1,"onclick",null,"show");
		});

		function hideCheck(node) {
			if (_showing) { 
			setTimeout("hide('box1')",125); 
			}
		}

		function centerNode(node) {
			var viewport = dijit.getViewport();
			var mb = dojo.marginBox(node);
			var style = node.style;
			offsetW = mb.w - style.width;
			offsetH = mb.h - style.height; 
			style.left = (viewport.l + (viewport.w - mb.w)/2) + "px";
			style.top = (viewport.t + (viewport.h - mb.h)/2) + "px";
		}

		function doUnderlay() {
			console.debug('make underlay'); 

		}

		function show() {
			if (_showing) { return; }
			if (animG && animG.status == "playing") { animG.stop(); }
			_showing = true; 
			var viewport = dijit.getViewport();

			var newLeft = (viewport.l + (viewport.w - boxMixin.endWidth)/2);
			var newTop = (viewport.t + (viewport.h - boxMixin.endHeight)/2);

			var style = box1.style; 
			var anim1 = dojo.animateProperty({
				node: box1,
				duration: boxMixin.duration/2,
				properties: {
					width: { /* start: boxMixin.startWidth, */ end: boxMixin.endWidth, unit:"px" },
					left: { end: newLeft, unit:"px" }
				},
				beforeBegin: doUnderlay()
			});
			var anim2 = dojo.animateProperty({
				node: box1,
				duration: boxMixin.duration/2,
				properties: {
					height: { /*start: boxMixin.startHeight, */ end: boxMixin.endHeight, unit:"px" },
					top: { end: newTop, unit: "px" }
				},
				onEnd: function() { _showing = true; } 

			});
			animG = dojo.fx[animationMethod]([anim1,anim2]).play();
			// chain:
			
				// animate width / left position
				// animate height / top position
			// onend: fadeIn content?
		}

		function hide(node) {
			if (!_showing) return; 
			if (animG && animG.status() == "playing") { animG.stop(); }
			
			var viewport = dijit.getViewport(); 
			var newLeft = (viewport.l + (viewport.w - boxMixin.startWidth)/2);
			var newTop = (viewport.t + (viewport.h - boxMixin.startHeight)/2);

			var style = node.style; 
			var anim1 = dojo.animateProperty({
				node: box1,
				duration: boxMixin.duration/2,
				properties: {
					width: { end: boxMixin.startWidth, unit:"px" },
					left: { end: newLeft, unit:"px" }
				}
			});
			var anim2 = dojo.animateProperty({
					node: box1,
				duration: boxMixin.duration/2,
				properties: {
					height: { end: boxMixin.startHeight, unit:"px" },
					top: { end: newTop, unit: "px" }
				},
				onEnd: function() { _showing = false; } 
			});
			// if we chain, do anim2 first [because height/top is how anim2 in show() ends]
			animG = dojo.fx[animationMethod]([anim2,anim1]).play();
		}
	</script>

</head>
<body class="tundra">

	<h1 class="testTitle">dojox.layout.SizingPane</h1>

	<p>This is simply a test / example. There is no <i>real</i> dojox.layout.SizingPane, but this code 
	should/might become part of a dojox.fx.toggle class ... it's just "neat", isn't it?</p>

	<div id="box1">
	lorem. lorem. lorem.
	</div>


</body>
</html>