Updated

2013-02-20 10:38:25 +01:00
parent 17c3936ab6
commit 5d14b9e2d4
1919 changed files with 559755 additions and 2588 deletions
@@ -0,0 +1,175 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+	<title>A responsive Fisheye-like FisheyeLite widget | The Dojo Toolkit</title>
+	<style type="text/css">
+		@import "../../../dijit/themes/tundra/tundra.css";
+		@import "../../../dojox/layout/resources/RadioGroup.css";
+	    body, html { margin:0; padding:0; width:100%;
+			font-family:Arial,sans-serif;
+		}
+		
+		#content {
+			height:300px;
+			border-left:1px solid #333;
+			border-right:1px solid #333;
+		}
+		
+		#container {
+			top:150px;
+			width:720px;
+			margin:0 auto;
+		}
+		#header {
+			position:relative;
+			height:90px;
+			border-bottom:1px solid #dedede;
+		}
+		#dojoLink, #dijitLink, #dojoxLink {
+			background:#dedede;
+			position:absolute;
+			bottom:0;
+			width:200px;
+			padding:0;
+			cursor:pointer;
+		}
+		#dojoLink {
+			left:20px;
+		}
+		#dojoxLink {
+			left:460px;
+		}
+		#dijitLink {
+			left:240px;
+		}
+		.fisheyeTarget {
+			position:relative;
+			bottom:0;
+			left:0;
+			height:1px;
+			width:1px;
+			cursor:pointer;
+		}
+		.inner {
+			cursor:pointer;
+			position:absolute;
+			bottom:5px;
+			margin-left:10px;
+		}
+		.subtext {
+			visibility:hidden;
+			position:absolute;
+			bottom:27px;
+			left:10px;
+			font:8pt Arial,sans-serif;
+			color:#666;
+		}
+		.cpContent {
+			padding:15px;
+		}
+		.cp {
+			background:#bebebe;
+			color:#666;
+		}
+	</style>
+	<script type="text/javascript">
+		var djConfig = { isDebug:true, parseOnLoad:true };
+	</script>
+	<script type="text/javascript" src="../../../dojo/dojo.js"></script>
+	<script type="text/javascript" src="../FisheyeLite.js"></script>
+	<script type="text/javascript">
+		dojo.require("dojo.parser");
+		dojo.require("dijit.layout.ContentPane");
+		dojo.require("dojox.layout.RadioGroup");
+		dojo.require("dojox.widget.FisheyeLite");
+		dojo.require("dojox.fx.easing");
+		dojo.addOnLoad(function(){
+			dojo.query(".headLink").forEach(function(n){
+
+				var linkto = dojo.attr(n,"id") + "Pane";
+				
+				var widget = new dojox.widget.FisheyeLite({
+					properties: {
+						height:45
+					},
+					easeOut:dojox.fx.easing.bounceOut,
+					durationOut:700
+				},n);
+				
+				var myTarget = dojo.query(".subtext",n)[0];
+				if(myTarget){
+					
+					dojo.style(myTarget,{ opacity:"0", visibility:"visible" });
+					
+					var _anim = null;
+					dojo.connect(widget,"show",function(e){
+						_anim && _anim.status && _anim.stop();
+						_anim = dojo.fadeIn({ node: myTarget, duration:250 });
+						_anim.play();
+					});
+					dojo.connect(widget,"hide",function(e){
+						_anim && _anim.status && _anim.stop();
+						_anim = dojo.fadeOut({ node: myTarget, duration:250 });
+						_anim.play();
+					});
+				}
+				
+				dojo.connect(n,"onclick",function(e){	
+					dijit.byId("content").selectChild(dijit.byId(linkto));
+				});
+			
+			});
+			
+			dojo.query(".cp").instantiate(dijit.layout.ContentPane);			
+			dojo.query("#content").forEach(function(n){
+				new dojox.layout.RadioGroupSlide({
+					hasButtons:false
+				},n).startup();
+			});
+		});			
+	</script>
+    </head>
+    <body class="tundra">
+		
+		<div id="container">
+			<div>
+			<h2>The Dojo Toolkit:</h2>	
+			</div>
+			<div id="header">
+				<div class="headLink" id="dojoLink">
+					<div class="fisheyeTarget"></div>
+					<div class="inner">Dojo Base</div>
+					<span class="subtext">the JavaScript Toolkit</span>
+				</div>
+				<div class="headLink" id="dijitLink">
+					<div class="fisheyeTarget"></div>
+					<div class="inner">Dijit</div>
+					<span class="subtext">Themeable, extensible widget system</span>
+				</div>
+				<div class="headLink" id="dojoxLink">
+					<div class="fisheyeTarget"></div>
+					<div class="inner">DojoX</div>
+					<span class="subtext">Extensions, experiments, and extras</span>
+				</div>
+			</div>
+			<div id="content">
+				<div class="cp" id="dojoLinkPane">
+					<div class="cpContent">
+					Dojo Pane
+					</div>
+				</div>
+				<div class="cp" id="dijitLinkPane">
+					<div class="cpContent">
+					Dijit Pane
+					</div>
+				</div>
+				<div class="cp" id="dojoxLinkPane">
+					<div class="cpContent">
+					DojoX Pane
+					</div>
+				</div>
+			</div>
+		</div>
+		
+    </body>
+</html>