root / trunk / tests / widget / test_FisheyeList.html

Revision 6490, 3.0 kB (checked in by alex, 2 years ago)

make sure we test from-class construction

  • Property svn:eol-style set to native
Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2<html>
3<head>
4
5<title>FisheyeList Widget Demo</title>
6
7<script type="text/javascript">
8
9        var djConfig = { isDebug: true };
10
11</script>
12<script type="text/javascript" src="../../dojo.js"></script>
13<script language="JavaScript" type="text/javascript">
14        dojo.require("dojo.widget.FisheyeList");
15
16        var counter = 1;
17        function addToFirstList(){
18                var fl = dojo.widget.byType("FisheyeList")[0];
19                var item = dojo.widget.createWidget("FisheyeListItem", {
20                                caption: "Dynamically Added "+counter,
21                                iconSrc: "images/fisheye_"+counter+".png"
22                        }
23                );
24                counter++;
25                fl.addChild(item);
26        }
27</script>
28</head>
29<body style="padding-left: 150px;">
30
31<p>HTML before</p>
32<p>HTML before</p>
33<button onclick="addToFirstList();">Add a new item to the first list</button>
34<p>HTML before</p>
35<p>Liberal trigger: move the mouse anywhere near the menu and it will start to expand:</p>
36<div class="dojo-FisheyeList"
37        itemWidth="40" itemHeight="40"
38        itemMaxWidth="150" itemMaxHeight="150"
39        orientation="horizontal"
40        effectUnits="2"
41        itemPadding="10"
42        attachEdge="center"
43        labelEdge="bottom"
44        id="topList"
45>
46
47        <div dojoType="FisheyeListItem"
48                id="item1"
49                onclick="alert('click on' + this.caption + '(from widget id ' + this.widgetId + ')!');"
50                caption="Item 1"
51                iconsrc="images/fisheye_1.png">
52        </div>
53
54        <div dojoType="FisheyeListItem"
55                caption="Item 2"
56                iconsrc="images/fisheye_2.png">
57        </div>
58
59        <div dojoType="FisheyeListItem"
60                caption="Item 3"
61                iconsrc="images/fisheye_3.png">
62        </div>
63
64        <div dojoType="FisheyeListItem"
65                iconsrc="images/fisheye_4.png">
66        </div>
67
68        <div dojoType="FisheyeListItem"
69                caption="Really Long Item Label"
70                iconsrc="images/fisheye_3.png">
71        </div>
72
73        <div dojoType="FisheyeListItem"
74                iconsrc="images/fisheye_2.png">
75        </div>
76
77        <div dojoType="FisheyeListItem"
78                iconsrc="images/fisheye_1.png">
79        </div>
80</div>
81
82<p>HTML after</p>
83<p>HTML after</p>
84<p>HTML after</p>
85<p>This was has strict triggering, so you actually have to mouse over the menu to make it start moving:</p>
86<div dojoType="FisheyeList"
87        itemWidth="40" itemHeight="40"
88        itemMaxWidth="150" itemMaxHeight="150"
89        orientation="horizontal"
90        effectUnits="2"
91        itemPadding="10"
92        attachEdge="center"
93        labelEdge="bottom"
94        conservativeTrigger="true"
95>
96
97        <div dojoType="FisheyeListItem"
98                id="item1b"
99                onclick="alert('click on' + this.caption + '(from widget id ' + this.widgetId + ')!');"
100                caption="Item 1"
101                iconsrc="images/fisheye_1.png">
102        </div>
103
104        <div dojoType="FisheyeListItem"
105                caption="Item 2"
106                iconsrc="images/fisheye_2.png">
107        </div>
108
109        <div dojoType="FisheyeListItem"
110                caption="Item 3"
111                iconsrc="images/fisheye_3.png">
112        </div>
113
114        <div dojoType="FisheyeListItem"
115                iconsrc="images/fisheye_4.png">
116        </div>
117
118        <div dojoType="FisheyeListItem"
119                caption="Really Long Item Label"
120                iconsrc="images/fisheye_3.png">
121        </div>
122
123        <div dojoType="FisheyeListItem"
124                iconsrc="images/fisheye_2.png">
125        </div>
126
127        <div dojoType="FisheyeListItem"
128                iconsrc="images/fisheye_1.png">
129        </div>
130</div>
131</body>
132</html>
Note: See TracBrowser for help on using the browser.