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 enable our applications to have a cool user interface (even animations) in a faster way. You don't have to force yourself to work with CSS all the time just to have a decent UI for your web app. This is fun and very stylish, it 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.
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.
Step 2: Add a text box inside the <body> tag. User will be able to click this and show a jQuery UI calendar picker later.
Step 3: Add the jQuery library before the ending </body> tag. This is because jQuery UI is built on top of jQuery library.
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.
Step 5: Add jQuery UI theme via CSS external link, put it inside the <head></head> tag, after the <title></title> tag. This CSS will make our UI stylish.
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.
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. 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.
Smoothness Theme LIVE DEMO
2.2 jQuery UI with Vader theme hosted by Google too.
Vader Theme LIVE DEMO
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 library is self hosted in the example code below.
Self Hosted jQuery UI LIVE DEMO
DOWNLOAD ALL EXAMPLE CODE ABOVE
Want to see more jQuery UI live demos? You can always visit the jQuery UI official demos:
jQuery UI LIVE DEMOS
Go to jQuery UI Download Builder
4.0 The Code of a Ninja Resources
For FREE programming tutorials, click the red button below and subscribe! :)