Jquery ui RubyonRails3.1和jQueryUI图像

我正在使用RubyonRails（Edge，开发版本）和RubyRVM1.9.2

application.js

如下所示

//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require_tree 

在RubyonRails3.1中，主题放在哪里合适

据我所知，我应该在vendor/assets/stylesheets文件夹中放置一个jqueryui主题。这听起来是一个拥有它的好地方，但我无法让它发挥作用

我通过将CSS放在assets/stylesheets文件夹中，成功地加载了CSS，但我没有成功加载图像

当然，我可以使用旧方法，将主题放入public/stylesheets/文件夹，然后使用：

<%= stylesheet_link_tag "jquery/ui-lightness/jquery-ui-1.8.11.custom" %>

---

在application.html.erb中，但为了成为一个现代人，我宁愿使用新的方式来做事情：-）。

为了让一切正常工作，我做了如下工作

//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require_tree 

1.）将CSS添加到资产/样式表文件夹中

2.）将图像添加到资产/图像文件夹中

3.）使用查找“url（images/”和将替换为”删除CSS中所有图像的路径，只留下图像文件名

/* Example: */ .ui-icon { background-image: url(images/ui-icons_222222_256x240.png) ; }
/* Becomes: */ .ui-icon { background-image: url(ui-icons_222222_256x240.png) ; }

---

答对了！一切都应该正常工作。

我想你可以在app/assets/stylesheets中放置ui样式。执行以下操作：

# app/stylesheets/application.css.scss
//= require_self
//= require libraries/jquery-ui
//= require_tree .

.class{
  background: url(/assets/jquery-ui/ui-icons_222222_256x240.png)
}

vendor/assets/images/
                  jquery_ui/
                      images/
                          ui-bg_flat_0_aaaaaa_40x100.png
                          ...

在“jquery ui”样式表中，类似以下内容：

# app/stylesheets/application.css.scss
//= require_self
//= require libraries/jquery-ui
//= require_tree .

.class{
  background: url(/assets/jquery-ui/ui-icons_222222_256x240.png)
}

vendor/assets/images/
                  jquery_ui/
                      images/
                          ui-bg_flat_0_aaaaaa_40x100.png
                          ...

---

工作设置示例：

    $ cat app/assets/javascripts/application.js

    //= require jquery
    //= require jquery-ui


    $ cat app/assets/stylesheets/application.css

    /*
     *= require vendor
     *
     */


    $ cat vendor/assets/stylesheets/vendor.css

    /*
     *= require_tree ./jquery_ui 
     *
     */

    vendor/assets/ $ tree
     stylesheets
         vendor.css
             jquery_ui
                      jquery-ui-1.8.13.custom.css
                      ...
     images
        jquery_ui
            ui-bg_flat_0_aaaaaa_40x100.png
            ...

最后运行以下命令：

    vendor/assets/images $ ln -s jquery_ui/ images

---

享受你的jQuery用户界面吧

我已经习惯了用老办法：

我把jQuery文件夹放在assets/stylesheets文件夹中，其中包含主题（CSS和images文件夹不变），并把：

放在

app/views/layouts/application.html.erb

文件中。这个解决方案在我稍后更新jQuery时具有较少的模糊性

---

（感谢所有关于解决方案的建议。现在是结束的时候了。）

那一刻，我发现不是一个完美的解决方案，而是一个可行的解决方案

假设您在

/vendor/assets/stylesheets/

文件夹中有jQuery UI主题，那么您必须修改application.css：

/* =require ui-lightness */

并在

/config/initializers

Dir[File.join(Rails.root, 'vendor/assets/stylesheets/*/')].each do |dir|
    AppName::Application.config.assets.paths << dir

    index_content = '/*=require_tree .*/'

    index = File.join(dir, 'index.css')
    unless File.exist?(index)
        File.open(index, 'w') { |f| f.puts index_content }
    end
end

Dir[File.join（Rails.root，'vendor/assets/stylesheets/*/'）。每个do都是Dir|
AppName:：Application.config.assets.pathsRubyonRails中有一个使jQueryUI的图像预编译工作正常的功能

（从3.1.0rc6开始，资产预编译器使用正则表达式
/\w+\（？！js | css）。+/
来查找要编译的内容。这会丢失所有jQuery UI图像，因为它们的名称包括破折号和下划线。）
现在我们有了Ruby on Rails 3.1.0，这对我来说很有用：

app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require_tree .

这直接包括
jqueryrails
gem提供的jqueryui。但是gem不提供主题文件。对于这些文件，我在
供应商/资产/样式表下添加了一个
主题
目录，其中包含：


jquery.ui.theme.css
文件
jQuery UI主题的
图像
目录

确保将主题的
图像
目录与CSS文件一起保存！不要将图像文件放在
供应商/资产/图像
下，否则jQuery将找不到它们（在
/assets/images
下搜索它们）

最后，将
app/assets/stylesheets/application.css
文件更改为：

/*
*= require_tree ../../../vendor/assets/stylesheets
*= require_tree .
*/

这里结合了一些建议，让事情对我起了作用：

将jQuery UI主题CSS文件夹放在
供应商/资产/样式表中

将
vendor.css
放入
vendor/assets/stylesheets
中：

*= require_tree ./theme-css-name

在
production.rb
中，我添加了以下内容：

config.assets.paths << File.join(Rails.root,'vendor/assets/stylesheets/theme-css-name

config.assets.path基于这里的许多其他建议，我找到了一个在我的开发环境和Heroku上的生产环境中都可以使用的解决方案

app/assets/javascripts/application.js

app/assets/stylesheets/application.css

供应商/资产/样式表/vendor.css

我将jquery-ui-1.8.16.custom.css和关联的images文件夹添加到vendor/assets/stylesheets（我发现，除非images文件夹与vendor.css位于同一文件夹中，否则它不会工作）

为了在Heroku生产环境中工作，无需进行其他更改

感谢@denysonique、@softRli和@Paul Cook之前对我的回答。
使用Ruby on Rails 3.1.1，我只需按如下方式放置文件。无需进行其他更改


app/assets/stylesheets/jquery-ui-1.8.16.custom.css
app/assets/images/ui-bg_highlight-soft_75_cccc_1x100.png

为了在我的本地开发环境和Heroku上实现这一点，我做了与的几乎相同的事情，但最后有几个不同之处：

首先，我的目录结构如下所示：

# app/stylesheets/application.css.scss
//= require_self
//= require libraries/jquery-ui
//= require_tree .

.class{
  background: url(/assets/jquery-ui/ui-icons_222222_256x240.png)
}

vendor/assets/images/
                  jquery_ui/
                      images/
                          ui-bg_flat_0_aaaaaa_40x100.png
                          ...

其次，我的象征性联系是：

vendor/assets/images $ ln -s jquery_ui/images images

这就是最终对我起作用的地方。
对我起作用的不是在
app/assets/stylesheets/
中使用jQuery主题CSS文件，而是在
app/assets/images/
中使用图像。我将它们放在
app/assets/images/
中，然后它就起作用了。这是一种黑客行为，但在这一点上它似乎用最少的fud就能起作用使用RubyonRails 3.1.2，我做了以下工作

#app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require_tree .

对于CSS文件，我喜欢执行
@import
来更好地控制CSS文件的加载顺序。为此，我必须将
.scss
扩展名添加到
app/assets/stylesheets/application.CSS
文件，以及所有我想要导入的CSS文件，如jQuery UI CSS文件

#app/assets/stylesheets/application.css.scss

/*
* This is a manifest file that'll automatically include all the stylesheets available in this directory
* and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
* the top of the compiled file, but it's generally better to create a new file per style scope.
*= require_self
*/

@import "jquery-ui/ui-lightness/jquery-ui-1.8.16.custom.css.scss";

/* Other css files you want to import */
@import "layout.css.scss";
@import "home.css.scss";
@import "products.css.scss";
....

然后我将所有与jQuery UI相关的内容放在供应商/资产中，如下所示：

# app/stylesheets/application.css.scss
//= require_self
//= require libraries/jquery-ui
//= require_tree .

.class{
  background: url(/assets/jquery-ui/ui-icons_222222_256x240.png)
}

vendor/assets/images/
                  jquery_ui/
                      images/
                          ui-bg_flat_0_aaaaaa_40x100.png
                          ...

jQuery UI样式表：

vendor/assets/stylesheets/jquery-ui/ui-lightness/jquery-ui-1.8.16.custom.css.scss

jQuery UI图像文件夹：

vendor/assets/images/images

请注意，您可以在样式表路径中创建其他文件夹，就像我在这里使用“jQueryUI/UILightness”路径所做的那样