jQuery UI provides a rich user interface library. It builds on the core jQuery framework. So, you know that development will be quick and productive. If you are new to jQuery UI, follow these simple steps to get started.
Downloading jQuery UI
jQuery UI has a unique download builder. It allows you to build a custom package for download containing only the components that you need. You can also choose the theme and the version of jQuery UI to be downloaded. Head to the download page. To keep things simple, accept all the default settings. This will select the UI Lightness theme (at the time of writing this article). Then click on Download.
Installing jQuery UI
The library is composed of static files, like, CSS and JavaScript. You can put them directly in a web server’s document root. Or, you can package the distribution within a web application (WAR).
In this tutorial, we will use Apache web server. Within the document root, create a folder called “jqui”. Extract the downloaded ZIP file within that folder. You will get these subfolders under jqui.
To validate the installation, open a browser and run the URL: http://HOSTNAME/jqui/. Where HOSTNAME is your machine’s host name. And, “jqui” is the name of the folder where we installed jQuery UI.
You should see the example page (index.html):
Using jQuery UI from a Web Page
To find out what JavaScript and style sheet documents you need to include, simply open up the index.html that came with jQuery UI. By default, these lines are relevant:
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.2.custom.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.4.2.min.js"> </script> <script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"> </script>
The style sheet will depend on your selection of theme. We are using the UI Lightness theme here.
In the same folder where you extracted jQuery UI, create a new file called test.html. Enter basic HTML there.
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Example Page</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.2.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript">
$(function(){
// Dialog
$('#my_dialog').dialog({
autoOpen: false,
width: 600,
buttons: {
"Ok": function() {
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
//Button
$('#dialog_button').button();
$('#dialog_button').click(function(){
$('#my_dialog').dialog('open');
return false;
});
});
</script>
</head>
<body>
<!-- Dialog -->
<div id="my_dialog" title="Having Fun">
<p>Hello. jQuery UI is fun to play with!</p>
</div>
<button id="dialog_button">Open dialog</button>
</body>
</html>
Save the file. Run it from the browser: http://HOSTNAME/jqui/test.html.
Click on the Open dialog button. You should see the popup dialog come up.
Congratulations! You have successfully completed your first jQuery UI application.
Fixing Style
By default, most of the themes, including UI Lightness use very large font sizes for the widgets. This is due to a strange assumption made by the designers that the font size for the body will be 62.5%. To fix the problem, we need to shrink the font size for the ui-widget class that is inherited by almost all widgets.
Add the following snippet within the <head>, anywhere below the line where the theme’s style sheet is included.
<style type="text/css">
.ui-widget { font-size: 0.8em;}
</style>
Save and refresh the browser. This time, you will get a more acceptable font size.
