Button Widget

Description:
Adding a customizable button to your webpage.

Quick navigation Examples

Options

Methods

Events

Options

float

Type:
String
Default value:
none

This option is used to set the css property float of the button element.

Code examples
Initialize the button widget with the float option specified, using object in constructor
$A.newButton({
    float: 'right'
}).draw();
Initialize the button widget with the float option specified, using method chaining 
$A.newButton().float('right').draw();

Get or set the float option, after initialization
var button = $A.newButton().draw();
//Setter
button.float('right'); //returns button

//Getter
console.log(button.float()); //returns value of float

html

Type:
String
Default value:
''

Use this option to set the html of the given button object.
The use of this function is similar to the text method, but with this you can insert html tags too.

Code examples
Initialize the button widget with the html option specified, using object in constructor
$A.newButton({
    html: "<u>button</u>" //the tags wont be shown
}).draw();
Initialize the button widget with the html option specified, using method chaining 
$A.newButton().html("<b>I love buttons</b>").draw();

Get or set the html option, after initialization
var button = $A.newButton().draw();
//Setter
button.html("<b>I'm cool</b>"); //returns button

//Getter
console.log(button.html()); //returns value of html

newRow

Type:
Boolean
Default value:
true

If true the button element will appear in a new row. Then no other elements can be inserted in that row.
If false the button element will appear in the same row, next to the previous element.

Code examples
Initialize the button widget with the newRow option specified, using object in constructor
//Buttons drawn in a single row
$A.newButton({
    newRow: false
}).draw();
$A.newButton({
    newRow: false
}).draw();

//Third button will be drawn  in a new row
$A.newButton({
    newRow: true
}).draw();
Initialize the button widget with the newRow option specified, using method chaining 
$A.newButton().newRow(false).draw();

Get or set the newRow option, after initialization
var button = $A.newButton().draw();
//Setter
button.newRow(false); //returns button

//Getter
console.log(button.newRow()); //returns value of newRow

skin

Type:
String
Default value:
'simple-white'

Setting the skin of the widget.

Code examples
Initialize the button widget with the skin option specified, using object in constructor 
$A.newButton({
    skin: 'simple-white'
}).draw();
$A.newButton({
    skin: 'simple-orange'
}).draw();
Initialize the button widget with the skin option specified, using method chaining 
$A.newButton().skin('simple-white').draw()
Get or set the skin option, after initialization 
var button = $A.newButton().draw()
//Setter
button.skin('simple-white');

//Getter
console.log(button.skin());

text

Type:
String
Default value:
"My Button"

Use this option to set the text which appears on the button.

Code examples
Initialize the button widget with the text option specified, using object in constructor
$A.newButton({
    text: "Submit"
}).draw();
Initialize the button widget with the text option specified, using method chaining 
$A.newButton().text("I love buttons").draw();

Get or set the text option, after initialization
var button = $A.newButton().draw();
//Setter
button.text("I'm cool"); //returns button

//Getter
console.log(button.text()); //returns value of text

Methods

button()

Returns:
jQuery

Use this function to get the jQuery object representing the given button.

Code examples
var button=$A.newButton().draw();
console.log(button.button());

disable()

Returns:
Button

Use this to disable the particular button element.
Disabled buttons cannot be clicked, selected, edited or copied.

Code examples
var button=$A.newButton({skin: 'simple-orange'}).draw();
setTimeout(function(){
    button.disable();
},1000);

enable()

Returns:
Button

Use this to enable the particular button element.

Code examples
var button=$A.newButton({skin: 'simple-orange'}).disable().draw();
setTimeout(function(){
    button.enable();
},1000);

Events

click(event)

Returns:
Button

You can set the event you want to be triggered when clicking on the particular button.

  • event
    Type: function
    The event to be triggered
Code examples
var button=$A.newButton().draw();
button.click(function(){
    alert('Clicked!');
})

Examples

A simple module 


            
Demo: