如何将 jQuery Uniform 与 Rails 一起使用 3.

Question

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

在我的宝石文件中：

gem 'jquery-rails', '2.0.2'

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

bundle install

我把 uniform.default.css 放在我的样式表目录中，jquery.uniform.js放在我的 javascripts 目录中，把图像放在我的 images 目录中。 然后，我将它们包含在我的视图中，形式如下：

  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

尝试在供应商/资产目录中添加文件。在那里把 CSS 放在

vendor/assets/stylesheets

JS中的

vendor/assets/javascripts

和图像

vendor/assets/images

然后添加以下行到应用程序/资产/样式表/应用程序.css：

*= require uniform.agent

将

放置在供应商/资产/javascript中的js文件重命名为统一.js并将其添加到应用程序/资产/JavaScript/应用程序中.js

//= require uniform

Answer 2

噗！ 做了一些实验，但最终集成了jQuery Uniform，如下所示：

确保已安装 jQuery gem，方法是将其包含在 Gemfile 中： gem 'jquery-rails', '2.0.2'

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

将图像添加到/vendor/assets/images，将 javascript 文件添加到 vendor/assets/javascript，将样式表添加到 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 -->

就这样。 没有晦涩难懂的配置文件编辑或需要更多向导代码的其他修复的随机错误修复，...

现在我得到了一个工作版本，然后从所有其他实验中剥离了任何潜在的影响，这要简单得多。

希望对您有所帮助。