O'Reilly logo

jQuery UI by Eric Sarrion

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Examples of Using Buttons

Here are some examples that apply the principles discussed in this chapter.

Displaying Icons in Buttons

The options.icons option defines an icon for the button. For example, to define a volume button, including the volume icon, as shown in Figure 5-10, write the following basic code (shown in bold):

<!DOCTYPE html>
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>

<link rel=stylesheet type=text/css
      href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />

<span id=volume>Volume</span>

<script>

$("#volume").button ({
  icons : { secondary : "ui-icon-volume-off" }
});

</script>

The icon is inserted after the text (secondary property). About the "ui-icon-volume-off" value is that used in the CSS styles of jQuery UI for the volume icon (Figure 5-10).

Icon inserted after the text on a button

Figure 5-10. Icon inserted after the text on a button

You can change the appearance of the button when clicked to visually convey that a button has been turned on or off. For example, in Figure 5-11, we see an icon showing that the volume is turned on:

<!DOCTYPE html> <script src = jquery.js></script> <script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script> <link rel=stylesheet type=text/css href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css /> <span id=volume>Volume</span> <script> $("#volume").button ({ icons : { secondary : "ui-icon-volume-off" } }).click ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required