Monday, November 18, 2013

jQueryUI WaitButton Integrated with Twitter Bootstrap Styles

A few months ago, I wrote about a button widget that contained a spinner to indicate the user clicked and an action was being performed. At the time, I used the default jQuery UI styling and themes. However, now that I use Bootstrap as my base framework and cherry-pick what I need from jQuery UI, the widget lost all of its visual styling. Since the WaitButton does everything I need, I just have to figure out how to apply styles to it so it matches the button styles in Bootstrap.

I considered using addyosmani/jquery-ui-bootstrap as a solution, but wanted to start with Bootstrap styles and only add the jQuery UI classes required that further enhanced the baseline Bootstrap button. I figured this would make it a bit more resilient to changes in Bootstrap over time. The jQuery UI Button widget has options to show an icon on either the left or right side of the button text. WaitButton makes use of the icon on the left side which, in jQuery UI speak, is known as the primary icon. This content is inside the button tag so needs to be styled in a way to line up properly. .ui-button-icon* and .ui-button-text* are the set of classes involved in aligning this content, however, they can't just be copied into your CSS from the jQuery UI styles. The padding and positioning won't result in a button that matches other Bootstrap buttons. If you were to line them up, the jQuery UI buttons will be taller and wider for the same text. Additionally, Bootstrap offers several colors of buttons which require the animated GIF in the WaitButton to match. I attempted to use a transparent background but it just didn't look good so I created several GIFs ( with matching backgrounds and created styles to swap the correct GIF into the button based on the btn-* class applied.

I eventually narrowed the set of styles down to these classes with the additions of the WaitButton specific classes to enable swapping the GIFs for different button colors. You can see a demo of the buttons on my sandbox and also download the CSS/GIfs required to adapt the WaitButton widget to work nicely with Bootstrap.