258 lines
9.9 KiB
HTML
258 lines
9.9 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");
|
||
|
|
dojo.addOnLoad(function(){
|
||
|
|
|
||
|
|
// turn li's in this page into fisheye items, presumtiously:
|
||
|
|
dojo.query("li.bounce").forEach(function(n){
|
||
|
|
new dojox.widget.FisheyeLite({ },n);
|
||
|
|
});
|
||
|
|
|
||
|
|
dojo.query("span.line").forEach(function(n){
|
||
|
|
// make a widget from each of the lines in the lineHeightTest
|
||
|
|
new dojox.widget.FisheyeLite({
|
||
|
|
properties: {
|
||
|
|
fontSize:1.75
|
||
|
|
},
|
||
|
|
easeOut: dojox.fx.easing.backInOut,
|
||
|
|
durationOut: 500
|
||
|
|
},n);
|
||
|
|
}).connect("onclick",function(e){
|
||
|
|
// you can still access the onclick of the real node
|
||
|
|
alert(e.target.innerHTML);
|
||
|
|
});
|
||
|
|
|
||
|
|
dojo.query("a").forEach(function(n){
|
||
|
|
// all the anchorhs get a little letter spacing love
|
||
|
|
new dojox.widget.FisheyeLite({
|
||
|
|
properties:{
|
||
|
|
fontSize:1.15,
|
||
|
|
letterSpacing:2.85
|
||
|
|
}
|
||
|
|
},n);
|
||
|
|
// stop anchors from doing _anything_
|
||
|
|
}).connect("onclick",dojo,"stopEvent");
|
||
|
|
|
||
|
|
dojo.query(".imgBounce").forEach(function(n){
|
||
|
|
// all the images need a width and a height (well, not need,
|
||
|
|
// but to scale you do)
|
||
|
|
new dojox.widget.FisheyeLite({
|
||
|
|
properties: {
|
||
|
|
height:1.75,
|
||
|
|
width:1.75
|
||
|
|
}
|
||
|
|
},n);
|
||
|
|
});
|
||
|
|
|
||
|
|
//
|
||
|
|
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);
|
||
|
|
|
||
|
|
});
|
||
|
|
</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>
|
||
|
|
|
||
|
|
<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>the end</p>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|