+++ /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