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.