The button () Method

The button () method can be used in two forms:

  • $(selector, context).button (options);

  • $(selector, context).button (“action”, params);

The button (options) Method

The button (options) method declares that an HTML element should be managed as a button. The options parameter is an object that specifies the appearance and behavior of the button.

A button can be represented by text, but can also be associated with icons that are predefined in a jQuery UI CSS file associated with each theme (here, the jquery.ui.theme.css file). This file contains a set of CSS classes to access the icons located in a file in the jqueryui/development-bundle/themes/smoothness/images directory (for the smoothness theme). In this CSS file, you will see the CSS class definitions, such as the following:

CSS class definition associated with an icon in the images file
.ui-icon-calendar { background-position: −32px −112px; }

This allows us to use the ui-calendar-icon class in a button, for example, to use a calendar icon for the button.

The icons available in jQuery UI are shown in Figure 5-4.

Available icons in jQuery UI

Figure 5-4. Available icons in jQuery UI

Table 5-1 describes the options for managing buttons.

Table 5-1. Options for managing buttons




When set to true, the button will appear inactive. Mouseovers will have no effect, but clicks on the button will continue to be taken into account.

options.label ...

Get jQuery UI now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.