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>


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


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

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.