Detailed guide of how to setup jQuery UI – Part 1

Indeed jQuery UI is a great library but downloading and installing jQuery UI is not straight forward thing. It is slightly more complicated than setting up jQuery and it requires some attention.

jQuery UI Library can be downloaded from jQueryUI official website. The downloading process is a little more complex than for other JavaScript libraries.

Decide a Theme

jQuery UI library comes with many built-in themes. If you don't select any theme before downloading, then the default theme which is "UI-Lightness" will be downloaded. So, before downloading jQuery UI library, you need to decide on a theme. jQuery UI website not only allows you to select any of the predefined themes but it also gives facility to create your own custom theme.

To start, go to http://jqueryui.com and click the Themes link.

This will bring up ThemeRollar Page, which have list of all predefined themes and also allows to create custom theme. jQuery UI is highly customizable, and you can change the appearance almost every feature that you use. If you want to create your own style, then the Roll Your Own tab (which is selected by default) is for you. You can change every aspect of the CSS that is used by jQuery UI.

And all the predefined themes (as of now 24) are available on Gallery tab.

Okay, so now you have selected a theme in mind. So we are ready to create your jQuery UI download. Click the Download button at the top of the page to move to Build your Download page.

Now, when this page is loaded you will find that This page has a list of jQuery UI components, which are divided into 4 groups:

  • UI Core
  • Interactions
  • Widgets
  • Effects

Now based on your requirement, you can select only those features which are required for your project as that will reduce the size of jQuery UI Library.

Now select the theme that you want and click on download. If you have created a custom theme, then you need to click on "Download Theme" button which is present on ThemeRoller Page -> Roll your own tab.

So, when you click on download a zip file will gets downloaded on your machine. In my upcoming post, I will walk you through the zip file and it's various content.

Meanwhile a quick tip for you: To reduce the bandwidth to deliver jQuery UI, always load your jQuery UL library from Google, Microsoft or jQuery CDN(Content Delivery Network). You can find the CDN links here.

I hope you will find this post useful.

Feel free to contact me for any help related to jQuery, I will gladly help you.



Responsive Menu
Add more content here...