328 lines
12 KiB
HTML
328 lines
12 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">
|
|
|
|
body, html { margin:0; padding:0; width:100%;
|
|
font-family:Arial,sans-serif;
|
|
}
|
|
a { letter-spacing:0.1em; }
|
|
#list {
|
|
position:absolute; left:0px; cursor:pointer;
|
|
}
|
|
#container { margin:0 auto; width:400px; }
|
|
#list ul {
|
|
width:175px;
|
|
list-style-type:none;
|
|
}
|
|
.fisheyeTarget {
|
|
font-weight:bold;
|
|
font-size:19px;
|
|
}
|
|
#container li {
|
|
text-align:right;
|
|
padding-bottom:12px;
|
|
}
|
|
.ilk {
|
|
border-top:1px solid #999;
|
|
color:#666;
|
|
font:14px Arial,sans-serif;
|
|
}
|
|
#inlineList li {
|
|
margin-top:20px;
|
|
margin-bottom:20px;
|
|
padding:20px;
|
|
border:2px solid #ededed;
|
|
display:inline;
|
|
background:#fff;
|
|
}
|
|
|
|
#lineHeightTest {
|
|
text-align:center;
|
|
position:relative;
|
|
overflow:visible;
|
|
}
|
|
span.line {
|
|
margin:10px;
|
|
padding:3px;
|
|
line-height:22px;
|
|
font:10px Arial,sans-serif;
|
|
display:block;
|
|
}
|
|
.imgBounce {
|
|
padding:0;
|
|
width:35px; height:35px;
|
|
vertical-align:middle;
|
|
position:relative;
|
|
top:0;
|
|
}
|
|
</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("dojox.widget.FisheyeLite");
|
|
|
|
var beenDestroyed = false;
|
|
var hasInit = false;
|
|
var init = function(e){
|
|
|
|
if(e && !beenDestroyed){ return; }
|
|
e && e.preventDefault();
|
|
|
|
// turn li's in this page into fisheye items, presumtiously:
|
|
dojo.query("li.bounce").instantiate(dojox.widget.FisheyeLite,{});
|
|
|
|
var l = dojo.query("span.line")
|
|
.instantiate(dojox.widget.FisheyeLite,{
|
|
// make a widget from each of the lines in the lineHeightTest
|
|
properties: {
|
|
fontSize:1.75
|
|
},
|
|
easeOut: dojo.fx.easing.backInOut,
|
|
durationOut: 500
|
|
});
|
|
|
|
if(!hasInit){
|
|
l.connect("onclick",function(e){
|
|
// you can still access the onclick of the real node
|
|
alert(e.target.innerHTML);
|
|
});
|
|
}
|
|
|
|
var lm = dojo.query("a").instantiate(dojox.widget.FisheyeLite,{
|
|
properties:{
|
|
fontSize:1.15,
|
|
letterSpacing:2.85
|
|
}
|
|
});
|
|
if(!hasInit){
|
|
// stop anchors from doing _anything_
|
|
lm.connect("onclick",dojo,"stopEvent");
|
|
}
|
|
|
|
dojo.query(".imgBounce").instantiate(dojox.widget.FisheyeLite,{
|
|
// all the images need a width and a height (well, not need,
|
|
// but to scale you do)
|
|
properties: {
|
|
height:1.75,
|
|
width:1.75
|
|
}
|
|
});
|
|
|
|
// show the new non-numeric multiplier version of fisheyelite
|
|
dojo.query(".advancedProps").instantiate(dojox.widget.FisheyeLite,{
|
|
properties:{
|
|
height: {
|
|
end: 100
|
|
}
|
|
}
|
|
})
|
|
|
|
//
|
|
var vv = 0;
|
|
var r = dijit.registry.byClass("dojox.widget.FisheyeLite")._hash;
|
|
for(var l in r){
|
|
vv++;
|
|
}
|
|
|
|
// a few in markup, mostly from the query()'ies:
|
|
console.log("fisheyes on this page: ", vv);
|
|
|
|
beenDestroyed = false;
|
|
hasInit = true;
|
|
};
|
|
dojo.addOnLoad(init);
|
|
|
|
dojo.addOnLoad(function(){
|
|
dojo.query("#restore").connect("onclick",init);
|
|
dojo.query("#destroy").connect("onclick",destroyAll);
|
|
});
|
|
|
|
var destroyAll = function(e){
|
|
e && e.preventDefault();
|
|
if(confirm("really?")){
|
|
dijit.registry.filter(function(w){
|
|
return w && w.declaredClass == "dojox.widget.FisheyeLite";
|
|
}).forEach(function(w){
|
|
w.destroy(true);
|
|
});
|
|
beenDestroyed = true;
|
|
}
|
|
};
|
|
|
|
</script>
|
|
</head>
|
|
<body class="tundra">
|
|
<div id="container">
|
|
|
|
<div id="list">
|
|
<ul>
|
|
<li class="bounce"><span class="fisheyeTarget">Dojo</span><br><div class="ilk">the javascript toolkit</div></li>
|
|
<li class="bounce"><span class="fisheyeTarget">Dijit</span><br><div class="ilk">UI y mas - themeable, plugable.</div></li>
|
|
<li class="bounce"><span class="fisheyeTarget">DojoX</span><br><div class="ilk">extensions, experimentals, extras. innovation.</div></li>
|
|
<li class="bounce"><span class="fisheyeTarget">Dojo</span><br><div class="ilk">the javascript toolkit</div></li>
|
|
<li class="bounce"><span class="fisheyeTarget">Dijit</span><br><div class="ilk">UI y mas - themeable, plugable.</div></li>
|
|
<li class="bounce"><span class="fisheyeTarget">DojoX</span><br><div class="ilk">extensions, experimentals, extras. innovation.</div></li>
|
|
<li class="bounce"><span class="fisheyeTarget">Dojo</span><br><div class="ilk">the javascript toolkit</div></li>
|
|
<li class="bounce"><span class="fisheyeTarget">Dijit</span><br><div class="ilk">UI y mas - themeable, plugable.</div></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<h2>A paragraph: (with links)</h2>
|
|
|
|
<p>
|
|
Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Aenean
|
|
semper sagittis velit. Cras in mi. Duis porta mauris ut ligula.
|
|
Proin porta rutrum lacus. <a href="#">Etiam</a> consequat scelerisque quam. Nulla
|
|
facilisi. Maecenas luctus venenatis nulla. In sit amet dui non mi
|
|
semper iaculis. Sed molestie tortor at ipsum. <a href="#">Morbi</a> dictum rutrum
|
|
magna. Sed vitae risus.
|
|
</p>
|
|
|
|
<h3>read the fine print:</h3>
|
|
|
|
<p>
|
|
<input type="button" onclick="dijit.byId('l1').show()" value="show first" />
|
|
<input type="button" onclick="dijit.byId('l1').hide()" value="hide first" />
|
|
<input type="button" onclick="dijit.byId('l3').show()" value="show third" />
|
|
<input type="button" onclick="dijit.byId('l3').hide()" value="hide third" />
|
|
</p>
|
|
|
|
<div id="lineHeightTest">
|
|
<span id="l1" class="line">Aliquam vitae enim. Duis scelerisque metus auctor est venenatis</span>
|
|
<span class="line">imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer</span>
|
|
<span id="l3" class="line">lorem nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean</span>
|
|
<span class="line">id mi in massa bibendum suscipit. Integer eros. Nullam suscipit</span>
|
|
<span id="l5" class="line">mauris. In pellentesque. Mauris ipsum est, pharetra semper,</span>
|
|
<span class="line">pharetra in, viverra quis, tellus. Etiam purus.</span>
|
|
</div>
|
|
|
|
<div>
|
|
<div dojoType="dojox.widget.FisheyeLite" properties="{ fontSize:1.25 }" style="padding:3px"
|
|
><a id='destroy' href="#" class="fisheyeTarget">test destroy()</a></div>
|
|
|
|
<div dojoType="dojox.widget.FisheyeLite" properties="{ fontSize:1.25 }" style="padding:3px"
|
|
><a id='restore' href="#" class="fisheyeTarget">restore</a></div>
|
|
</div>
|
|
|
|
<p>
|
|
Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Aenean
|
|
semper sagittis velit. Cras in mi. Duis porta mauris ut ligula.
|
|
Proin porta rutrum lacus. <a href="#">Etiam</a> consequat scelerisque quam. Nulla
|
|
facilisi. Maecenas luctus venenatis nulla. In sit amet dui non mi
|
|
semper iaculis. Sed molestie tortor at ipsum. <a href="#">Morbi</a> dictum rutrum
|
|
magna. Sed vitae risus.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Aenean
|
|
semper sagittis velit. Cras in mi. Duis porta mauris ut ligula.
|
|
Proin porta rutrum lacus. <a href="#">Etiam</a> consequat scelerisque quam. Nulla
|
|
facilisi. Maecenas luctus venenatis nulla. In sit amet dui non mi
|
|
semper iaculis. Sed molestie tortor at ipsum. <a href="#">Morbi</a> dictum rutrum
|
|
magna. Sed vitae risus.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Aenean
|
|
semper sagittis velit. Cras in mi. Duis porta mauris ut ligula.
|
|
Proin porta rutrum lacus. <a href="#">Etiam</a> consequat scelerisque quam. Nulla
|
|
facilisi. Maecenas luctus venenatis nulla. In sit amet dui non mi
|
|
semper iaculis. Sed molestie tortor at ipsum. <a href="#">Morbi</a> dictum rutrum
|
|
magna. Sed vitae risus.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Aenean
|
|
semper sagittis velit. Cras in mi. Duis porta mauris ut ligula.
|
|
Proin porta rutrum lacus. <a href="#">Etiam</a> consequat scelerisque quam. Nulla
|
|
facilisi. Maecenas luctus venenatis nulla. In sit amet dui non mi
|
|
semper iaculis. Sed molestie tortor at ipsum.
|
|
</p>
|
|
|
|
<h3>another list: (no target, or ilk)</h3>
|
|
<div style="height:125px; position:relative;">
|
|
<div style="position:absolute; width:600px;">
|
|
<ul id="inlineList">
|
|
<li class="bounce">Foo</li>
|
|
<li class="bounce">Bar</li>
|
|
<li class="bounce">Baz</li>
|
|
<li class="bounce">Bam</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>oh right, Images:</h3>
|
|
|
|
<div style="position:relative; height:60px;"><div style="position:absolute">
|
|
<img src="images/fisheye_1.png" class="imgBounce" onClick="alert('clicked img 1')"/>
|
|
<img src="images/fisheye_2.png" class="imgBounce" onClick="alert('clicked img 2')"/>
|
|
<img src="images/fisheye_3.png" class="imgBounce" onClick="alert('clicked img 3')"/>
|
|
<img src="images/fisheye_4.png" class="imgBounce" />
|
|
<img src="images/fisheye_3.png" class="imgBounce" onClick="alert('clicked img 3')"/>
|
|
<img src="images/fisheye_2.png" class="imgBounce" onClick="alert('clicked img 2')"/>
|
|
<img src="images/fisheye_1.png" class="imgBounce" onClick="alert('clicked img 1')"/>
|
|
</div></div>
|
|
|
|
<div style="position:relative; float:left; width:1px; left:-75px; top:0;">
|
|
<img src="images/fisheye_1.png" class="imgBounce" onClick="alert('clicked img 1')"/><br>
|
|
<img src="images/fisheye_2.png" class="imgBounce" onClick="alert('clicked img 2')"/><br>
|
|
<img src="images/fisheye_3.png" class="imgBounce" onClick="alert('clicked img 3')"/><br>
|
|
<img src="images/fisheye_4.png" class="imgBounce" /><br>
|
|
<img src="images/fisheye_3.png" class="imgBounce" onClick="alert('clicked img 3')"/><br>
|
|
<img src="images/fisheye_2.png" class="imgBounce" onClick="alert('clicked img 2')"/><br>
|
|
<img src="images/fisheye_1.png" class="imgBounce" onClick="alert('clicked img 1')"/>
|
|
</div>
|
|
|
|
<p dojoType="dojox.widget.FisheyeLite"
|
|
properties="{ padding:1.55 }"
|
|
style="padding:12px; text-align:justify;">
|
|
|
|
Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
|
|
imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer
|
|
lorem nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean
|
|
id mi in massa bibendum suscipit. Integer eros. Nullam suscipit
|
|
mauris. In pellentesque. Mauris ipsum est, pharetra semper,
|
|
pharetra in, viverra quis, tellus. Etiam purus. Quisque egestas,
|
|
tortor ac cursus lacinia, felis leo adipiscing nisi, et rhoncus
|
|
elit dolor eget eros. Fusce ut quam. Suspendisse eleifend leo vitae
|
|
ligula. Nulla facilisi. Nulla rutrum, erat vitae lacinia dictum,
|
|
pede purus imperdiet lacus, ut semper velit ante id metus. Praesent
|
|
massa dolor, porttitor sed, pulvinar in, consequat ut, leo. Nullam
|
|
nec est. Aenean id risus blandit tortor pharetra congue.
|
|
Suspendisse pulvinar.
|
|
</p>
|
|
|
|
<p class="advancedProps" style="height:25px; background:#000">Lorem</p>
|
|
<p class="advancedPropsToo" dojoType="dojox.widget.FisheyeLite"
|
|
style="height:25px; background:#000"
|
|
properties="{ height:{ end: 150 } }"
|
|
easeIn="dojo._defaultEasing"
|
|
easeOut="dojo._defaultEasing"
|
|
durationOut="175"
|
|
>Lorem</p>
|
|
|
|
<p>the end</p>
|
|
|
|
<p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
|
|
imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer
|
|
lorem nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean
|
|
id mi in massa bibendum suscipit. Integer eros. Nullam suscipit
|
|
mauris. In pellentesque. Mauris ipsum est, pharetra semper,
|
|
pharetra in, viverra quis, tellus. Etiam purus. Quisque egestas,
|
|
tortor ac cursus lacinia, felis leo adipiscing nisi, et rhoncus
|
|
elit dolor eget eros. Fusce ut quam. Suspendisse eleifend leo vitae
|
|
ligula. Nulla facilisi. Nulla rutrum, erat vitae lacinia dictum,
|
|
pede purus imperdiet lacus, ut semper velit ante id metus. Praesent
|
|
massa dolor, porttitor sed, pulvinar in, consequat ut, leo. Nullam
|
|
nec est. Aenean id risus blandit tortor pharetra congue.
|
|
Suspendisse pulvinar.
|
|
</p>
|
|
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|