jquery-ui - Ruby on Rails 3.1 和 jQuery UI 图像

Question

我正在使用 Ruby on Rails（Edge，开发版）和 Ruby rvm 1.9.2。

application.js如下。

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

在 Ruby on Rails 3.1 中放置jQuery UI主题的正确位置在哪里？

根据Ruby on Rails 3.1 with jQuery UI 中的自动完成字段，我应该在 vendor/assets/stylesheets 文件夹中放置一个 jQuery UI 主题。这听起来像是一个聪明的地方，但我没有让它工作:-(。

我设法通过将 CSS 放在 assets/stylesheets 文件夹中来加载它，但是我没有设法加载图像。

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

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

在 application.html.erb 中，但想成为一个现代人，我宁愿使用新的做 tings 的方式:-)。

score 26 · Accepted Answer

现在我们有了 Ruby on Rails 3.1.0，这对我有用：

app/assets/javascripts/application.js

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

这直接包括jquery-railsgem 提供的 jQuery UI。但是 gem 不提供主题文件。对于这些，我theme在下添加了一个目录vendor/assets/stylesheets，其中包含：

jquery.ui.theme.css文件，
jQuery UI 主题的images目录。

请务必将主题images目录与 CSS 文件一起保存！不要将图像文件放在下vendor/assets/images，否则 jQuery 将找不到它们（在下搜索它们/assets/images）。

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

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

score 19 · Accepted Answer

工作设置示例：

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

score 7 · Accepted Answer

我已经习惯了老方法：

我将包含主题（CSS 和图像文件夹均未更改）的 jQuery 文件夹放在 assets/stylesheets文件夹<%= stylesheet_link_tag "jquery/ui-lightness/jquery-ui-1.8.13.custom" %>中，然后放入：app/views/layouts/application.html.erb当我稍后更新 jQuery 时，这个解决方案是一个更少的榛子。

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

score 6 · Accepted Answer

我喜欢有选择地下载 jQuery UI JavaScript 代码，以便我可以轻松升级到任何未来版本并拥有轻量级的 jQuery UI（仅包括所需的文件，此处为progressbar.js）。

我为“Dot Luv”jQuery UI 主题设置了以下设置。

笔记：

JavaScript 和 CSS 文件未压缩并分别取自jquery-ui-1.8.16.custom/development-bundle/ui和jquery-ui-1.8.16.custom/development-bundle/themes/dot-luv，我依靠 sproket 来缩小和压缩它们。

图片来自jquery-ui-1.8.16.custom/development-bundle/themes/dot-luv/images.

目录结构：

目录结构

应用程序/资产/javascripts/application.js

//= require jquery
//= require jquery-ui/v1.8.16/Core/jquery.ui.core
//= require jquery-ui/v1.8.16/Core/jquery.ui.widget
//= require jquery-ui/v1.8.16/Widgets/jquery.ui.progressbar
//= require jquery_ujs

应用程序/资产/样式表/application.css.scss

*= require_self
*= require jquery-ui/v1.8.16/dot-luv/jquery.ui.all
*= require jquery-ui/v1.8.16/dot-luv/jquery.ui.base
*= require jquery-ui/v1.8.16/dot-luv/jquery.ui.core
*= require jquery-ui/v1.8.16/dot-luv/jquery.ui.progressbar
*= require jquery-ui/v1.8.16/dot-luv/jquery.ui.theme

配置/应用程序.rb

config.assets.paths << File.join(Rails.root,'vendor/assets/images/jquery-ui/v1.8.16/dot-luv/')

score 5 · Accepted Answer

使用 Ruby on Rails 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 相关的内容放在供应商/资产中，如下所示：

jQuery UI 样式表：

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

jQuery UI 图片文件夹：

vendor/assets/images/images

请注意，您可以像我在此处使用“jquery-ui/ui-lightness”路径所做的那样在样式表路径中创建其他文件夹。这样，您可以将多个 jQuery 主题很好地分隔在它们自己的文件夹中。

**重新启动服务器以加载任何新创建的加载路径**

Ryan Bates 有一些关于 Ruby on Rails 3.1 中的资产管道和Sass的精彩截屏视频，其中他展示了如何在 Sass 中使用 @import 函数。在这里观看：

编辑：我忘了提到这在本地和Cedar stack上的 Heroku上都有效。

score 5 · Accepted Answer

我知道这个帖子已经有很多答案了，但我会给出最适合我的答案。

有一个名为jquery-ui-themes的 gem ，其中包含已使用helper转换为 sass的默认 jQuery UI 主题。因此，您可以包含 gem 并通过将它们添加到文件中来获取任何开箱即用的默认主题image-pathapplication.css

如果您想使用自己的自定义主题（就像我一样），有一个 rake 任务会自动将 CSS 文件转换为 SCSS 并使用image-path帮助程序找到正确的路径。

score 5 · Accepted Answer

现在有一个jquery-ui-rails gem（见公告）。它将图像打包为资产（并从 CSS 文件中正确引用它们），因此一切正常。:-)

score 3 · Accepted Answer

所以，这里有一种方法，它没有这里提到的一些其他方法的缺点——它不需要你拆开主题并将它的一部分放在不同的地方，它不需要符号链接，并且它仍然允许您将主题 css 编译到一个主要 css 中，作为资产管道的一部分。它不需要像 Nash Bridges 的建议那样的猴子补丁。

但是，它确实需要一种额外的 hacky 配置行。（不过，基本上是单线）。

好的，把你的主题放在 vendor/assets/jquery/ui-lightness/ 中，就像你想要的那样。（同样适用于 lib/assets 或 app/assets）。

和

/* =require ui-lightness */

在您的 application.css 中。到现在为止还挺好。现在要让图像正确显示，只需将其添加到 config/application.rb：

initializer :add_jquery_ui_asset_base, :group => :all, :after => :append_assets_path do
   config.assets.paths.unshift Rails.root.join("vendor", "assets", "stylesheets", "jquery-ui", "ui-lightness").to_s
end

对我来说，它现在可以在我能想到的开发、生产和其他非标准资产配置中使用（比如带有 debug=false 的开发，这会导致其他一些尝试的解决方案出错）。

更多信息请访问http://bibwild.wordpress.com/2011/12/08/jquery-ui-css-and-images-and-rails-asset-pipeline/

score 2 · Accepted Answer

基于此处的许多其他建议，我找到了一个适用于我的开发环境和 Heroku 生产环境的解决方案。

应用程序/资产/javascripts/application.js

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

应用程序/资产/样式表/application.css

/*
 *= require_self
 *= require vendor
 *= require_tree .
*/

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

 /*
 *= require_self
 *= require_tree .
*/

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

无需其他更改即可在 Heroku 生产环境中工作。

感谢@denysonique、@softRli 和@Paul Cook 之前的回答对我有帮助。

score 1 · Accepted Answer

在 Ruby on Rails 中有一个提议的修复程序，可以使 jQuery UI 的图像的预编译工作。

（从 3.1.0rc6 开始，资产预编译器使用正则表达式/\w+\.(?!js|css).+/来查找要编译的内容。这会遗漏所有 jQuery UI 图像，因为它们的名称包含破折号和下划线。）

score 1 · Accepted Answer

在这里结合建议是让事情对我有用的原因：

将 jQuery UI 主题 CSS 文件夹放在vendor/assets/stylesheets.

放入：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

这就是无需编辑 jQuery UI 主题 CSS 文件或将图像移出主题 CSS 文件夹即可预编译和解析图像所需要的。

score 1 · Accepted Answer

为了让它在我的本地开发环境和 Heroku 上都能正常工作，我做了与denysonique 建议的几乎相同的事情，但最后有一些不同之处：

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

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

其次，我的符号链接是：

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

这最终对我有用。

score 0 · Accepted Answer

我为使一切正常工作所做的工作如下。

1.) 将CSS添加到assets/stylesheets文件夹

2.) 将图像添加到assets/images文件夹

3.) 使用find "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) ; }

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

score 0 · Accepted Answer

我认为您可以将 ui 样式放在 app/assets/stylesheets 中。做这样的事情：

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

在 'jquery-ui' 样式表中，如下所示：

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

score 0 · Accepted Answer

使用 Ruby on Rails 3.1.1，我简单地将文件放置如下。无需进行其他更改。

应用程序/资产/样式表/jquery-ui-1.8.16.custom.css
应用程序/资产/图像/ui-bg_highlight-soft_75_cccccc_1x100.png
...

score 0 · Accepted Answer

对我有用的是，而不是在 jQuery 主题 CSS 文件app/assets/stylesheets/和app/assets/images/. 我把它们放进去app/assets/images/images/，它起作用了。这是一种 hack，但它似乎在这一点上工作，只需最少的捏造并且无需修改 CSS 文件。

score 0 · Accepted Answer

从 Google 获取 CDN 托管主题：

    = stylesheet_link_tag 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/ui-lightness/jquery-ui.css'

score -1 · Accepted Answer

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

假设您在/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

每个子文件夹中的index.css保证将编译/vendor/assets/stylesheets/样式表（如果您需要该子文件夹）。jquery-ui-1.8.11.custom.css

config.assets.paths确保文件夹 like/vendor/assets/stylesheets/ui-lightness/images在应用程序根范围内可见。

jquery-ui - Ruby on Rails 3.1 和 jQuery UI 图像

18 回答 18

Related

Reference