Creating stylish and functional buttons
It is relatively easy to create stylish buttons quickly with CSS3, but adding additional functionality often requires more investment in terms of time. jQuery UI provides a button API that can be used to create a wide range of button controls, which can be easily added to UIs and interacted with inside JavaScript code. This recipe shows you how to create common button controls so that you can re-use the code at your convenience.
Getting ready
Inside the chapter9
folder that was created earlier, create recipe-1.html
and recipe-1.js
.
How to do it…
To create a range of different button controls using the jQuery UI library, perform the following steps:
Add the following HTML code to
recipe-1.html
in order to add various button elements, ensuring that you update the references to the jQuery and jQuery UI libraries where required:<!DOCTYPE html> <html> <head> <title>Chapter 9 :: Recipe 1</title> <script src="jquery.min.js...