Chapter 5. Buttons

jQuery UI allows us to give a different appearance to interface elements of the HTML page, such as buttons, radio buttons, and checkboxes.

Basic Principles of Buttons

Suppose we want to write the HTML code to display the buttons shown in Figure 5-1.

There are two buttons with a different aspect than the usual buttons. To view them, you must write a <span> containing the button text. You can replace the <span> element with another HTML element, such as <div> or <button>, but the button layout will be different (e.g., one above the other for a <div>):

<!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="button1"> Button 1 </span>
<span id="button2"> Button 2 </span>

<script>

$("#button1, #button2").button ();

</script>

The button () method transforms the HTML elements into buttons, with automatic management of mouse movements on them, all managed transparently by jQuery UI.

The <!DOCTYPE html> directive is mandatory for improving the display in Internet Explorer.

Buttons in the HTML page

Figure 5-1. Buttons in the HTML page

Formatting Content

Here, the HTML code that appears after the button () instruction has been changed (Figure 5-2). This code was retrieved using the Firebug extension in Firefox.

Figure 5-2. HTML generated by the ...

Get jQuery UI now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial