dijit/form/Button.js

• Provides:

  • dijit.form.Button

• dijit.form.Button

  • type

    Function

  • chains:
    • dijit.form._FormWidget: (prototype)
    • dijit.form._FormWidget: (call)
  • summary

    Basically the same thing as a normal HTML button, but with special styling.

  • description

    Buttons can display a label, an icon, or both.
    A label should always be specified (through innerHTML) or the label
    attribute.  It can be hidden via showLabel=false.

  • example

    
    	<button dojoType="dijit.form.Button" onClick="...">Hello world</button>

  • example

    
    	var button1 = new dijit.form.Button({label: "hello world", onClick: foo});
    	dojo.body().appendChild(button1.domNode);

• dijit.form.Button.label

  • type

    HTML

  • summary

    String
    Text to display in button.
    If the label is hidden (showLabel=false) then and no title has
    been specified, then label is also set as title attribute of icon.

• dijit.form.Button.showLabel

  • type

    Boolean

  • summary

    Set this to true to hide the label text and display only the icon.
    (If showLabel=false then iconClass must be specified.)
    Especially useful for toolbars.
    If showLabel=true, the label will become the title (a.k.a. tooltip/hint) of the icon.
    
    The exception case is for computers in high-contrast mode, where the label
    will still be displayed, since the icon doesn't appear.

• dijit.form.Button.iconClass

  • type

    String

  • summary

    Class to apply to DOMNode in button to make it display an icon

• dijit.form.Button.type

  • type

    String

  • summary

    Defines the type of button.  "button", "submit", or "reset".

• dijit.form.Button.baseClass

  • summary

• dijit.form.Button.templateString

  • summary

• dijit.form.Button.attributeMap

  • summary

• dijit.form.Button._onClick

  • type

    Function

  • parameters:
    • e: (typeof Event)
  • source: [view]
      if(this.disabled){
       return false;
      }
      this._clicked(); // widget click actions
      return this.onClick(e); // user click actions
  • summary

    Internal function to handle click actions

  • returns

    user click actions

• dijit.form.Button._onButtonClick

  • type

    Function

  • parameters:
    • e: (typeof Event)
  • source: [view]
      if(this._onClick(e) === false){ // returning nothing is same as true
       e.preventDefault(); // needed for checkbox
      }else if(this.type == "submit" && !(this.valueNode||this.focusNode).form){ // see if a nonform widget needs to be signalled
       for(var node=this.domNode; node.parentNode/*#5935*/; node=node.parentNode){
        var widget=dijit.byNode(node);
        if(widget && typeof widget._onSubmit == "function"){
         widget._onSubmit(e);
         break;
        }
       }
      }else if(this.valueNode){
       this.valueNode.click();
       e.preventDefault(); // cancel BUTTON click and continue with hidden INPUT click
      }
  • summary

    Handler when the user activates the button portion.

  • returns

    returning nothing is same as true

• dijit.form.Button.buildRendering

  • type

    Function

  • source: [view]
      this.inherited(arguments);
      dojo.setSelectable(this.focusNode, false);
  • summary

• dijit.form.Button._fillContent

  • type

    Function

  • parameters:
    • source: (typeof DomNode)
  • source: [view]
    define("dijit/form/Button", ["dojo", "dijit", "text!dijit/form/templates/Button.html", "text!dijit/form/templates/DropDownButton.html", "text!dijit/form/templates/ComboButton.html", "dijit/form/_FormWidget", "dijit/_Container", "dijit/_HasDropDown"], function(dojo, dijit) {
    
    
    dojo.declare("dijit.form.Button",
     dijit.form._FormWidget,
     {
     // summary:
     //  Basically the same thing as a normal HTML button, but with special styling.
     // description:
     //  Buttons can display a label, an icon, or both.
     //  A label should always be specified (through innerHTML) or the label
     //  attribute. It can be hidden via showLabel=false.
     // example:
     // | Hello world
     //
     // example:
     // | var button1 = new dijit.form.Button({label: "hello world", onClick: foo});
     // | dojo.body().appendChild(button1.domNode);
    
    
     // label: HTML String
     //  Text to display in button.
     //  If the label is hidden (showLabel=false) then and no title has
     //  been specified, then label is also set as title attribute of icon.
     label: "",
    
    
     // showLabel: Boolean
     //  Set this to true to hide the label text and display only the icon.
     //  (If showLabel=false then iconClass must be specified.)
     //  Especially useful for toolbars.
     //  If showLabel=true, the label will become the title (a.k.a. tooltip/hint) of the icon.
     //
     //  The exception case is for computers in high-contrast mode, where the label
     //  will still be displayed, since the icon doesn't appear.
     showLabel: true,
    
    
     // iconClass: String
     //  Class to apply to DOMNode in button to make it display an icon
     iconClass: "",
    
    
     // type: String
     //  Defines the type of button. "button", "submit", or "reset".
     type: "button",
    
    
     baseClass: "dijitButton",
    
    
     templateString: dojo.cache("dijit.form", "templates/Button.html"),
    
    
     attributeMap: dojo.delegate(dijit.form._FormWidget.prototype.attributeMap, {
      value: "valueNode"
     }),
    
    
     _onClick: function(/*Event*/ e){
      // summary:
      //  Internal function to handle click actions
      if(this.disabled){
       return false;
      }
      this._clicked(); // widget click actions
      return this.onClick(e); // user click actions
     },
    
    
     _onButtonClick: function(/*Event*/ e){
      // summary:
      //  Handler when the user activates the button portion.
      if(this._onClick(e) === false){ // returning nothing is same as true
       e.preventDefault(); // needed for checkbox
      }else if(this.type == "submit" && !(this.valueNode||this.focusNode).form){ // see if a nonform widget needs to be signalled
       for(var node=this.domNode; node.parentNode/*#5935*/; node=node.parentNode){
        var widget=dijit.byNode(node);
        if(widget && typeof widget._onSubmit == "function"){
         widget._onSubmit(e);
         break;
        }
       }
      }else if(this.valueNode){
       this.valueNode.click();
       e.preventDefault(); // cancel BUTTON click and continue with hidden INPUT click
      }
     },
    
    
     buildRendering: function(){
      this.inherited(arguments);
      dojo.setSelectable(this.focusNode, false);
     },
    
    
     _fillContent: function(/*DomNode*/ source){
      // Overrides _Templated._fillContent().
      // If button label is specified as srcNodeRef.innerHTML rather than
      // this.params.label, handle it here.
      // TODO: remove the method in 2.0, parser will do it all for me
      if(source && (!this.params || !("label" in this.params))){
       this.set('label', source.innerHTML);
      }
  • returns

    user click actions|returning nothing is same as true

  • summary

• dijit.form.Button._setShowLabelAttr

  • type

    Function

  • parameters:
    • val: (typeof )
  • source: [view]
      if(this.containerNode){
       dojo.toggleClass(this.containerNode, "dijitDisplayNone", !val);
      }
      this._set("showLabel", val);
  • summary

• dijit.form.Button.onClick

  • type

    Function

  • parameters:
    • e: (typeof Event)
  • source: [view]
      return true;  // Boolean
  • summary

    Callback for when button is clicked.
    If type="submit", return true to perform submit, or false to cancel it.
    type:
    callback

  • returns

    Boolean

• dijit.form.Button._clicked

  • type

    Function

  • parameters:
    • e: (typeof Event)
  • source: [view]
      // summary:
      //  Internal overridable function for when the button is clicked
  • summary

    Internal overridable function for when the button is clicked

• dijit.form.Button.setLabel

  • type

    Function

  • parameters:
    • content: (typeof String)
  • source: [view]
      dojo.deprecated("dijit.form.Button.setLabel() is deprecated. Use set('label', ...) instead.", "", "2.0");
      this.set("label", content);
  • summary

    Deprecated.  Use set('label', ...) instead.

• dijit.form.Button._setLabelAttr

  • type

    Function

  • parameters:
    • content: (typeof String)
  • source: [view]
      this._set("label", content);
      this.containerNode.innerHTML = content;
      if(this.showLabel == false && !this.params.title){
       this.titleNode.title = dojo.trim(this.containerNode.innerText || this.containerNode.textContent || '');
      }
  • summary

    Hook for set('label', ...) to work.

  • description

    Set the label (text) of the button; takes an HTML string.

• dijit.form.Button._setIconClassAttr

  • type

    Function

  • parameters:
    • val: (typeof String)
  • source: [view]
    define("dijit/form/Button", ["dojo", "dijit", "text!dijit/form/templates/Button.html", "text!dijit/form/templates/DropDownButton.html", "text!dijit/form/templates/ComboButton.html", "dijit/form/_FormWidget", "dijit/_Container", "dijit/_HasDropDown"], function(dojo, dijit) {
    
    
    dojo.declare("dijit.form.Button",
     dijit.form._FormWidget,
     {
     // summary:
     //  Basically the same thing as a normal HTML button, but with special styling.
     // description:
     //  Buttons can display a label, an icon, or both.
     //  A label should always be specified (through innerHTML) or the label
     //  attribute. It can be hidden via showLabel=false.
     // example:
     // | Hello world
     //
     // example:
     // | var button1 = new dijit.form.Button({label: "hello world", onClick: foo});
     // | dojo.body().appendChild(button1.domNode);
    
    
     // label: HTML String
     //  Text to display in button.
     //  If the label is hidden (showLabel=false) then and no title has
     //  been specified, then label is also set as title attribute of icon.
     label: "",
    
    
     // showLabel: Boolean
     //  Set this to true to hide the label text and display only the icon.
     //  (If showLabel=false then iconClass must be specified.)
     //  Especially useful for toolbars.
     //  If showLabel=true, the label will become the title (a.k.a. tooltip/hint) of the icon.
     //
     //  The exception case is for computers in high-contrast mode, where the label
     //  will still be displayed, since the icon doesn't appear.
     showLabel: true,
    
    
     // iconClass: String
     //  Class to apply to DOMNode in button to make it display an icon
     iconClass: "",
    
    
     // type: String
     //  Defines the type of button. "button", "submit", or "reset".
     type: "button",
    
    
     baseClass: "dijitButton",
    
    
     templateString: dojo.cache("dijit.form", "templates/Button.html"),
    
    
     attributeMap: dojo.delegate(dijit.form._FormWidget.prototype.attributeMap, {
      value: "valueNode"
     }),
    
    
     _onClick: function(/*Event*/ e){
      // summary:
      //  Internal function to handle click actions
      if(this.disabled){
       return false;
      }
      this._clicked(); // widget click actions
      return this.onClick(e); // user click actions
     },
    
    
     _onButtonClick: function(/*Event*/ e){
      // summary:
      //  Handler when the user activates the button portion.
      if(this._onClick(e) === false){ // returning nothing is same as true
       e.preventDefault(); // needed for checkbox
      }else if(this.type == "submit" && !(this.valueNode||this.focusNode).form){ // see if a nonform widget needs to be signalled
       for(var node=this.domNode; node.parentNode/*#5935*/; node=node.parentNode){
        var widget=dijit.byNode(node);
        if(widget && typeof widget._onSubmit == "function"){
         widget._onSubmit(e);
         break;
        }
       }
      }else if(this.valueNode){
       this.valueNode.click();
       e.preventDefault(); // cancel BUTTON click and continue with hidden INPUT click
      }
     },
    
    
     buildRendering: function(){
      this.inherited(arguments);
      dojo.setSelectable(this.focusNode, false);
     },
    
    
     _fillContent: function(/*DomNode*/ source){
      // Overrides _Templated._fillContent().
      // If button label is specified as srcNodeRef.innerHTML rather than
      // this.params.label, handle it here.
      // TODO: remove the method in 2.0, parser will do it all for me
      if(source && (!this.params || !("label" in this.params))){
       this.set('label', source.innerHTML);
      }
     },
    
    
     _setShowLabelAttr: function(val){
      if(this.containerNode){
       dojo.toggleClass(this.containerNode, "dijitDisplayNone", !val);
      }
      this._set("showLabel", val);
     },
    
    
     onClick: function(/*Event*/ e){
      // summary:
      //  Callback for when button is clicked.
      //  If type="submit", return true to perform submit, or false to cancel it.
      // type:
      //  callback
      return true;  // Boolean
     },
    
    
     _clicked: function(/*Event*/ e){
      // summary:
      //  Internal overridable function for when the button is clicked
     },
    
    
     setLabel: function(/*String*/ content){
      // summary:
      //  Deprecated. Use set('label', ...) instead.
      dojo.deprecated("dijit.form.Button.setLabel() is deprecated. Use set('label', ...) instead.", "", "2.0");
      this.set("label", content);
     },
    
    
     _setLabelAttr: function(/*String*/ content){
      // summary:
      //  Hook for set('label', ...) to work.
      // description:
      //  Set the label (text) of the button; takes an HTML string.
      this._set("label", content);
      this.containerNode.innerHTML = content;
      if(this.showLabel == false && !this.params.title){
       this.titleNode.title = dojo.trim(this.containerNode.innerText || this.containerNode.textContent || '');
      }
     },
    
    
     _setIconClassAttr: function(/*String*/ val){
      // Custom method so that icon node is hidden when not in use, to avoid excess padding/margin
      // appearing around it (even if it's a 0x0 sized node)
    
    
      var oldVal = this.iconClass || "dijitNoIcon",
       newVal = val || "dijitNoIcon";
      dojo.replaceClass(this.iconNode, newVal, oldVal);
      this._set("iconClass", val);
  • returns

    user click actions|returning nothing is same as true|Boolean

  • summary

• dijit.form.Button.containerNode.innerHTML

  • summary

• dijit.form.Button.titleNode.title

  • summary

• dijit.form.DropDownButton

  • type

    Function

  • chains:
    • dijit.form.Button: (prototype)
    • dijit.form.Button: (call)
    • dijit._Container: (call)
    • dijit._HasDropDown: (call)
  • mixins:
    • dijit._Container.prototype: (prototype)
    • dijit._HasDropDown.prototype: (prototype)
  • summary

    A button with a drop down

  • example

    
    	<button dojoType="dijit.form.DropDownButton" label="Hello world">
    		<div dojotype="dijit.Menu">...</div>
    	</button>

  • example

    
    	var button1 = new dijit.form.DropDownButton({ label: "hi", dropDown: new dijit.Menu(...) });
    	dojo.body().appendChild(button1);

• dijit.form.DropDownButton.baseClass

  • summary

• dijit.form.DropDownButton.templateString

  • summary

• dijit.form.DropDownButton._fillContent

  • type

    Function

  • source: [view]
    define("dijit/form/Button", ["dojo", "dijit", "text!dijit/form/templates/Button.html", "text!dijit/form/templates/DropDownButton.html", "text!dijit/form/templates/ComboButton.html", "dijit/form/_FormWidget", "dijit/_Container", "dijit/_HasDropDown"], function(dojo, dijit) {
    
    
    dojo.declare("dijit.form.Button",
     dijit.form._FormWidget,
     {
     // summary:
     //  Basically the same thing as a normal HTML button, but with special styling.
     // description:
     //  Buttons can display a label, an icon, or both.
     //  A label should always be specified (through innerHTML) or the label
     //  attribute. It can be hidden via showLabel=false.
     // example:
     // | Hello world
     //
     // example:
     // | var button1 = new dijit.form.Button({label: "hello world", onClick: foo});
     // | dojo.body().appendChild(button1.domNode);
    
    
     // label: HTML String
     //  Text to display in button.
     //  If the label is hidden (showLabel=false) then and no title has
     //  been specified, then label is also set as title attribute of icon.
     label: "",
    
    
     // showLabel: Boolean
     //  Set this to true to hide the label text and display only the icon.
     //  (If showLabel=false then iconClass must be specified.)
     //  Especially useful for toolbars.
     //  If showLabel=true, the label will become the title (a.k.a. tooltip/hint) of the icon.
     //
     //  The exception case is for computers in high-contrast mode, where the label
     //  will still be displayed, since the icon doesn't appear.
     showLabel: true,
    
    
     // iconClass: String
     //  Class to apply to DOMNode in button to make it display an icon
     iconClass: "",
    
    
     // type: String
     //  Defines the type of button. "button", "submit", or "reset".
     type: "button",
    
    
     baseClass: "dijitButton",
    
    
     templateString: dojo.cache("dijit.form", "templates/Button.html"),
    
    
     attributeMap: dojo.delegate(dijit.form._FormWidget.prototype.attributeMap, {
      value: "valueNode"
     }),
    
    
     _onClick: function(/*Event*/ e){
      // summary:
      //  Internal function to handle click actions
      if(this.disabled){
       return false;
      }
      this._clicked(); // widget click actions
      return this.onClick(e); // user click actions
     },
    
    
     _onButtonClick: function(/*Event*/ e){
      // summary:
      //  Handler when the user activates the button portion.
      if(this._onClick(e) === false){ // returning nothing is same as true
       e.preventDefault(); // needed for checkbox
      }else if(this.type == "submit" && !(this.valueNode||this.focusNode).form){ // see if a nonform widget needs to be signalled
       for(var node=this.domNode; node.parentNode/*#5935*/; node=node.parentNode){
        var widget=dijit.byNode(node);
        if(widget && typeof widget._onSubmit == "function"){
         widget._onSubmit(e);
         break;
        }
       }
      }else if(this.valueNode){
       this.valueNode.click();
       e.preventDefault(); // cancel BUTTON click and continue with hidden INPUT click
      }
     },
    
    
     buildRendering: function(){
      this.inherited(arguments);
      dojo.setSelectable(this.focusNode, false);
     },
    
    
     _fillContent: function(/*DomNode*/ source){
      // Overrides _Templated._fillContent().
      // If button label is specified as srcNodeRef.innerHTML rather than
      // this.params.label, handle it here.
      // TODO: remove the method in 2.0, parser will do it all for me
      if(source && (!this.params || !("label" in this.params))){
       this.set('label', source.innerHTML);
      }
     },
    
    
     _setShowLabelAttr: function(val){
      if(this.containerNode){
       dojo.toggleClass(this.containerNode, "dijitDisplayNone", !val);
      }
      this._set("showLabel", val);
     },
    
    
     onClick: function(/*Event*/ e){
      // summary:
      //  Callback for when button is clicked.
      //  If type="submit", return true to perform submit, or false to cancel it.
      // type:
      //  callback
      return true;  // Boolean
     },
    
    
     _clicked: function(/*Event*/ e){
      // summary:
      //  Internal overridable function for when the button is clicked
     },
    
    
     setLabel: function(/*String*/ content){
      // summary:
      //  Deprecated. Use set('label', ...) instead.
      dojo.deprecated("dijit.form.Button.setLabel() is deprecated. Use set('label', ...) instead.", "", "2.0");
      this.set("label", content);
     },
    
    
     _setLabelAttr: function(/*String*/ content){
      // summary:
      //  Hook for set('label', ...) to work.
      // description:
      //  Set the label (text) of the button; takes an HTML string.
      this._set("label", content);
      this.containerNode.innerHTML = content;
      if(this.showLabel == false && !this.params.title){
       this.titleNode.title = dojo.trim(this.containerNode.innerText || this.containerNode.textContent || '');
      }
     },
    
    
     _setIconClassAttr: function(/*String*/ val){
      // Custom method so that icon node is hidden when not in use, to avoid excess padding/margin
      // appearing around it (even if it's a 0x0 sized node)
    
    
      var oldVal = this.iconClass || "dijitNoIcon",
       newVal = val || "dijitNoIcon";
      dojo.replaceClass(this.iconNode, newVal, oldVal);
      this._set("iconClass", val);
     }
    });
    
    
    
    
    dojo.declare("dijit.form.DropDownButton", [dijit.form.Button, dijit._Container, dijit._HasDropDown], {
     // summary:
     //  A button with a drop down
     //
     // example:
     // | 
     // |  

    ...

    
     // | 
     //
     // example:
     // | var button1 = new dijit.form.DropDownButton({ label: "hi", dropDown: new dijit.Menu(...) });
     // | dojo.body().appendChild(button1);
     //
    
    
     baseClass : "dijitDropDownButton",
    
    
     templateString: dojo.cache("dijit.form" , "templates/DropDownButton.html"),
    
    
     _fillContent: function(){
      // Overrides Button._fillContent().
      //
      // My inner HTML contains both the button contents and a drop down widget, like
      // push me ...
      // The first node is assumed to be the button content. The widget is the popup.
    
    
      if(this.srcNodeRef){ // programatically created buttons might not define srcNodeRef
       //FIXME: figure out how to filter out the widget and use all remaining nodes as button
       // content, not just nodes[0]
       var nodes = dojo.query("*", this.srcNodeRef);
       dijit.form.DropDownButton.superclass._fillContent.call(this, nodes[0]);
    
    
       // save pointer to srcNode so we can grab the drop down widget after it's instantiated
       this.dropDownContainer = this.srcNodeRef;
      }
  • returns

    user click actions|returning nothing is same as true|Boolean

  • chains:
    • dijit.form.DropDownButton.superclass._fillContent: (call)
  • summary

• dijit.form.DropDownButton.startup

  • type

    Function

  • source: [view]
      if(this._started){ return; }
    
    
      // the child widget from srcNodeRef is the dropdown widget. Insert it in the page DOM,
      // make it invisible, and store a reference to pass to the popup code.
      if(!this.dropDown && this.dropDownContainer){
       var dropDownNode = dojo.query("[widgetId]", this.dropDownContainer)[0];
       this.dropDown = dijit.byNode(dropDownNode);
       delete this.dropDownContainer;
      }
      if(this.dropDown){
       dijit.popup.hide(this.dropDown);
      }
    
    
      this.inherited(arguments);
  • summary

• dijit.form.DropDownButton.isLoaded

  • type

    Function

  • source: [view]
    define("dijit/form/Button", ["dojo", "dijit", "text!dijit/form/templates/Button.html", "text!dijit/form/templates/DropDownButton.html", "text!dijit/form/templates/ComboButton.html", "dijit/form/_FormWidget", "dijit/_Container", "dijit/_HasDropDown"], function(dojo, dijit) {
    
    
    dojo.declare("dijit.form.Button",
     dijit.form._FormWidget,
     {
     // summary:
     //  Basically the same thing as a normal HTML button, but with special styling.
     // description:
     //  Buttons can display a label, an icon, or both.
     //  A label should always be specified (through innerHTML) or the label
     //  attribute. It can be hidden via showLabel=false.
     // example:
     // | Hello world
     //
     // example:
     // | var button1 = new dijit.form.Button({label: "hello world", onClick: foo});
     // | dojo.body().appendChild(button1.domNode);
    
    
     // label: HTML String
     //  Text to display in button.
     //  If the label is hidden (showLabel=false) then and no title has
     //  been specified, then label is also set as title attribute of icon.
     label: "",
    
    
     // showLabel: Boolean
     //  Set this to true to hide the label text and display only the icon.
     //  (If showLabel=false then iconClass must be specified.)
     //  Especially useful for toolbars.
     //  If showLabel=true, the label will become the title (a.k.a. tooltip/hint) of the icon.
     //
     //  The exception case is for computers in high-contrast mode, where the label
     //  will still be displayed, since the icon doesn't appear.
     showLabel: true,
    
    
     // iconClass: String
     //  Class to apply to DOMNode in button to make it display an icon
     iconClass: "",
    
    
     // type: String
     //  Defines the type of button. "button", "submit", or "reset".
     type: "button",
    
    
     baseClass: "dijitButton",
    
    
     templateString: dojo.cache("dijit.form", "templates/Button.html"),
    
    
     attributeMap: dojo.delegate(dijit.form._FormWidget.prototype.attributeMap, {
      value: "valueNode"
     }),
    
    
     _onClick: function(/*Event*/ e){
      // summary:
      //  Internal function to handle click actions
      if(this.disabled){
       return false;
      }
      this._clicked(); // widget click actions
      return this.onClick(e); // user click actions
     },
    
    
     _onButtonClick: function(/*Event*/ e){
      // summary:
      //  Handler when the user activates the button portion.
      if(this._onClick(e) === false){ // returning nothing is same as true
       e.preventDefault(); // needed for checkbox
      }else if(this.type == "submit" && !(this.valueNode||this.focusNode).form){ // see if a nonform widget needs to be signalled
       for(var node=this.domNode; node.parentNode/*#5935*/; node=node.parentNode){
        var widget=dijit.byNode(node);
        if(widget && typeof widget._onSubmit == "function"){
         widget._onSubmit(e);
         break;
        }
       }
      }else if(this.valueNode){
       this.valueNode.click();
       e.preventDefault(); // cancel BUTTON click and continue with hidden INPUT click
      }
     },
    
    
     buildRendering: function(){
      this.inherited(arguments);
      dojo.setSelectable(this.focusNode, false);
     },
    
    
     _fillContent: function(/*DomNode*/ source){
      // Overrides _Templated._fillContent().
      // If button label is specified as srcNodeRef.innerHTML rather than
      // this.params.label, handle it here.
      // TODO: remove the method in 2.0, parser will do it all for me
      if(source && (!this.params || !("label" in this.params))){
       this.set('label', source.innerHTML);
      }
     },
    
    
     _setShowLabelAttr: function(val){
      if(this.containerNode){
       dojo.toggleClass(this.containerNode, "dijitDisplayNone", !val);
      }
      this._set("showLabel", val);
     },
    
    
     onClick: function(/*Event*/ e){
      // summary:
      //  Callback for when button is clicked.
      //  If type="submit", return true to perform submit, or false to cancel it.
      // type:
      //  callback
      return true;  // Boolean
     },
    
    
     _clicked: function(/*Event*/ e){
      // summary:
      //  Internal overridable function for when the button is clicked
     },
    
    
     setLabel: function(/*String*/ content){
      // summary:
      //  Deprecated. Use set('label', ...) instead.
      dojo.deprecated("dijit.form.Button.setLabel() is deprecated. Use set('label', ...) instead.", "", "2.0");
      this.set("label", content);
     },
    
    
     _setLabelAttr: function(/*String*/ content){
      // summary:
      //  Hook for set('label', ...) to work.
      // description:
      //  Set the label (text) of the button; takes an HTML string.
      this._set("label", content);
      this.containerNode.innerHTML = content;
      if(this.showLabel == false && !this.params.title){
       this.titleNode.title = dojo.trim(this.containerNode.innerText || this.containerNode.textContent || '');
      }
     },
    
    
     _setIconClassAttr: function(/*String*/ val){
      // Custom method so that icon node is hidden when not in use, to avoid excess padding/margin
      // appearing around it (even if it's a 0x0 sized node)
    
    
      var oldVal = this.iconClass || "dijitNoIcon",
       newVal = val || "dijitNoIcon";
      dojo.replaceClass(this.iconNode, newVal, oldVal);
      this._set("iconClass", val);
     }
    });
    
    
    
    
    dojo.declare("dijit.form.DropDownButton", [dijit.form.Button, dijit._Container, dijit._HasDropDown], {
     // summary:
     //  A button with a drop down
     //
     // example:
     // | 
     // |  

    ...

    
     // | 
     //
     // example:
     // | var button1 = new dijit.form.DropDownButton({ label: "hi", dropDown: new dijit.Menu(...) });
     // | dojo.body().appendChild(button1);
     //
    
    
     baseClass : "dijitDropDownButton",
    
    
     templateString: dojo.cache("dijit.form" , "templates/DropDownButton.html"),
    
    
     _fillContent: function(){
      // Overrides Button._fillContent().
      //
      // My inner HTML contains both the button contents and a drop down widget, like
      // push me ...
      // The first node is assumed to be the button content. The widget is the popup.
    
    
      if(this.srcNodeRef){ // programatically created buttons might not define srcNodeRef
       //FIXME: figure out how to filter out the widget and use all remaining nodes as button
       // content, not just nodes[0]
       var nodes = dojo.query("*", this.srcNodeRef);
       dijit.form.DropDownButton.superclass._fillContent.call(this, nodes[0]);
    
    
       // save pointer to srcNode so we can grab the drop down widget after it's instantiated
       this.dropDownContainer = this.srcNodeRef;
      }
     },
    
    
     startup: function(){
      if(this._started){ return; }
    
    
      // the child widget from srcNodeRef is the dropdown widget. Insert it in the page DOM,
      // make it invisible, and store a reference to pass to the popup code.
      if(!this.dropDown && this.dropDownContainer){
       var dropDownNode = dojo.query("[widgetId]", this.dropDownContainer)[0];
       this.dropDown = dijit.byNode(dropDownNode);
       delete this.dropDownContainer;
      }
      if(this.dropDown){
       dijit.popup.hide(this.dropDown);
      }
    
    
      this.inherited(arguments);
     },
    
    
     isLoaded: function(){
      // Returns whether or not we are loaded - if our dropdown has an href,
      // then we want to check that.
      var dropDown = this.dropDown;
      return (!!dropDown && (!dropDown.href || dropDown.isLoaded));
  • returns

    user click actions|returning nothing is same as true|Boolean

  • summary

• dijit.form.DropDownButton.loadDropDown

  • type

    Function

  • source: [view]
    define("dijit/form/Button", ["dojo", "dijit", "text!dijit/form/templates/Button.html", "text!dijit/form/templates/DropDownButton.html", "text!dijit/form/templates/ComboButton.html", "dijit/form/_FormWidget", "dijit/_Container", "dijit/_HasDropDown"], function(dojo, dijit) {
    
    
    dojo.declare("dijit.form.Button",
     dijit.form._FormWidget,
     {
     // summary:
     //  Basically the same thing as a normal HTML button, but with special styling.
     // description:
     //  Buttons can display a label, an icon, or both.
     //  A label should always be specified (through innerHTML) or the label
     //  attribute. It can be hidden via showLabel=false.
     // example:
     // | Hello world
     //
     // example:
     // | var button1 = new dijit.form.Button({label: "hello world", onClick: foo});
     // | dojo.body().appendChild(button1.domNode);
    
    
     // label: HTML String
     //  Text to display in button.
     //  If the label is hidden (showLabel=false) then and no title has
     //  been specified, then label is also set as title attribute of icon.
     label: "",
    
    
     // showLabel: Boolean
     //  Set this to true to hide the label text and display only the icon.
     //  (If showLabel=false then iconClass must be specified.)
     //  Especially useful for toolbars.
     //  If showLabel=true, the label will become the title (a.k.a. tooltip/hint) of the icon.
     //
     //  The exception case is for computers in high-contrast mode, where the label
     //  will still be displayed, since the icon doesn't appear.
     showLabel: true,
    
    
     // iconClass: String
     //  Class to apply to DOMNode in button to make it display an icon
     iconClass: "",
    
    
     // type: String
     //  Defines the type of button. "button", "submit", or "reset".
     type: "button",
    
    
     baseClass: "dijitButton",
    
    
     templateString: dojo.cache("dijit.form", "templates/Button.html"),
    
    
     attributeMap: dojo.delegate(dijit.form._FormWidget.prototype.attributeMap, {
      value: "valueNode"
     }),
    
    
     _onClick: function(/*Event*/ e){
      // summary:
      //  Internal function to handle click actions
      if(this.disabled){
       return false;
      }
      this._clicked(); // widget click actions
      return this.onClick(e); // user click actions
     },
    
    
     _onButtonClick: function(/*Event*/ e){
      // summary:
      //  Handler when the user activates the button portion.
      if(this._onClick(e) === false){ // returning nothing is same as true
       e.preventDefault(); // needed for checkbox
      }else if(this.type == "submit" && !(this.valueNode||this.focusNode).form){ // see if a nonform widget needs to be signalled
       for(var node=this.domNode; node.parentNode/*#5935*/; node=node.parentNode){
        var widget=dijit.byNode(node);
        if(widget && typeof widget._onSubmit == "function"){
         widget._onSubmit(e);
         break;
        }
       }
      }else if(this.valueNode){
       this.valueNode.click();
       e.preventDefault(); // cancel BUTTON click and continue with hidden INPUT click
      }
     },
    
    
     buildRendering: function(){
      this.inherited(arguments);
      dojo.setSelectable(this.focusNode, false);
     },
    
    
     _fillContent: function(/*DomNode*/ source){
      // Overrides _Templated._fillContent().
      // If button label is specified as srcNodeRef.innerHTML rather than
      // this.params.label, handle it here.
      // TODO: remove the method in 2.0, parser will do it all for me
      if(source && (!this.params || !("label" in this.params))){
       this.set('label', source.innerHTML);
      }
     },
    
    
     _setShowLabelAttr: function(val){
      if(this.containerNode){
       dojo.toggleClass(this.containerNode, "dijitDisplayNone", !val);
      }
      this._set("showLabel", val);
     },
    
    
     onClick: function(/*Event*/ e){
      // summary:
      //  Callback for when button is clicked.
      //  If type="submit", return true to perform submit, or false to cancel it.
      // type:
      //  callback
      return true;  // Boolean
     },
    
    
     _clicked: function(/*Event*/ e){
      // summary:
      //  Internal overridable function for when the button is clicked
     },
    
    
     setLabel: function(/*String*/ content){
      // summary:
      //  Deprecated. Use set('label', ...) instead.
      dojo.deprecated("dijit.form.Button.setLabel() is deprecated. Use set('label', ...) instead.", "", "2.0");
      this.set("label", content);
     },
    
    
     _setLabelAttr: function(/*String*/ content){
      // summary:
      //  Hook for set('label', ...) to work.
      // description:
      //  Set the label (text) of the button; takes an HTML string.
      this._set("label", content);
      this.containerNode.innerHTML = content;
      if(this.showLabel == false && !this.params.title){
       this.titleNode.title = dojo.trim(this.containerNode.innerText || this.containerNode.textContent || '');
      }
     },
    
    
     _setIconClassAttr: function(/*String*/ val){
      // Custom method so that icon node is hidden when not in use, to avoid excess padding/margin
      // appearing around it (even if it's a 0x0 sized node)
    
    
      var oldVal = this.iconClass || "dijitNoIcon",
       newVal = val || "dijitNoIcon";
      dojo.replaceClass(this.iconNode, newVal, oldVal);
      this._set("iconClass", val);
     }
    });
    
    
    
    
    dojo.declare("dijit.form.DropDownButton", [dijit.form.Button, dijit._Container, dijit._HasDropDown], {
     // summary:
     //  A button with a drop down
     //
     // example:
     // | 
     // |  

    ...

    
     // | 
     //
     // example:
     // | var button1 = new dijit.form.DropDownButton({ label: "hi", dropDown: new dijit.Menu(...) });
     // | dojo.body().appendChild(button1);
     //
    
    
     baseClass : "dijitDropDownButton",
    
    
     templateString: dojo.cache("dijit.form" , "templates/DropDownButton.html"),
    
    
     _fillContent: function(){
      // Overrides Button._fillContent().
      //
      // My inner HTML contains both the button contents and a drop down widget, like
      // push me ...
      // The first node is assumed to be the button content. The widget is the popup.
    
    
      if(this.srcNodeRef){ // programatically created buttons might not define srcNodeRef
       //FIXME: figure out how to filter out the widget and use all remaining nodes as button
       // content, not just nodes[0]
       var nodes = dojo.query("*", this.srcNodeRef);
       dijit.form.DropDownButton.superclass._fillContent.call(this, nodes[0]);
    
    
       // save pointer to srcNode so we can grab the drop down widget after it's instantiated
       this.dropDownContainer = this.srcNodeRef;
      }
     },
    
    
     startup: function(){
      if(this._started){ return; }
    
    
      // the child widget from srcNodeRef is the dropdown widget. Insert it in the page DOM,
      // make it invisible, and store a reference to pass to the popup code.
      if(!this.dropDown && this.dropDownContainer){
       var dropDownNode = dojo.query("[widgetId]", this.dropDownContainer)[0];
       this.dropDown = dijit.byNode(dropDownNode);
       delete this.dropDownContainer;
      }
      if(this.dropDown){
       dijit.popup.hide(this.dropDown);
      }
    
    
      this.inherited(arguments);
     },
    
    
     isLoaded: function(){
      // Returns whether or not we are loaded - if our dropdown has an href,
      // then we want to check that.
      var dropDown = this.dropDown;
      return (!!dropDown && (!dropDown.href || dropDown.isLoaded));
     },
    
    
     loadDropDown: function(){
      // Loads our dropdown
      var dropDown = this.dropDown;
      if(!dropDown){ return; }
      if(!this.isLoaded()){
       var handler = dojo.connect(dropDown, "onLoad", this, function(){
        dojo.disconnect(handler);
        this.openDropDown();
       });
       dropDown.refresh();
      }else{
       this.openDropDown();
      }
  • returns

    user click actions|returning nothing is same as true|Boolean

  • summary

• dijit.form.DropDownButton.isFocusable

  • type

    Function

  • source: [view]
    define("dijit/form/Button", ["dojo", "dijit", "text!dijit/form/templates/Button.html", "text!dijit/form/templates/DropDownButton.html", "text!dijit/form/templates/ComboButton.html", "dijit/form/_FormWidget", "dijit/_Container", "dijit/_HasDropDown"], function(dojo, dijit) {
    
    
    dojo.declare("dijit.form.Button",
     dijit.form._FormWidget,
     {
     // summary:
     //  Basically the same thing as a normal HTML button, but with special styling.
     // description:
     //  Buttons can display a label, an icon, or both.
     //  A label should always be specified (through innerHTML) or the label
     //  attribute. It can be hidden via showLabel=false.
     // example:
     // | Hello world
     //
     // example:
     // | var button1 = new dijit.form.Button({label: "hello world", onClick: foo});
     // | dojo.body().appendChild(button1.domNode);
    
    
     // label: HTML String
     //  Text to display in button.
     //  If the label is hidden (showLabel=false) then and no title has
     //  been specified, then label is also set as title attribute of icon.
     label: "",
    
    
     // showLabel: Boolean
     //  Set this to true to hide the label text and display only the icon.
     //  (If showLabel=false then iconClass must be specified.)
     //  Especially useful for toolbars.
     //  If showLabel=true, the label will become the title (a.k.a. tooltip/hint) of the icon.
     //
     //  The exception case is for computers in high-contrast mode, where the label
     //  will still be displayed, since the icon doesn't appear.
     showLabel: true,
    
    
     // iconClass: String
     //  Class to apply to DOMNode in button to make it display an icon
     iconClass: "",
    
    
     // type: String
     //  Defines the type of button. "button", "submit", or "reset".
     type: "button",
    
    
     baseClass: "dijitButton",
    
    
     templateString: dojo.cache("dijit.form", "templates/Button.html"),
    
    
     attributeMap: dojo.delegate(dijit.form._FormWidget.prototype.attributeMap, {
      value: "valueNode"
     }),
    
    
     _onClick: function(/*Event*/ e){
      // summary:
      //  Internal function to handle click actions
      if(this.disabled){
       return false;
      }
      this._clicked(); // widget click actions
      return this.onClick(e); // user click actions
     },
    
    
     _onButtonClick: function(/*Event*/ e){
      // summary:
      //  Handler when the user activates the button portion.
      if(this._onClick(e) === false){ // returning nothing is same as true
       e.preventDefault(); // needed for checkbox
      }else if(this.type == "submit" && !(this.valueNode||this.focusNode).form){ // see if a nonform widget needs to be signalled
       for(var node=this.domNode; node.parentNode/*#5935*/; node=node.parentNode){
        var widget=dijit.byNode(node);
        if(widget && typeof widget._onSubmit == "function"){
         widget._onSubmit(e);
         break;
        }
       }
      }else if(this.valueNode){
       this.valueNode.click();
       e.preventDefault(); // cancel BUTTON click and continue with hidden INPUT click
      }
     },
    
    
     buildRendering: function(){
      this.inherited(arguments);
      dojo.setSelectable(this.focusNode, false);
     },
    
    
     _fillContent: function(/*DomNode*/ source){
      // Overrides _Templated._fillContent().
      // If button label is specified as srcNodeRef.innerHTML rather than
      // this.params.label, handle it here.
      // TODO: remove the method in 2.0, parser will do it all for me
      if(source && (!this.params || !("label" in this.params))){
       this.set('label', source.innerHTML);
      }
     },
    
    
     _setShowLabelAttr: function(val){
      if(this.containerNode){
       dojo.toggleClass(this.containerNode, "dijitDisplayNone", !val);
      }
      this._set("showLabel", val);
     },
    
    
     onClick: function(/*Event*/ e){
      // summary:
      //  Callback for when button is clicked.
      //  If type="submit", return true to perform submit, or false to cancel it.
      // type:
      //  callback
      return true;  // Boolean
     },
    
    
     _clicked: function(/*Event*/ e){
      // summary:
      //  Internal overridable function for when the button is clicked
     },
    
    
     setLabel: function(/*String*/ content){
      // summary:
      //  Deprecated. Use set('label', ...) instead.
      dojo.deprecated("dijit.form.Button.setLabel() is deprecated. Use set('label', ...) instead.", "", "2.0");
      this.set("label", content);
     },
    
    
     _setLabelAttr: function(/*String*/ content){
      // summary:
      //  Hook for set('label', ...) to work.
      // description:
      //  Set the label (text) of the button; takes an HTML string.
      this._set("label", content);
      this.containerNode.innerHTML = content;
      if(this.showLabel == false && !this.params.title){
       this.titleNode.title = dojo.trim(this.containerNode.innerText || this.containerNode.textContent || '');
      }
     },
    
    
     _setIconClassAttr: function(/*String*/ val){
      // Custom method so that icon node is hidden when not in use, to avoid excess padding/margin
      // appearing around it (even if it's a 0x0 sized node)
    
    
      var oldVal = this.iconClass || "dijitNoIcon",
       newVal = val || "dijitNoIcon";
      dojo.replaceClass(this.iconNode, newVal, oldVal);
      this._set("iconClass", val);
     }
    });
    
    
    
    
    dojo.declare("dijit.form.DropDownButton", [dijit.form.Button, dijit._Container, dijit._HasDropDown], {
     // summary:
     //  A button with a drop down
     //
     // example:
     // | 
     // |  

    ...

    
     // | 
     //
     // example:
     // | var button1 = new dijit.form.DropDownButton({ label: "hi", dropDown: new dijit.Menu(...) });
     // | dojo.body().appendChild(button1);
     //
    
    
     baseClass : "dijitDropDownButton",
    
    
     templateString: dojo.cache("dijit.form" , "templates/DropDownButton.html"),
    
    
     _fillContent: function(){
      // Overrides Button._fillContent().
      //
      // My inner HTML contains both the button contents and a drop down widget, like
      // push me ...
      // The first node is assumed to be the button content. The widget is the popup.
    
    
      if(this.srcNodeRef){ // programatically created buttons might not define srcNodeRef
       //FIXME: figure out how to filter out the widget and use all remaining nodes as button
       // content, not just nodes[0]
       var nodes = dojo.query("*", this.srcNodeRef);
       dijit.form.DropDownButton.superclass._fillContent.call(this, nodes[0]);
    
    
       // save pointer to srcNode so we can grab the drop down widget after it's instantiated
       this.dropDownContainer = this.srcNodeRef;
      }
     },
    
    
     startup: function(){
      if(this._started){ return; }
    
    
      // the child widget from srcNodeRef is the dropdown widget. Insert it in the page DOM,
      // make it invisible, and store a reference to pass to the popup code.
      if(!this.dropDown && this.dropDownContainer){
       var dropDownNode = dojo.query("[widgetId]", this.dropDownContainer)[0];
       this.dropDown = dijit.byNode(dropDownNode);
       delete this.dropDownContainer;
      }
      if(this.dropDown){
       dijit.popup.hide(this.dropDown);
      }
    
    
      this.inherited(arguments);
     },
    
    
     isLoaded: function(){
      // Returns whether or not we are loaded - if our dropdown has an href,
      // then we want to check that.
      var dropDown = this.dropDown;
      return (!!dropDown && (!dropDown.href || dropDown.isLoaded));
     },
    
    
     loadDropDown: function(){
      // Loads our dropdown
      var dropDown = this.dropDown;
      if(!dropDown){ return; }
      if(!this.isLoaded()){
       var handler = dojo.connect(dropDown, "onLoad", this, function(){
        dojo.disconnect(handler);
        this.openDropDown();
       });
       dropDown.refresh();
      }else{
       this.openDropDown();
      }
     },
    
    
     isFocusable: function(){
      // Overridden so that focus is handled by the _HasDropDown mixin, not by
      // the _FormWidget mixin.
      return this.inherited(arguments) && !this._mouseDown;
  • returns

    user click actions|returning nothing is same as true|Boolean

  • summary

• dijit.form.DropDownButton.dropDownContainer

  • summary

• dijit.form.DropDownButton.dropDown

  • summary

• dijit.form.ComboButton

  • type

    Function

  • chains:
    • dijit.form.DropDownButton: (prototype)
    • dijit.form.DropDownButton: (call)
  • summary

    A combination button and drop-down button.
    Users can click one side to "press" the button, or click an arrow
    icon to display the drop down.

  • example

    
    	<button dojoType="dijit.form.ComboButton" onClick="...">
    		<span>Hello world</span>
    		<div dojoType="dijit.Menu">...</div>
    	</button>

  • example

    
    	var button1 = new dijit.form.ComboButton({label: "hello world", onClick: foo, dropDown: "myMenu"});
    	dojo.body().appendChild(button1.domNode);

• dijit.form.ComboButton.templateString

  • summary

• dijit.form.ComboButton.attributeMap

  • summary

• dijit.form.ComboButton.optionsTitle

  • type

    String

  • summary

    Text that describes the options menu (accessibility)

• dijit.form.ComboButton.baseClass

  • summary

• dijit.form.ComboButton.cssStateNodes

  • type

    Object

  • summary

• dijit.form.ComboButton._focusedNode

  • summary

• dijit.form.ComboButton._onButtonKeyPress

  • type

    Function

  • parameters:
    • evt: (typeof Event)
  • source: [view]
      if(evt.charOrCode == dojo.keys[this.isLeftToRight() ? "RIGHT_ARROW" : "LEFT_ARROW"]){
       dijit.focus(this._popupStateNode);
       dojo.stopEvent(evt);
      }
  • summary

    Handler for right arrow key when focus is on left part of button

• dijit.form.ComboButton._onArrowKeyPress

  • type

    Function

  • parameters:
    • evt: (typeof Event)
  • source: [view]
      if(evt.charOrCode == dojo.keys[this.isLeftToRight() ? "LEFT_ARROW" : "RIGHT_ARROW"]){
       dijit.focus(this.titleNode);
       dojo.stopEvent(evt);
      }
  • summary

    Handler for left arrow key when focus is on right part of button

• dijit.form.ComboButton.focus

  • type

    Function

  • parameters:
    • position: (typeof String)

      "start" or "end"

  • source: [view]
      if(!this.disabled){
       dijit.focus(position == "start" ? this.titleNode : this._popupStateNode);
      }
  • summary

    Focuses this widget to according to position, if specified,
    otherwise on arrow node

• dijit.form.ComboButton.cssStateNodes.buttonNode

  • summary

• dijit.form.ComboButton.cssStateNodes.titleNode

  • summary

• dijit.form.ComboButton.cssStateNodes._popupStateNode

  • summary

• dijit.form.ToggleButton

  • type

    Function

  • chains:
    • dijit.form.Button: (prototype)
    • dijit.form.Button: (call)
  • summary

    A button that can be in two states (checked or not).
    Can be base class for things like tabs or checkbox or radio buttons

• dijit.form.ToggleButton.baseClass

  • summary

• dijit.form.ToggleButton.checked

  • type

    Boolean

  • summary

    Corresponds to the native HTML <input> element's attribute.
    In markup, specified as "checked='checked'" or just "checked".
    True if the button is depressed, or the checkbox is checked,
    or the radio button is selected, etc.

• dijit.form.ToggleButton.attributeMap

  • summary

• dijit.form.ToggleButton._clicked

  • type

    Function

  • parameters:
    • evt: (typeof Event)
  • source: [view]
      this.set('checked', !this.checked);
  • summary

• dijit.form.ToggleButton._setCheckedAttr

  • type

    Function

  • parameters:
    • value: (typeof Boolean)
    • priorityChange: (typeof Boolean)
  • source: [view]
      this._set("checked", value);
      dojo.attr(this.focusNode || this.domNode, "checked", value);
      dijit.setWaiState(this.focusNode || this.domNode, "pressed", value);
      this._handleOnChange(value, priorityChange);
  • summary

• dijit.form.ToggleButton.setChecked

  • type

    Function

  • parameters:
    • checked: (typeof Boolean)
  • source: [view]
      dojo.deprecated("setChecked("+checked+") is deprecated. Use set('checked',"+checked+") instead.", "", "2.0");
      this.set('checked', checked);
  • summary

    Deprecated.  Use set('checked', true/false) instead.

• dijit.form.ToggleButton.reset

  • type

    Function

  • source: [view]
      this._hasBeenBlurred = false;
    
    
      // set checked state to original setting
      this.set('checked', this.params.checked || false);
  • summary

    Reset the widget's value to what it was at initialization time

• dijit.form.ToggleButton._hasBeenBlurred

  • summary

• dijit.form

  • type

    Object

  • summary

• dijit

  • type

    Object

  • summary