--- /dev/null
+<!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>
\ No newline at end of file
projects / eow / blobdiff