git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dijit/tests/test_Menu.html

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