如何在Rails 3中使用jQuery Uniform

Question

I'm trying to get the Default Uniform up on my rails webapp, but have not yet found any solid tutorial/guide. I've confirmed that I have the jquery gem

In my Gemfile:

gem 'jquery-rails', '2.0.2'

and then ran in the terminal from within my app directory to make sure:

bundle install

I put uniform.default.css in my stylesheets directory, jquery.uniform.js in my javascripts directory, and the images in my images directory. I then include them in my view with the form:

  1 <!-- for jQuery uniform -->
  2 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
  3 <%= javascript_include_tag "jquery.uniform.js" %>
  4 <%= stylesheet_link_tag "uniform.default.css" %>
  5 <script type='text/javascript'>
  6   // On load, style typical form elements
  7   $(function () {
  8     $("select, input, button, textarea, submit").uniform();
  9   });
 10 </script>
 11 <!-- end for jQuery uniform -->

No, images are showing up though! I peeked into the source of uniform.default.css file and found that all the images are relative to the current directory:

  background-image: url("../images/sprite.png");

Luckily, that still seems to be the case the way the default tree of the rails 3 app is set up, but there are issues. I also tried editing every instance of this to be an absolute path that I've confirmed to be valid with another image. eg:

  background-image: url("/assets/images/sprite.png");

But still no luck. Any ideas? Does the javascript also depend on a particular path for the images? It shouldn't, right?

Answer 1

Try adding the files in the vendor/assets directory. in there put the css in the

vendor/assets/stylesheets

the js in

vendor/assets/javascripts

and the images in

vendor/assets/images

and than in add the following line to app/assets/stylesheets/application.css:

*= require uniform.agent

Rename the js file that you placed in vendor/assets/javascripts to uniform.js and add this in the app/assets/javascripts/application.js

//= require uniform

Answer 2

Phew! Took some experimentation, but finally integrated jQuery Uniform like so:

Ensure you have the jQuery gem installed by including this in your Gemfile: gem 'jquery-rails', '2.0.2'

Download whatever style you're interested in from: http://uniformjs.com/#themes

Add the images to /vendor/assets/images, the javascript file to vendor/assets/javascripts and the stylesheet to vendor/assets/stylesheets.

Edit any background url image paths in the css file from: url('../images/imagename.png') to

url('/assets/imagename.png')

So all these assets are eventually plopped into one big directory I guess, named assets. The separation is only for the developer's sanity.

I also made sure to include that in the head of my main layout, application.html.erb :

<%= stylesheet_link_tag "application", :media => "all" %>
<%= stylesheet_link_tag "uniform.aristo", :media => "all" %>  <!-- for jQuery Uniform -->
<%= javascript_include_tag "application" %>
<%= javascript_include_tag "jquery.uniform" %> <!-- for jQuery Uniform -->

That's all. No obscure editing of config files or random bug fixes that need other fixes that require more wizard code, ...

It's much more straightforward now that I got a version working and then stripped away any potential influence from all my other experiments.

Hope it helps.