You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
175 lines
4.0 KiB
175 lines
4.0 KiB
<!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> |