Home jQuery

jQuery UI Tutorial for Beginners – Your Step by Step Guide!

jquery-ui-tutorial-for-beginners

Previously, we learned how to use jQuery to add some interactivity to our web pages. This time, are you getting started with jQuery UI? You’ve come to the right place!

This step by step tutorial aims to give you a head start in using jQuery UI. You probably know what jQuery is so you want to take a beautiful step forward with jQuery UI, and that’s awesome!

jQuery UI jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library.

Whether you’re building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

For me, Bootstrap and jQuery UI look good together. It also allows us to choose from different themes available, you can even create your own theme! But this post only covers running a very simple jQuery UI script in your web browser.

Contents of this post include:

1.0 Run jQuery UI in 6 Easy Steps
2.0 jQuery UI Sample Codes and Live Demos
3.0 Download Source Codes
4.0 Online Resources
5.0 What’s Next?
6.0 Some Notes

1.0 Run jQuery UI in 6 Easy Steps

The following steps below will make an awesome date picker with jQuery UI. Let’s code!

Step 1: Prepare your HTML file with just its basic structure.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        
    </head>
<body>

</body>
</html>

Step 2: Add a text box inside the tag. User will be able to click this and show a jQuery UI calendar picker later.

<input type="text" id="myDatepicker" placeholder="Click to pick date" />

Step 3: Add the jQuery library before the ending tag. This is because jQuery UI is built on top of jQuery library.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Step 4: Add the jQuery UI library under the code of step 3. This is actually the first step in enabling jQuery UI in your page.

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

Step 5: Add jQuery UI theme via CSS external link, put it inside the tag, after the tag. This CSS will make our UI stylish.

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css" />

Step 6: Enable jQuery UI date picker to our text box on Step 1. Add the following code under the code of step 5. This is how you make a simple text box to awesome jQuery UI date picker.

<script>
$( "#myDatepicker" ).datepicker();
</script>

Quick Tip: Always use the minified version. For instance, use jquery-ui.min.css instead of just jquery-ui.css

Continue to read below, you will see the complete code of the steps above.

2.0 jQuery UI Sample Codes and Live Demos

In the demo page, you have to click the text box saying “Click to pick date” to see jQuery UI with different themes in action.

By the way, examples 2.1 and 2.2 uses Google’s content delivery network to run jQuery UI, meaning you won’t have to download the jQuery and jQuery UI library, you just have to include it.


2.1 jQuery UI with Smoothness theme hosted in Google CDN.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>jQuery UI Tutorial for Beginners - smoothness theme - by codeofaninja.com</title>
        
        <!-- step 4 - include you jquery ui theme -->
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css" />
        
    </head>
<body>

<!-- step 1 -->
<input type="text" id="myDatepicker" placeholder="Click to pick date" />

<!-- step 2 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<!-- step 3 -->
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<script>
/* step 5 */
$( "#myDatepicker" ).datepicker();
</script>

</body>
</html>

2.2 jQuery UI with Vader theme hosted by Google too.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>jQuery UI Tutorial for Beginners - vader theme - by codeofaninja.com</title>
        
        <!-- step 4 - include you jquery ui theme -->
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/vader/jquery-ui.min.css" />
        
    </head>
<body>

<!-- step 1 -->
<input type="text" id="myDatepicker" placeholder="Click to pick date" />

<!-- step 2 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<!-- step 3 -->
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<script>
/* step 5 */
$( "#myDatepicker" ).datepicker();
</script>

</body>
</html>

2.3 What if I don’t want a CDN? I want to host my own jQuery UI library? No problem, you can always go to the jQuery UI download builder, you just have to select your preferred theme using the dropdown at the lower part of the page.

jquery ui download builder

jQuery UI library is self hosted in the example code below.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>jQuery UI Tutorial for Beginners - vader theme - by codeofaninja.com</title>
        
        <!-- step 4 - include you jquery ui theme -->
        <link rel="stylesheet" href="jquery-ui-1.10.3.custom/css/le-frog/jquery-ui-1.10.3.custom.min.css" />
        
    </head>
<body>

<!-- step 1 -->
<input type="text" id="myDatepicker" placeholder="Click to pick date" />

<!-- step 2 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<!-- step 3 -->
<script src="jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>

<script>
/* step 5 */
$( "#myDatepicker" ).datepicker();
</script>

</body>
</html>

3.0 Download Source Codes

The source code of this tutorial is part of our 30+ useful jQuery and PHP source code package. Each item in the package has its own tutorial like the one above.

If you are just starting out to learn web programming and serious about learning more, this is the right package for you. Click green button below to see the what is included in the package and download it there.


4.0 Online Resources

Want to see more of jQuery UI? You can always visit:

5.0 What’s Next?

Up Next: Learn PHP and MySQL CRUD Tutorial for Beginners – build a simple web application with PHP and MySQL database.

6.0 Some Notes

#1 Found An Issue?

If you found a problem with this code, we can solve it faster via Email or FB message, please send me a message via email mike@codeofaninja.com, or via our official Facebook page!

Please be more detailed about your issue. Best if you can provide an error message and your test or page URL. Thanks!

Please feel free to comment if you have any questions, suggestions, found something wrong or want to contribute to this code.

#2 Become a true Ninja!

We constantly add new tutorials and improve our existing tutorials and source codes. Be one of the first to know an update by subscribing to our FREE newsletter. CLICK HERE TO SUBSCRIBE FOR FREE!

#3 Thank You!

Thanks for reading our jQuery UI tutorial for beginners!