The button component changes the default browser buttons to special buttons with additional configuration options, such as an icon, corners, and a shadow.
By default, all <button>
elements and all <input>
elements with the type="button"
, type="submit"
, or type="reset"
attribute are displayed as Tizen Web UI buttons. In addition, all elements with the data-role="button"
attribute are displayed as Tizen Web UI buttons. To prevent a <button>
or <input>
element from being displayed as a Tizen Web UI button, use the data-role="none"
attribute with the element.
To manually create a button component, use the component constructor from the tau
namespace:
<div id="button"></div> <script> var buttonElement = document.getElementById("button"), button = tau.widget.Button(buttonElement); </script>
The constructor requires an HTMLElement
parameter to create the component, and you can get it with the document.getElementById()
method. The constructor can also take a second parameter, which is an object defining the configuration options for the component.
If the jQuery library is loaded, you can use its method:
<div id="button"></div> <script> $("#button").button(); </script>
To create a simple button from a link using the data-role
attribute:
<a href="#page2" data-role="button">Link button</a>
To create a simple button using the <button>
element:
<button>Button element</button>
To create a simple button using the <input>
element:
<input type="button" value="Button" /> <input type="submit" value="Submit Button" /> <input type="reset" value="Reset Button" />
The options for a component can be defined as data-...
attributes or passed as parameters to the constructor.
You can change an option for the component using the option
method.
Option | Input type | Default value | Description |
---|---|---|---|
data-bar | boolean | false | If the button is part of a bar, set to true . |
data-corners | boolean | false | Sets whether the corners of the button are shown. |
data-icon | string | null | null | Icon type. |
data-iconpos | "left" | "right" | "top" | "bottom" | "notext" | null | null | Position of the icon. |
data-iconshadow | boolean | true | Sets whether the shadow of the button icon is shown. |
data-inline | string | null | null | If the value is true , the button has the display = "inline" CSS property. |
data-style | "circle" | "nobg" | null | null | Style of the button. |
By default, all buttons in the body content are styled as block-level elements, so they fill the width of the screen. If you want a more compact button that is only as wide as the text and icons inside it, add the data-inline="true"
attribute to the button.
<a href="index.html" data-role="button" data-inline="true">Cancel</a>
If you have multiple buttons that must sit side-by-side on the same line, add the data-inline="true"
attribute to each button. This styles the buttons to be the width of their content and floats the buttons so that they sit on the same line.
<a href="index.html" data-role="button" data-inline="true">Cancel</a> <a href="index.html" data-role="button" data-inline="true">Save</a>
By default, all icons in buttons are placed to the left of the button text. This default can be overridden using the data-iconpos
attribute.
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="right">Delete</a>
Possible values for the data-iconpos
attribute:
"left"
: Creates the button with a left-aligned icon."right"
: Creates the button with a right-aligned icon."top"
: Creates the button with the icon positioned above the text."bottom"
: creates the button with the icon positioned below the text.You can also create an icon-only button by setting the data-iconpos
attribute to "notext"
. The button plugin hides the text on-screen, but adds it as a title attribute to the link to provide context for screen readers and devices that support tooltips.
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
To call a method on the component, use one of the existing APIs:
TAU API (RECOMMENDED):
<div id="button" data-role="button"></div> <script> var buttonElement = document.getElementById("button"), button = tau.widget.Button(buttonElement); // button.methodName(methodArgument1, methodArgument2, ...); // For example: button.value("text"); </script>
jQuery API (support for backward compatibility):
<div id="button"></div> <script> // $("#button").button("methodName", argument1, argument2, ...); // For example: $("#button").button("value", "new text"); </script>
Method | Description |
---|---|
Button disable ( ) |
Disables the button. |
Button enable ( ) |
Enables the button. |
Button refresh ( ) |
Refreshes a button markup. |
string value ( string? value ) |
Gets or sets a value. |
disable
Disables the button.
Button disable ( )
The method sets the disabled attribute for the button and changes the look of the button to the disabled state.
Return value:
Type | Description |
---|---|
Button | Returns this. |
Code example (TAU API RECOMMENDED):
<div data-role="button" id="button"></div> <script> var element = document.getElementById("button"), buttonWidget = tau.widget.Button(element); buttonWidget.disable(); </script>
Code example (jQuery API support for backward compatibility):
<div data-role="button" id="button"></div> <script> $("#button").button("disable"); </script>
enable
Enables the button.
Button enable ( )
The method removes the disabled attribute from the button and changes the look of the button to the enabled state.
Return value:
Type | Description |
---|---|
Button | Returns this. |
Code example (TAU API RECOMMENDED):
<div data-role="button" id="button"></div> <script> var element = document.getElementById("button"), buttonWidget = tau.widget.Button(element); buttonWidget.enable(); </script>
Code example (jQuery API support for backward compatibility):
<div data-role="button" id="button"></div> <script> $("#button").button("enable"); </script>
refresh
Refreshes a button markup.
Button refresh ( )
The method rebuilds the DOM structure of the button component. It must be called after you manually change the HTML attributes of the component's DOM structure.
The method is called automatically after any component option is changed.
Return value:
Type | Description |
---|---|
Button | Returns this. |
Code example (TAU API RECOMMENDED):
<div data-role="button" id="button"></div> <script> var element = document.getElementById("button"), buttonWidget = tau.widget.Button(element); buttonWidget.refresh(); </script>
Code example (jQuery API support for backward compatibility):
<div data-role="button" id="button"></div> <script> $("#button").button("refresh"); </script>
value
Gets or sets a value.
string value ( string? value)
Since: 2.3
The method returns the inner text of the button or sets the text of the button.
Parameters:
Parameter | Type | Required/optional | Default value | Description |
---|---|---|---|---|
value | string | Optional | Text to set for the button. |
Return value:
Type | Description |
---|---|
string | In the get mode, returns the inner text of the button. |
Code example (TAU API RECOMMENDED):
<div data-role="button" id="button"></div> <script> var element = document.getElementById("button"), buttonWidget = tau.widget.Button(element), // Value contains inner text of button value = buttonWidget.value(); // "New text" will be text of button buttonWidget.value("New text"); </script>
Code example (jQuery API support for backward compatibility):
<div data-role="button" id="button"></div> <script> // Value contains inner text of button $("#button").button("value"); // "New text" will be text of button $("#button").button("value", "New text"); </script>