source: Dev/trunk/src/client/dojox/widget/tests/demo_FisheyeLite.html

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 4.0 KB
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2<html>
3    <head>
4        <title>A responsive Fisheye-like FisheyeLite widget | The Dojo Toolkit</title>
5        <style type="text/css">
6                @import "../../../dijit/themes/tundra/tundra.css";
7                @import "../../../dojox/layout/resources/RadioGroup.css";
8            body, html { margin:0; padding:0; width:100%;
9                        font-family:Arial,sans-serif;
10                }
11               
12                #content {
13                        height:300px;
14                        border-left:1px solid #333;
15                        border-right:1px solid #333;
16                }
17               
18                #container {
19                        top:150px;
20                        width:720px;
21                        margin:0 auto;
22                }
23                #header {
24                        position:relative;
25                        height:90px;
26                        border-bottom:1px solid #dedede;
27                }
28                #dojoLink, #dijitLink, #dojoxLink {
29                        background:#dedede;
30                        position:absolute;
31                        bottom:0;
32                        width:200px;
33                        padding:0;
34                        cursor:pointer;
35                }
36                #dojoLink {
37                        left:20px;
38                }
39                #dojoxLink {
40                        left:460px;
41                }
42                #dijitLink {
43                        left:240px;
44                }
45                .fisheyeTarget {
46                        position:relative;
47                        bottom:0;
48                        left:0;
49                        height:1px;
50                        width:1px;
51                        cursor:pointer;
52                }
53                .inner {
54                        cursor:pointer;
55                        position:absolute;
56                        bottom:5px;
57                        margin-left:10px;
58                }
59                .subtext {
60                        visibility:hidden;
61                        position:absolute;
62                        bottom:27px;
63                        left:10px;
64                        font:8pt Arial,sans-serif;
65                        color:#666;
66                }
67                .cpContent {
68                        padding:15px;
69                }
70                .cp {
71                        background:#bebebe;
72                        color:#666;
73                }
74        </style>
75        <script type="text/javascript">
76                var djConfig = { isDebug:true, parseOnLoad:true };
77        </script>
78        <script type="text/javascript" src="../../../dojo/dojo.js"></script>
79        <script type="text/javascript" src="../FisheyeLite.js"></script>
80        <script type="text/javascript">
81                dojo.require("dojo.parser");
82                dojo.require("dijit.layout.ContentPane");
83                dojo.require("dojox.layout.RadioGroup");
84                dojo.require("dojox.widget.FisheyeLite");
85                dojo.require("dojox.fx.easing");
86                dojo.addOnLoad(function(){
87                        dojo.query(".headLink").forEach(function(n){
88
89                                var linkto = dojo.attr(n,"id") + "Pane";
90                               
91                                var widget = new dojox.widget.FisheyeLite({
92                                        properties: {
93                                                height:45
94                                        },
95                                        easeOut:dojox.fx.easing.bounceOut,
96                                        durationOut:700
97                                },n);
98                               
99                                var myTarget = dojo.query(".subtext",n)[0];
100                                if(myTarget){
101                                       
102                                        dojo.style(myTarget,{ opacity:"0", visibility:"visible" });
103                                       
104                                        var _anim = null;
105                                        dojo.connect(widget,"show",function(e){
106                                                _anim && _anim.status && _anim.stop();
107                                                _anim = dojo.fadeIn({ node: myTarget, duration:250 });
108                                                _anim.play();
109                                        });
110                                        dojo.connect(widget,"hide",function(e){
111                                                _anim && _anim.status && _anim.stop();
112                                                _anim = dojo.fadeOut({ node: myTarget, duration:250 });
113                                                _anim.play();
114                                        });
115                                }
116                               
117                                dojo.connect(n,"onclick",function(e){   
118                                        dijit.byId("content").selectChild(dijit.byId(linkto));
119                                });
120                       
121                        });
122                       
123                        dojo.query(".cp").instantiate(dijit.layout.ContentPane);                       
124                        dojo.query("#content").forEach(function(n){
125                                new dojox.layout.RadioGroupSlide({
126                                        hasButtons:false
127                                },n).startup();
128                        });
129                });                     
130        </script>
131    </head>
132    <body class="tundra">
133               
134                <div id="container">
135                        <div>
136                        <h2>The Dojo Toolkit:</h2>     
137                        </div>
138                        <div id="header">
139                                <div class="headLink" id="dojoLink">
140                                        <div class="fisheyeTarget"></div>
141                                        <div class="inner">Dojo Base</div>
142                                        <span class="subtext">the JavaScript Toolkit</span>
143                                </div>
144                                <div class="headLink" id="dijitLink">
145                                        <div class="fisheyeTarget"></div>
146                                        <div class="inner">Dijit</div>
147                                        <span class="subtext">Themeable, extensible widget system</span>
148                                </div>
149                                <div class="headLink" id="dojoxLink">
150                                        <div class="fisheyeTarget"></div>
151                                        <div class="inner">DojoX</div>
152                                        <span class="subtext">Extensions, experiments, and extras</span>
153                                </div>
154                        </div>
155                        <div id="content">
156                                <div class="cp" id="dojoLinkPane">
157                                        <div class="cpContent">
158                                        Dojo Pane
159                                        </div>
160                                </div>
161                                <div class="cp" id="dijitLinkPane">
162                                        <div class="cpContent">
163                                        Dijit Pane
164                                        </div>
165                                </div>
166                                <div class="cp" id="dojoxLinkPane">
167                                        <div class="cpContent">
168                                        DojoX Pane
169                                        </div>
170                                </div>
171                        </div>
172                </div>
173               
174    </body>
175</html>
Note: See TracBrowser for help on using the repository browser.