MenuItem.js 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  1. require({cache:{
  2. 'url:dijit/templates/MenuItem.html':"<tr class=\"dijitReset dijitMenuItem\" data-dojo-attach-point=\"focusNode\" role=\"menuitem\" tabIndex=\"-1\"\n\t\tdata-dojo-attach-event=\"onmouseenter:_onHover,onmouseleave:_onUnhover,ondijitclick:_onClick\">\n\t<td class=\"dijitReset dijitMenuItemIconCell\" role=\"presentation\">\n\t\t<img src=\"${_blankGif}\" alt=\"\" class=\"dijitIcon dijitMenuItemIcon\" data-dojo-attach-point=\"iconNode\"/>\n\t</td>\n\t<td class=\"dijitReset dijitMenuItemLabel\" colspan=\"2\" data-dojo-attach-point=\"containerNode\"></td>\n\t<td class=\"dijitReset dijitMenuItemAccelKey\" style=\"display: none\" data-dojo-attach-point=\"accelKeyNode\"></td>\n\t<td class=\"dijitReset dijitMenuArrowCell\" role=\"presentation\">\n\t\t<div data-dojo-attach-point=\"arrowWrapper\" style=\"visibility: hidden\">\n\t\t\t<img src=\"${_blankGif}\" alt=\"\" class=\"dijitMenuExpand\"/>\n\t\t\t<span class=\"dijitMenuExpandA11y\">+</span>\n\t\t</div>\n\t</td>\n</tr>\n"}});
  3. define("dijit/MenuItem", [
  4. "dojo/_base/declare", // declare
  5. "dojo/dom", // dom.setSelectable
  6. "dojo/dom-attr", // domAttr.set
  7. "dojo/dom-class", // domClass.toggle
  8. "dojo/_base/event", // event.stop
  9. "dojo/_base/kernel", // kernel.deprecated
  10. "dojo/_base/sniff", // has("ie")
  11. "./_Widget",
  12. "./_TemplatedMixin",
  13. "./_Contained",
  14. "./_CssStateMixin",
  15. "dojo/text!./templates/MenuItem.html"
  16. ], function(declare, dom, domAttr, domClass, event, kernel, has,
  17. _Widget, _TemplatedMixin, _Contained, _CssStateMixin, template){
  18. /*=====
  19. var _Widget = dijit._Widget;
  20. var _TemplatedMixin = dijit._TemplatedMixin;
  21. var _Contained = dijit._Contained;
  22. var _CssStateMixin = dijit._CssStateMixin;
  23. =====*/
  24. // module:
  25. // dijit/MenuItem
  26. // summary:
  27. // A line item in a Menu Widget
  28. return declare("dijit.MenuItem",
  29. [_Widget, _TemplatedMixin, _Contained, _CssStateMixin],
  30. {
  31. // summary:
  32. // A line item in a Menu Widget
  33. // Make 3 columns
  34. // icon, label, and expand arrow (BiDi-dependent) indicating sub-menu
  35. templateString: template,
  36. baseClass: "dijitMenuItem",
  37. // label: String
  38. // Menu text
  39. label: '',
  40. _setLabelAttr: { node: "containerNode", type: "innerHTML" },
  41. // iconClass: String
  42. // Class to apply to DOMNode to make it display an icon.
  43. iconClass: "dijitNoIcon",
  44. _setIconClassAttr: { node: "iconNode", type: "class" },
  45. // accelKey: String
  46. // Text for the accelerator (shortcut) key combination.
  47. // Note that although Menu can display accelerator keys there
  48. // is no infrastructure to actually catch and execute these
  49. // accelerators.
  50. accelKey: "",
  51. // disabled: Boolean
  52. // If true, the menu item is disabled.
  53. // If false, the menu item is enabled.
  54. disabled: false,
  55. _fillContent: function(/*DomNode*/ source){
  56. // If button label is specified as srcNodeRef.innerHTML rather than
  57. // this.params.label, handle it here.
  58. if(source && !("label" in this.params)){
  59. this.set('label', source.innerHTML);
  60. }
  61. },
  62. buildRendering: function(){
  63. this.inherited(arguments);
  64. var label = this.id+"_text";
  65. domAttr.set(this.containerNode, "id", label);
  66. if(this.accelKeyNode){
  67. domAttr.set(this.accelKeyNode, "id", this.id + "_accel");
  68. label += " " + this.id + "_accel";
  69. }
  70. this.domNode.setAttribute("aria-labelledby", label);
  71. dom.setSelectable(this.domNode, false);
  72. },
  73. _onHover: function(){
  74. // summary:
  75. // Handler when mouse is moved onto menu item
  76. // tags:
  77. // protected
  78. this.getParent().onItemHover(this);
  79. },
  80. _onUnhover: function(){
  81. // summary:
  82. // Handler when mouse is moved off of menu item,
  83. // possibly to a child menu, or maybe to a sibling
  84. // menuitem or somewhere else entirely.
  85. // tags:
  86. // protected
  87. // if we are unhovering the currently selected item
  88. // then unselect it
  89. this.getParent().onItemUnhover(this);
  90. // When menu is hidden (collapsed) due to clicking a MenuItem and having it execute,
  91. // FF and IE don't generate an onmouseout event for the MenuItem.
  92. // So, help out _CssStateMixin in this case.
  93. this._set("hovering", false);
  94. },
  95. _onClick: function(evt){
  96. // summary:
  97. // Internal handler for click events on MenuItem.
  98. // tags:
  99. // private
  100. this.getParent().onItemClick(this, evt);
  101. event.stop(evt);
  102. },
  103. onClick: function(/*Event*/){
  104. // summary:
  105. // User defined function to handle clicks
  106. // tags:
  107. // callback
  108. },
  109. focus: function(){
  110. // summary:
  111. // Focus on this MenuItem
  112. try{
  113. if(has("ie") == 8){
  114. // needed for IE8 which won't scroll TR tags into view on focus yet calling scrollIntoView creates flicker (#10275)
  115. this.containerNode.focus();
  116. }
  117. this.focusNode.focus();
  118. }catch(e){
  119. // this throws on IE (at least) in some scenarios
  120. }
  121. },
  122. _onFocus: function(){
  123. // summary:
  124. // This is called by the focus manager when focus
  125. // goes to this MenuItem or a child menu.
  126. // tags:
  127. // protected
  128. this._setSelected(true);
  129. this.getParent()._onItemFocus(this);
  130. this.inherited(arguments);
  131. },
  132. _setSelected: function(selected){
  133. // summary:
  134. // Indicate that this node is the currently selected one
  135. // tags:
  136. // private
  137. /***
  138. * TODO: remove this method and calls to it, when _onBlur() is working for MenuItem.
  139. * Currently _onBlur() gets called when focus is moved from the MenuItem to a child menu.
  140. * That's not supposed to happen, but the problem is:
  141. * In order to allow dijit.popup's getTopPopup() to work,a sub menu's popupParent
  142. * points to the parent Menu, bypassing the parent MenuItem... thus the
  143. * MenuItem is not in the chain of active widgets and gets a premature call to
  144. * _onBlur()
  145. */
  146. domClass.toggle(this.domNode, "dijitMenuItemSelected", selected);
  147. },
  148. setLabel: function(/*String*/ content){
  149. // summary:
  150. // Deprecated. Use set('label', ...) instead.
  151. // tags:
  152. // deprecated
  153. kernel.deprecated("dijit.MenuItem.setLabel() is deprecated. Use set('label', ...) instead.", "", "2.0");
  154. this.set("label", content);
  155. },
  156. setDisabled: function(/*Boolean*/ disabled){
  157. // summary:
  158. // Deprecated. Use set('disabled', bool) instead.
  159. // tags:
  160. // deprecated
  161. kernel.deprecated("dijit.Menu.setDisabled() is deprecated. Use set('disabled', bool) instead.", "", "2.0");
  162. this.set('disabled', disabled);
  163. },
  164. _setDisabledAttr: function(/*Boolean*/ value){
  165. // summary:
  166. // Hook for attr('disabled', ...) to work.
  167. // Enable or disable this menu item.
  168. this.focusNode.setAttribute('aria-disabled', value ? 'true' : 'false');
  169. this._set("disabled", value);
  170. },
  171. _setAccelKeyAttr: function(/*String*/ value){
  172. // summary:
  173. // Hook for attr('accelKey', ...) to work.
  174. // Set accelKey on this menu item.
  175. this.accelKeyNode.style.display=value?"":"none";
  176. this.accelKeyNode.innerHTML=value;
  177. //have to use colSpan to make it work in IE
  178. domAttr.set(this.containerNode,'colSpan',value?"1":"2");
  179. this._set("accelKey", value);
  180. }
  181. });
  182. });