jQuery UI Widgets

Many web apps, regardless of industry, will ultimately need to do many similar things. Whether to schedule a haircut appointment, or confirm a financial transaction - web apps will need to provide the user with a widget to choose a date. In the same way, you may want to show your user the progress of uploading a file by using a progress bar. Rather than creating all of these widgets on a web app from scratch, using jQuery UI can be an extremely powerful alternative. When using the default widgets it is important to make sure the styling of the widget fits in your branding. Sometimes leaving the default styling is the right choice - however many times it makes more sense to tweak the underlying css. The first part of this blog post will cover some of the specifics to override the default CSS. Widgets by default use the jQuery CSS framework (see http://api.jqueryui.com/theming/css-framework/). Using the list of CSS class rules provided by jQuery you can tweak the appearance of the widget.

Continuing my first example from above, let’s take a look at one of the jQuery UI built in widgets - the datepicker. As long as you have jQuery UI loaded on your website it is very easy to create a datepicker. All you have to do is create an input field and then call the .datepicker() function on it.

See my fiddle here:

If you look closely you can see that I have changed some of the subtle styling of the datepicker. Take a look at my fiddle to see some of the specifics that I have used to make the datepicker feel like more of a cohesive part in the web app. Changing things such as the text color, the font, and other visual elements is a good way to help the design.

One of the jQuery UI widgets that I have used extensively is the dialog UI. In both of my summer internships I have used the dialog to convey information. In one case I was able to use the jQuery UI widget - in the other case I had to rely solely on Javascript. One of the main issues this caused when related to the idea of a modal dialog. A modal dialog forces the user to click the button to close the dialog - they cannot merely click away and or hit the escape key. Without using jQuery I was relying on the showModalDialog (see https://msdn.microsoft.com/en-us/library/ms536759(v=vs.85).aspx). While this was working fine (the web team had been using it in a number of locations that I had nothing to do with) it had been removed from web standard and therefore was in the process of being deprecated. See https://developer.mozilla.org/en-US/docs/Web/API/Window/showModalDialog and a very interesting discussion on stackoverflow.com http://stackoverflow.com/questions/20733962/why-is-window-showmodaldialog-deprecated-what-to-use-instead.

Since we were not using jQuery there were few options available to us - either write a new function in house that accomplished the same thing, or find a third party plugin. I left the team before I saw the final solution. However, at my other internship we were using jQuery UI and so I was able to create modal dialogs just by setting the modal option to ‘true’ in the properties.