Button

The button component changes the default browser buttons to special buttons with additional configuration options, such as an icon, corners, and a shadow.

Table of Contents

  1. Default Selectors
  2. Manual Constructor
  3. HTML Examples
  4. Options
  5. Methods

Default Selectors

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.

Manual Constructor

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>

HTML Examples

Options

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.

Summary

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.

Inline Buttons

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>

Icon Positioning

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:

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>

Methods

To call a method on the component, use one of the existing APIs:

Summary

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>