如何在Rails 3中使用jQuery Uniform

Question

我正在尝试在我的rails webapp上安装“默认制服”，但尚未找到任何可靠的教程/指南。 我已经确认我有jquery gem

在我的Gemfile中：

gem 'jquery-rails', '2.0.2'

然后从我的应用程序目录中运行终端，以确保：

bundle install

我在我的样式表目录中放置了Uniform.default.css，在javascripts目录中放置了jquery.uniform.js，在图像目录中放置了图像。 然后，我将其包括在表单中：

  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 -->

不，不过图像正在显示！ 我查看了uniform.default.css文件的源，发现所有图像都相对于当前目录：

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

幸运的是，Rails 3应用程序的默认树的设置方法似乎仍然如此，但是存在一些问题。 我还尝试将其的每个实例编辑为一个绝对路径，该路径已确认对其他图像有效。 例如：

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

但是仍然没有运气。 有任何想法吗？ JavaScript是否还取决于图像的特定路径？ 不应该吧？

Answer 1

尝试将文件添加到vendor / assets目录中。 放在里面的CSS

vendor/assets/stylesheets

js中

vendor/assets/javascripts

和中的图像

vendor/assets/images

然后将以下行添加到app / assets / stylesheets / application.css：

*= require uniform.agent

将您放置在供应商/资产/ javascripts中的js文件重命名为uniform.js，并将其添加到app / assets / javascripts / application.js中

//= require uniform

Answer 2

！ 进行了一些实验，但最终像这样集成了jQuery Uniform：

通过在Gemfile中包含以下内容来确保已安装jQuery gem：gem'jquery gem 'jquery-rails', '2.0.2'

从以下位置下载您感兴趣的任何样式： http ： //uniformjs.com/#themes

将图像添加到/ vendor / assets / images，将javascript文件添加到vendor / assets / javascripts，将样式表添加到vendor / assets / stylesheets。

将CSS文件中的任何背景url图像路径从url（'../ images / imagename.png'）编辑为

url('/assets/imagename.png')

因此，所有这些资产最终都会放入一个大目录，即资产。 分开只是为了开发商的理智。

我还确保将其包括在主布局的顶部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 -->

就这样。 无需对配置文件进行模糊的编辑，也无需对其他需要更多向导代码的修复进行随机的错误修复，...

现在，我可以使用一个版本，然后从所有其他实验中删除所有潜在影响，这变得更加直接。

希望能帮助到你。