jQuery UI : Buttons
Learn how to use jQuery UI to create and manage Buttons
jQuery UI : Creating Buttons
The jQuery UI button widget is used to apply themes to buttons and a element.
It applies the shape , font , size and color to the element based on the theme of the jQuery UI.Simply, select the element you want to transform , jQuery UI takes care of all other things.
Example: jQuery UI - Creating buttons using jQuery UIGive it a TRY! » Note: There are two buttons, one using jQuery UI styles while the other button has no styles.
jQuery UI : Configuring the Button
Table : Setting Properties for jQuery UI Buttons
|disabled||To Disable the button Instance||false|
|icons||To set the icons for the buttons||primary: null
|label||To set the text associated with the button||The content of the element or the value attribute|
|text||It hides the text of the button when using an icon-only instance.||true|
jQuery UI gives you an option to configure the buttons by using the settings properties.These features allows you to exercise control over how the button is created and displayed.
The setting can be applied in two ways, by using a map object and second by calling the button method with its arguments.
In the second method, the first argument is the option , the second argument is the setting you want to assign, the third argument is the value of the property.
Syntax: jQuery UI - Button Configuration
Example: jQuery UI - Button ConfiguratiionGive it a TRY! » Note:The button is first disabled and then enabled using the map and argument method respectively.
jQuery UI: Using the Options Argument with the Map Object
In this demo we extend the previous example, here we first read the value of the setting and then display it.
Example: jQuery UI - Get values using Button Options.Give it a TRY! » Note: The first argument is option and the second is the setting whose value is to be retrieved.
jQuery UI : Button Icons
jQuery UI themes provides a comprehensive set of icons which can be brought into use for almost all purposes.
The icon setting is used to specify the icons to be displayed, there are two position within the button widget for icons.
The primary icon is displayed on the left side of the text, whereas the secondary icon is displayed to the right of the text.
List of all icons can be seen here
Example: jQuery UI Button IconsGive it a TRY! » Note: By setting the value of text to false, no text will be displayed on the button .
jQuery UI : Button with Custom Image
jQuery UI icons are small in size, hence at time it won't suit the project requirement.To overcome that you can use a custom image as icon as well.
Use an img element within the button element, as long as the image has a transparent background jQuery UI button widget will take care of the content within it.