babinho's weblog

Ruby and Coffee

Rails 3.1 JQuery-UI

| Comments

If you are considering the upgrade to Rails 3.1.x and you wish to include the JQuery-UI in your web application follow these simple steps:

Load jquery-ui in your app/assets/javascripts/application.js

app/assets/javascripts/application.js
1
2
3
4
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require_tree .

Pick and download a nice theme from: JQuery-UI themes site

Copy jquery-ui-1.8.16.custom.css (version number could differ) to your vendor/assets/stylesheets folder as jquery-ui.css (This will save you time later when you are updating or changing the theme) and include it in your app/assets/stylesheets/application.css

app/assets/stylesheets/application.css
1
2
3
*= require_self
*= require jquery-ui
*= require_tree .

Copy images from the images folder to vendor/assets/images

Modify vendor/assets/stylesheets/jquery-ui.css and replace “images/” to “/assets/”

Now that you have everything set up and ready, go ahead and use the fancy JQuery-UI plugins

Comments