ComboButton.js 4.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. require({cache:{
  2. 'url:dijit/form/templates/ComboButton.html':"<table class=\"dijit dijitReset dijitInline dijitLeft\"\n\tcellspacing='0' cellpadding='0' role=\"presentation\"\n\t><tbody role=\"presentation\"><tr role=\"presentation\"\n\t\t><td class=\"dijitReset dijitStretch dijitButtonNode\" data-dojo-attach-point=\"buttonNode\" data-dojo-attach-event=\"ondijitclick:_onClick,onkeypress:_onButtonKeyPress\"\n\t\t><div id=\"${id}_button\" class=\"dijitReset dijitButtonContents\"\n\t\t\tdata-dojo-attach-point=\"titleNode\"\n\t\t\trole=\"button\" aria-labelledby=\"${id}_label\"\n\t\t\t><div class=\"dijitReset dijitInline dijitIcon\" data-dojo-attach-point=\"iconNode\" role=\"presentation\"></div\n\t\t\t><div class=\"dijitReset dijitInline dijitButtonText\" id=\"${id}_label\" data-dojo-attach-point=\"containerNode\" role=\"presentation\"></div\n\t\t></div\n\t\t></td\n\t\t><td id=\"${id}_arrow\" class='dijitReset dijitRight dijitButtonNode dijitArrowButton'\n\t\t\tdata-dojo-attach-point=\"_popupStateNode,focusNode,_buttonNode\"\n\t\t\tdata-dojo-attach-event=\"onkeypress:_onArrowKeyPress\"\n\t\t\ttitle=\"${optionsTitle}\"\n\t\t\trole=\"button\" aria-haspopup=\"true\"\n\t\t\t><div class=\"dijitReset dijitArrowButtonInner\" role=\"presentation\"></div\n\t\t\t><div class=\"dijitReset dijitArrowButtonChar\" role=\"presentation\">&#9660;</div\n\t\t></td\n\t\t><td style=\"display:none !important;\"\n\t\t\t><input ${!nameAttrSetting} type=\"${type}\" value=\"${value}\" data-dojo-attach-point=\"valueNode\"\n\t\t/></td></tr></tbody\n></table>\n"}});
  3. define("dijit/form/ComboButton", [
  4. "dojo/_base/declare", // declare
  5. "dojo/_base/event", // event.stop
  6. "dojo/keys", // keys
  7. "../focus", // focus.focus()
  8. "./DropDownButton",
  9. "dojo/text!./templates/ComboButton.html"
  10. ], function(declare, event, keys, focus, DropDownButton, template){
  11. /*=====
  12. var DropDownButton = dijit.form.DropDownButton;
  13. =====*/
  14. // module:
  15. // dijit/form/ComboButton
  16. // summary:
  17. // A combination button and drop-down button.
  18. return declare("dijit.form.ComboButton", DropDownButton, {
  19. // summary:
  20. // A combination button and drop-down button.
  21. // Users can click one side to "press" the button, or click an arrow
  22. // icon to display the drop down.
  23. //
  24. // example:
  25. // | <button data-dojo-type="dijit.form.ComboButton" onClick="...">
  26. // | <span>Hello world</span>
  27. // | <div data-dojo-type="dijit.Menu">...</div>
  28. // | </button>
  29. //
  30. // example:
  31. // | var button1 = new dijit.form.ComboButton({label: "hello world", onClick: foo, dropDown: "myMenu"});
  32. // | dojo.body().appendChild(button1.domNode);
  33. //
  34. templateString: template,
  35. // Map widget attributes to DOMNode attributes.
  36. _setIdAttr: "", // override _FormWidgetMixin which puts id on the focusNode
  37. _setTabIndexAttr: ["focusNode", "titleNode"],
  38. _setTitleAttr: "titleNode",
  39. // optionsTitle: String
  40. // Text that describes the options menu (accessibility)
  41. optionsTitle: "",
  42. baseClass: "dijitComboButton",
  43. // Set classes like dijitButtonContentsHover or dijitArrowButtonActive depending on
  44. // mouse action over specified node
  45. cssStateNodes: {
  46. "buttonNode": "dijitButtonNode",
  47. "titleNode": "dijitButtonContents",
  48. "_popupStateNode": "dijitDownArrowButton"
  49. },
  50. _focusedNode: null,
  51. _onButtonKeyPress: function(/*Event*/ evt){
  52. // summary:
  53. // Handler for right arrow key when focus is on left part of button
  54. if(evt.charOrCode == keys[this.isLeftToRight() ? "RIGHT_ARROW" : "LEFT_ARROW"]){
  55. focus.focus(this._popupStateNode);
  56. event.stop(evt);
  57. }
  58. },
  59. _onArrowKeyPress: function(/*Event*/ evt){
  60. // summary:
  61. // Handler for left arrow key when focus is on right part of button
  62. if(evt.charOrCode == keys[this.isLeftToRight() ? "LEFT_ARROW" : "RIGHT_ARROW"]){
  63. focus.focus(this.titleNode);
  64. event.stop(evt);
  65. }
  66. },
  67. focus: function(/*String*/ position){
  68. // summary:
  69. // Focuses this widget to according to position, if specified,
  70. // otherwise on arrow node
  71. // position:
  72. // "start" or "end"
  73. if(!this.disabled){
  74. focus.focus(position == "start" ? this.titleNode : this._popupStateNode);
  75. }
  76. }
  77. });
  78. });