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.

jQuery UI

As I have previously mentioned in this blog, jQuery alone can be extremely useful in making user interface operations run quicker. However, that is not all jQuery excels out on the front-end of web programming. The jQuery Foundation also offers jQuery UI (http://jqueryui.com/download/) which adds further capabilities to jQuery specifically aimed at enabling the creation of interactive and user friendly user inferface elements and widgets. I have used jQuery UI numerous times for my professional and personal development efforts. A specific example is when I wanted to hide or show results based on what a user entered into the search field.  

Here is a generic example of the logic I followed, this example only has a few elements that need to be either shown or hidden - in reality there were upwards of 5,000 elements that had been loaded into the DOM. This is where some of the “shortcuts” of jQuery really help to make the process simpler and easier to follow. In my below jsFiddle there are 10 divs that have sequential numbers appended to the end of their ids. This example shows how using jQuery an array of all the divs can easily be created and traversed. When the ‘show me evens’ button is clicked the jQuery function .addClass() adds a class to all of the odds that will set their display to none. It does this by grabbing all of the divs that start with “id-” and then checks to see if the appended index is odd or even. It is also interesting to note that in this example I also use make of the jQuery .each() function as well as jQuery UI Button functions (which adds functionality to standard buttons see: http://api.jqueryui.com/button/). Although I am only using the UI button to either disable or enable the button - some of the other functions available include: icons, text, and labels.

See my full jsFiddle here:

The widgets that are included with jQuery UI are also extremely useful because they allow for complete customization so you can customize the look and feel of the widgets while still relying on the underlying jQuery UI code. This is especially beneficial in real world software development environments because it is essential that all of the elements of a web app match the overall branding of the app and the company in general. Thanks to jQuery UI all you have to do is drop in your own custom CSS to the widget and just like that, it becomes a seamless part of your overall branding strategy. My next blog post will cover some of the built in widgets to jQuery UI like the datepicker, progress bar, and dialog.