dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
175 lines (163 loc) • 4.12 kB
HTML
<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>