Rails and jQuery: How to Integrate jQuery UI into Your Rails App
Wednesday, June 9th, 2010
It’s the quickest way to get your app looking slick in no time. It’s also highly flexible. jQuery UI’s themeroller feature allows you to tweak your css settings (and the look of your jQuery ui elements) right in a web browser (Wow! We must be living in the 21st century!)
Anyway, you can then preview your ui elements and tweak to your heart’s delight. When you’re finally happy with the look, you can then download your theme with all the css and js code rolled up in a nice .zip file.
It sure is handy and a lot faster than combing through all that css in Textmate.
So, in this post, you’re going to learn how to integrate jQuery ui into your Ruby on Rails application. It can be a bit tricky at first, since the instructions you get with jQuery ui are not Rails-specific.
So listen up! Grab a Redbull or throw a couple stiff espressos down your gullet, sit back and hark unto me, your faithful Rails Developer, as I take you by your soft little developer hand and teach you everything you need to know to get your Rails app” jQuery-ui-ified”.
Step 1: Download jQuery
I assume you have jQuery installed already. If not, it’s your first step. Obviously. Here’s how to get it into your app.
If you don’t, any plugins that depend on jQuery won’t work. The you’ll end up Googling until dawn. We don’t want that to happen. So once you have that step covered, you…
Step 2: Pick a Theme from JQuery UI
Grab a theme you like from the jQuery themeroller page. Click on the “Gallery tab” to preview different themes. I’m going to grab a really ugly theme for the purposes of this post. It’s called “blackness”.
Now it’s your turn. Find a theme you like, then click the orange “download theme” button. You’ll be taken to a page where you can choose which elements to included with your download: draggables, buttons, date pickers, accordians…selectables…sliders… tabs… progressbars…effects…and all sorts of other ui gooey goodness. Your download will be a tightly-rolled .zip file. It’ll look something like this…
Inside, you’ll find the following files:
Let’s open the js file first:
Hey wait a second. Are you still with me? You gotta pay attention here: Grab another Red Bull. I’ll wait.
You all set? Good. Back to brain expansion.
Next, reference this file in your application layout file: after your jquery link. (I’m leaving file extensions on the files we included to set them apart from other css and js files).
Step 3: CSS
O.K., now it’s time to get the CSS into your app. Open the CSS folder that was inside that zip. It contains another folder named for your custom theme. In my case, it’s named “ui-darkness”.
Inside of that you’ll find an images folder as well as the custom css file. Stick the custom css file (“jquery-ui-1.8.2.custom.css”) into your good ‘ole public/stylesheets folder.
Now reference that file in your application layout:
Next up: the images folder. This is where a lot of people get tripped up: they assume they should put everything from the images folder (fades, animations, gradients, etc.) right into their public/images folder. Nope. Instead, you need to stick the images folder inside of your css folder so jQuery ui can find them. Like so:
Step 4: HTML
O.K. We’re almost done. Here’s the last step: creating the html that interacts with our jQuery js and css. jQuery UI makes this part brain-dead simple. .
Here is the basic structure:
Can’t get much simpler than that. Of course, you’ll probably want to load up the content area with partials. Like so:
Done. Now let’s refresh our view and see what our page looks like now…
Nice! Our skeletal HTML is now styled and the jQuery tabs look great (at least if you’re in a Halloween mood).
But the point is, they work. Which is a lot more than you could say before you read this post.
Wait a second. I just noticed something. After you click and activate the tab in Firefox, a weird dotted border appears. Like this:
This happens a lot in WordPress themes you purchase, too. How do you get rid of that?
Never fear. Chris, your crafty coder, has a simple little trick to rescue you from css glitch land. Follow closely:
Open up your custom css file (“jquery-ui-1.8.2.custom.css”). Find the selector that reads…
.ui-tabs .ui-tabs-nav li a
Now add the following code:
BAM! Now our tab looks normal in Firefox after clicking it. No more dashed borders.
Cause I didn’t want you to get this far and be stuck with a bunch of crappy outlines around your beautiful jQuery tabs. You know why not? Cause I’m a nice guy.
And YOU are a more empowered programmer. A geek to take on the world. A coder on a crusade. Now get some sleep. It’s way past your bedtime. See you next post.