dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
150 lines (130 loc) • 3.79 kB
HTML
<html>
<head>
<title>FisheyeList Widget Dojo Tests</title>
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/themes/tundra/tundra.css";
@import "../../../dijit/themes/dijit.css";
@import "../../../dijit/tests/css/dijitTests.css";
@import "../FisheyeList/FisheyeList.css";
</style>
<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug:true, parseOnLoad: true"></script>
<script type="text/javascript">
require([
"dojox/widget/FisheyeList",
"dojox/widget/FisheyeListItem",
"dijit/registry",
"dojo/parser",
"dojo/ready"
], function(FisheyeList, FisheyeListItem, registry, parser, ready){
ready(function(){
fish1 = registry.byId("fisheye1");
fish2 = registry.byId("fisheye2");
});
var counter = 1;
addToFirstList = function(){
var item = new FisheyeListItem({
label:"Dynamically Added "+counter,
iconSrc: "images/fisheye_"+counter+".png"
});
counter++;
if(counter>4){counter=1;}
fish1.addChild(item);
fish1.startup();
item.startup();
}
});
</script>
</head>
<body class="tundra">
<h1>dojox.widget.FisheyeList test</h1>
<p>HTML before</p>
<button onclick="addToFirstList();">Add a new item to the first list</button>
<p>HTML before</p>
<p>HTML before</p>
<p>Liberal trigger: move the mouse anywhere near the menu and it will start to expand:</p>
<div dojoType="dojox.widget.FisheyeList"
itemWidth="40" itemHeight="40"
itemMaxWidth="150" itemMaxHeight="150"
orientation="horizontal"
effectUnits="2"
itemPadding="10"
attachEdge="center"
labelEdge="bottom"
id="fisheye1"
>
<div dojoType="dojox.widget.FisheyeListItem"
id="item1"
onClick="alert('click on ' + this.label + '(from widget id ' + this.id + ')!');"
label="Item 1"
iconSrc="images/fisheye_1.png">
</div>
<div dojoType="dojox.widget.FisheyeListItem"
label="Item 2"
iconSrc="images/fisheye_2.png">
</div>
<div dojoType="dojox.widget.FisheyeListItem"
label="Item 3"
iconSrc="images/fisheye_3.png">
</div>
<div dojoType="dojox.widget.FisheyeListItem"
iconSrc="images/fisheye_4.png">
</div>
<div dojoType="dojox.widget.FisheyeListItem"
label="Really Long Item Label"
iconSrc="images/fisheye_3.png">
</div>
<div dojoType="dojox.widget.FisheyeListItem"
iconSrc="images/fisheye_2.png">
</div>
<div dojoType="dojox.widget.FisheyeListItem"
iconSrc="images/fisheye_1.png">
</div>
</div>
<p>HTML after</p>
<p>HTML after</p>
<p>HTML after</p>
<p>This one has strict triggering, so you actually have to mouse over the menu to make it start moving:</p>
<div dojoType="dojox.widget.FisheyeList"
itemWidth="40" itemHeight="40"
itemMaxWidth="150" itemMaxHeight="150"
orientation="horizontal"
effectUnits="2"
itemPadding="10"
attachEdge="center"
labelEdge="bottom"
conservativeTrigger="true"
id="fisheye2"
>
<div dojoType="dojox.widget.FisheyeListItem"
id="item1b"
onClick="alert('click on ' + this.label + '(from widget id ' + this.id + ')!');"
label="Item 1"
iconSrc="images/fisheye_1.png">
</div>
<div dojoType="dojox.widget.FisheyeListItem"
label="Item 2"
iconSrc="images/fisheye_2.png">
</div>
<div dojoType="dojox.widget.FisheyeListItem"
label="Item 3"
iconSrc="images/fisheye_3.png">
</div>
<div dojoType="dojox.widget.FisheyeListItem"
iconSrc="images/fisheye_4.png">
</div>
<div dojoType="dojox.widget.FisheyeListItem"
label="Really Long Item Label"
iconSrc="images/fisheye_3.png">
</div>
<div dojoType="dojox.widget.FisheyeListItem"
iconSrc="images/fisheye_2.png">
</div>
<div dojoType="dojox.widget.FisheyeListItem"
iconSrc="images/fisheye_1.png">
</div>
</div>
</body>
</html>