Subversion Repositories Applications.papyrus

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
2150 mathias 1 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 
		"http://www.w3.org/TR/html4/strict.dtd">
3 
<html>
4 
<head>
5 
 
6 
	<title>Menu System Test</title>
7 
 
8 
	<style type="text/css">
9 
		@import "../../dojo/resources/dojo.css";
10 
		@import "css/dijitTests.css";
11 
	</style>
12 
 
13 
 
14 
	<script type="text/javascript" src="../../dojo/dojo.js"
15 
		djConfig="parseOnLoad: true, isDebug: true"></script>
16 
	<script type="text/javascript" src="_testCommon.js"></script>
17 
 
18 
	<script language="JavaScript" type="text/javascript">
19 
		dojo.require("dijit.Menu");
20 
		dojo.require("dijit.ColorPalette");
21 
		dojo.require("dijit._Calendar");
22 
		dojo.require("dojo.parser");	// scan page for widgets and instantiate them
23 
	</script>
24 
 
25 
    <script language="Javascript" type="text/javascript">
26 
        dojo.addOnLoad(function() {
27 
            // create a menu programmatically
28 
            function fClick() {alert("clicked!")};
29 
 
30 
            var pMenu = new dijit.Menu({targetNodeIds:["prog_menu"], id:"progMenu"});
31 
            pMenu.addChild(new dijit.MenuItem({label:"Programmatic Context Menu", disabled:true}));
32 
            pMenu.addChild(new dijit.MenuSeparator());
33 
            pMenu.addChild(new dijit.MenuItem({label:"Simple menu item", onClick:fClick}));
34 
            pMenu.addChild(new dijit.MenuItem({label:"Another menu item", onClick:fClick}));
35 
            pMenu.addChild(new dijit.MenuItem({label:"With an icon", iconClass:"dijitEditorIcon dijitEditorIconCut", onClick:fClick}));
36 
            var mItem = new dijit.MenuItem({label:"dojo.event clicking"});
37 
            dojo.connect(mItem, "onClick", function(){alert("click! handler created via dojo.connect()")});
38 
            pMenu.addChild(mItem);
39 
 
40 
            var pSubMenu = new dijit.Menu({parentMenu:pMenu, id:"progSubMenu"});
41 
            pSubMenu.addChild(new dijit.MenuItem({label:"Submenu item", onClick:fClick}));
42 
            pSubMenu.addChild(new dijit.MenuItem({label:"Submenu item", onClick:fClick}));
43 
            pMenu.addChild(new dijit.PopupMenuItem({label:"Submenu", popup:pSubMenu, id:"progPopupMenuItem"}));
44 
 
45 
            pMenu.startup();
46 
        });
47 
    </script>
48 
</head>
49 
<body>
50 
 
51 
<div dojoType="dijit.Menu" id="submenu1" contextMenuForWindow="true" style="display: none;">
52 
	<div dojoType="dijit.MenuItem" onClick="alert('Hello world');">Enabled Item</div>
53 
	<div dojoType="dijit.MenuItem" disabled="true">Disabled Item</div>
54 
	<div dojoType="dijit.MenuSeparator"></div>
55 
	<div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCut"
56 
		onClick="alert('not actually cutting anything, just a test!')">Cut</div>
57 
	<div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCopy"
58 
		onClick="alert('not actually copying anything, just a test!')">Copy</div>
59 
	<div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconPaste"
60 
		onClick="alert('not actually pasting anything, just a test!')">Paste</div>
61 
	<div dojoType="dijit.MenuSeparator"></div>
62 
	<div dojoType="dijit.PopupMenuItem">
63 
		<span>Enabled Submenu</span>
64 
		<div dojoType="dijit.Menu" id="submenu2">
65 
			<div dojoType="dijit.MenuItem" onClick="alert('Submenu 1!')">Submenu Item One</div>
66 
			<div dojoType="dijit.MenuItem" onClick="alert('Submenu 2!')">Submenu Item Two</div>
67 
			<div dojoType="dijit.PopupMenuItem">
68 
				<span>Deeper Submenu</span>
69 
				<div dojoType="dijit.Menu" id="submenu4"">
70 
					<div dojoType="dijit.MenuItem" onClick="alert('Sub-submenu 1!')">Sub-sub-menu Item One</div>
71 
					<div dojoType="dijit.MenuItem" onClick="alert('Sub-submenu 2!')">Sub-sub-menu Item Two</div>
72 
				</div>
73 
			</div>
74 
		</div>
75 
	</div>
76 
	<div dojoType="dijit.PopupMenuItem" disabled="true">
77 
		<span>Disabled Submenu</span>
78 
		<div dojoType="dijit.Menu" id="submenu3" style="display: none;">
79 
			<div dojoType="dijit.MenuItem" onClick="alert('Submenu 1!')">Submenu Item One</div>
80 
			<div dojoType="dijit.MenuItem" onClick="alert('Submenu 2!')">Submenu Item Two</div>
81 
		</div>
82 
	</div>
83 
	<div dojoType="dijit.PopupMenuItem">
84 
		<span>Different popup</span>
85 
		<div dojoType="dijit.ColorPalette"></div>
86 
	</div>
87 
</div>
88 
 
89 
 
90 
<!--
91 
<div dojoType="dijit.MenuBar">
92 
	<div dojoType="dijit.MenuBarItem" submenuId="submenu1">File</div>
93 
	<div dojoType="dijit.MenuBarItem" submenuId="submenu">Edit</div>
94 
	<div dojoType="dijit.MenuBarItem" disabled="true">View</div>
95 
	<div dojoType="dijit.MenuBarItem" submenuId="submenu">Help</div>
96 
	<div dojoType="dijit.MenuBarItem" onClick="alert('you clicked a menu bar button');">Click Me</div>
97 
</div>
98 
-->
99 
<div style="padding: 1em">
100 
	<h1 class="testTitle">Dijit Menu System Test</h1>
101 
 
102 
	<h3>Form</h3>
103 
 
104 
	<form>
105 
		<input id=input1 value="top-left">
106 
		<p style="text-align:right"><input id=input2 value="top-right"></p>
107 
		<textarea id=textarea>hello there!</textarea><br>
108 
		<select>
109 
			<option>check if i</option>
110 
			<option>bleed through</option>
111 
			<option>on IE6</option>
112 
		</select>
113 
		<button id=button>push me</button>
114 
 
115 
        <div id="prog_menu" style="border:1px solid blue; padding:10px; margin:20px 0;">
116 
            This div has a programmatic context menu on it that's different to the page menu.
117 
        </div>
118 
 
119 
		<div style="height:500px"></div>
120 
		<p>(this space intentionally left blank to aid testing with controls
121 
		at the bottom of the browser window)</p>
122 
		<div style="height:500px"></div>
123 
		<input id=input3 value="bottom-left">
124 
		<p style="text-align:right"><input id=input4 value="bottom-right"></p>
125 
	</form>
126 
 
127 
	<p>See also: <a href="form/test_Button.html">form/test_Button</a>
128 
	(PopupMenu is used with DropDownButton and ComboButton)</p>
129 
 
130 
	<h3>Mouse opening tests</h3>
131 
 
132 
	<ul>
133 
		<li>Right click on the client area of the page (ctrl-click for Macintosh). Menu should open.</li>
134 
		<li>Right click on each of the form controls above. Menu should open.</li>
135 
		<li>Right click near the righthand window border. Menu should open to the left of the pointer.</li>
136 
		<li>Right click near the bottom window border. Menu should open above the pointer.</li>
137 
	</ul>
138 
 
139 
 
140 
	<h3>Mouse hover tests</h3>
141 
 
142 
	<ul>
143 
		<li>Hover over the first item with the pointer. Item should highlight and get focus.</li>
144 
		<li>Hover over the second (disabled) item. Item should highlight and get focus.</li>
145 
		<li>Seperator items should not highlight on hover - no items should highlight in this case.</li>
146 
	</ul>
147 
 
148 
 
149 
	<h3>Mouse click tests</h3>
150 
 
151 
	<ul>
152 
		<li>Click on the first menu item. Alert should open with the message "Hello world". The menu should dissapear.</li>
153 
		<li>Click on the second menu item (disabled). Should not do anything - focus should remain on the disabled item.</li>
154 
		<li>Click anywhere outside the menu. Menu should close. Focus will be set by the browser based on where the user clicks.</li>
155 
	</ul>
156 
 
157 
 
158 
	<h3>Mouse submenu tests</h3>
159 
 
160 
	<ul>
161 
		<li>Hover over the "Enabled Submenu" item. Item should highlight and then pop open a submenu after a short (500ms) delay.</li>
162 
		<li>Hover over any of the other menu items. Submenu should close immediately and deselect the submenu parent item. The newly hovered item should become selected.</li>
163 
		<li>Hover over the "Disabled Submenu" item. Item should highlight, but no submenu should appear.</li>
164 
		<li>Clicking on the "Enabled Submenu" item before the submenu has opened (you'll have to be quick!) should immediatley open the submenu.</li>
165 
		<li>Clicking on the "Enabled Submenu" item <i>after</i> the submenu has opened should have no effect - the item is still selected and the submenu still open.</li>
166 
		<li>Hover over submenu item 1. Should select it - the parent menu item should stay selected also.</li>
167 
		<li>Hover over submenu item 2. Should select it - the parent menu item should stay selected also.</li>
168 
	</ul>
169 
 
170 
 
171 
	<h3>Keyboard opening tests</h3>
172 
 
173 
	<ul>
174 
		<li>On Windows: press shift-f10 with focus on any of the form controls. Should open the menu.</li>
175 
		<li>On Windows: press the context menu key (located on the right of the space bar on North American keyboards) with focus on any of the form controls. Should open the menu.</li>
176 
		<li>On Firefox on the Mac: press ctrl-space with focus on any of the form controls. Should open the menu.</li>
177 
	</ul>
178 
 
179 
 
180 
	<h3>Keyboard closing tests</h3>
181 
 
182 
	<ul>
183 
		<li>Open the menu.</li>
184 
		<li>Press tab. Should close the menu and return focus to where it was before the menu was opened.</li>
185 
		<li>Open the menu.</li>
186 
		<li>Press escape. Should close the menu and return focus to where it was before the menu was opened.</li>
187 
	</ul>
188 
 
189 
 
190 
	<h3>Keyboard navigation tests</h3>
191 
 
192 
	<ul>
193 
		<li>Open the menu.</li>
194 
		<li>Pressing up or down arrow should cycle focus through the items in that menu.</li>
195 
		<li>Pressing enter or space should invoke the menu item.</li>
196 
		<li>Disabled items receive focus but no action is taken upon pressing enter or space.</li>
197 
	</ul>
198 
 
199 
 
200 
	<h3>Keyboard submenu tests</h3>
201 
 
202 
	<ul>
203 
		<li>Open the menu.</li>
204 
		<li>The first item should become selected.</li>
205 
		<li>Press the right arrow key. Nothing should happen.</li>
206 
		<li>Press the left arrow key. Nothing should happen.</li>
207 
		<li>Press the down arrow until "Enabled Submenu" is selected. The submenu should not appear.</li>
208 
		<li>Press enter. The submenu should appear with the first item selected.</li>
209 
		<li>Press escape. The submenu should vanish - "Enabled Submenu" should remain selected.</li>
210 
		<li>Press the right arrow key. The submenu should appear with the first item selected.</li>
211 
		<li>Press the right arrow key. Nothing should happen.</li>
212 
		<li>Press the left arrow key. The submenu should close - "Enabled Submenu" should remain selected.</li>
213 
		<li>Press the left arrow key. The menu should <i>not</i> close and "Enabled Submenu" should remain selected.</li>
214 
		<li>Press escape. The menu should close and focus should be returned to where it was before the menu was opened.</li>
215 
	</ul>
216 
 
217 
</div>
218 
 
219 
</body>
220 
</html>