175 lines
4 KiB
HTML
175 lines
4 KiB
HTML
|
<!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>
|