diff options
Diffstat (limited to 'includes/js/dojox/widget/tests/demo_FisheyeLite.html')
| -rw-r--r-- | includes/js/dojox/widget/tests/demo_FisheyeLite.html | 175 |
1 files changed, 175 insertions, 0 deletions
diff --git a/includes/js/dojox/widget/tests/demo_FisheyeLite.html b/includes/js/dojox/widget/tests/demo_FisheyeLite.html new file mode 100644 index 0000000..e937698 --- /dev/null +++ b/includes/js/dojox/widget/tests/demo_FisheyeLite.html @@ -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>
\ No newline at end of file |