Ruby on Rails 3.1 和 jQuery UI 图像

【问题标题】：Ruby on Rails 3.1 and jQuery UI imagesRuby on Rails 3.1 和 jQuery UI 图像
【发布时间】：2011-08-28 06:08:27
【问题描述】：

我正在使用 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 主题的正确位置在哪里？

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

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

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

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

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

【问题讨论】：

标签： jquery-ui ruby-on-rails-3.1


【解决方案1】：

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

【讨论】：

【解决方案2】：

从 Google 获取 CDN 托管主题：

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

【讨论】：

    【解决方案3】：

    我喜欢选择性地下载 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。

    目录结构：

    app/assets/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

    app/assets/stylesheets/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

    config/application.rb

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

    【讨论】：

      【解决方案4】：

      使用 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 相关的内容放在 vendor/assets 中，如下所示：

      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 函数。在这里观看：

      编辑：我忘了提到这在本地和Heroku 上都可以在Cedar stack 上工作。

      【讨论】：

        【解决方案5】：

        对我有用的不是在app/assets/stylesheets/ 中拥有jQuery 主题CSS 文件，在app/assets/images/ 中拥有图像。我将它们放入app/assets/images/images/，它起作用了。这是一种 hack，但在这一点上它似乎可以工作，只需最少的捏造并且无需修改 CSS 文件。

        【讨论】：

          【解决方案6】：

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

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

          【讨论】：

          • 它不适合我 :( - 通过将图像放入 app/assets/images/images/ 使其工作 - 根据 Steve Weet 的 cmets。
          【解决方案7】：

          在这里结合建议对我有用：

          将 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 文件夹的情况下预编译和解析图像所需要的。

          【讨论】：

            【解决方案8】：

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

            app/assets/javascripts/application.js

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

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

            • 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 .
*/

            【讨论】：

            • 完美运行。即使使用新的 Twitter Bootstrap jQuery UI 主题。
            【解决方案9】：

            在 Ruby on Rails 中有一个 proposed fix 可以使 jQuery UI 图像的预编译工作。

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

            【讨论】：

            • 3.1.1rc1 似乎接受了该修复。但我认为它只适用于预编译资产；在开发模式下，它们在运行时似乎没有帮助。
            【解决方案10】：

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

            假设您在 /vendor/assets/stylesheets/ 文件夹中有 jQuery UI 主题。然后你要修改application.css：

            /* =require ui-lightness */

            并在/config/initializers

            中创建plugin_assets_monkey_patch.rb 
            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
            每个/vendor/assets/stylesheets/ 子文件夹中的

            index.css 保证将编译jquery-ui-1.8.11.custom.css 之类的样式表（如果您需要该子文件夹）。

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

            【讨论】：

              【解决方案11】：

              我已经习惯了老办法：

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

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

              【讨论】：

              • 从我的快速搜索来看，资产管道似乎存在问题，并且没有从供应商/资产目录中提供图像。话虽这么说，jquery-ui 的 CSS 工作方式，它总是会在“images/”中查找文件而不是“assets/”。由于它是一个相对目录，因此它实际上会点击“assets/images”，这使情况变得更加复杂。我快速而肮脏的解决方法是将图像放在“公共/资产/图像”中。它不漂亮但有效。我确信最终资产管道将能够正常工作。
              • 我当然希望这也能尽快解决。当我在供应商/区域中有图像时，我不断收到诸如“服务资产 /images/ui-bg_highlight-hard_100_f5f3e5_1x100.png - 404 Not Found”之类的错误。
              • 这对生产有用吗？我尝试预编译我的资产，但这不再有效。我最终不得不编辑主题 css 并将其转换为 sass 并将所有图像更改为 image-url("...")
              • 我不会手动将任何内容放入 public/assets 中，因为那是 sprockets 编译缓存目录，如果你曾经运行过“rake assets:clean”，它会删除它。该目录仅用作编译缓存。我将在下面发布一个不同的 hacky 解决方案。
              【解决方案12】：

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

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

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

              3.) 使用 find "url(images/" 和 replace 删除 CSS 中所有图像的路径 ""只留下图像文件名。

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

              宾果！一切都应该正常工作。

              【讨论】：

              • 有点麻烦的解决方案，因为每次更新或更改主题时都必须更新 css。 Rails 的创建者一定想到了这一点。我们正在谈论的是JQuery。如此重要和标准的事情，所以他们必须有一个简单而优雅的解决方案。无论如何感谢您的回复。很高兴看到我不是唯一一个为此苦苦挣扎的人。
              • 为了避免更新 css，您还可以创建 app/images/images 并将 Jquery-UI 图像放在那里。但这两种图像修复解决方案都很糟糕。
              • 所以我最好的解决方案是将包含主题（css 和 images 文件夹不变）的 jquery 文件夹放在 assets/stylesheets 文件夹中，然后放入： 在 app/views/layouts/application.html.erb 文件中。有点不合时宜，但它可以工作，并且易于更新。
              • Steve Weet 的解决方案在 Rails3.1.1 下为我工作 - 虽然到目前为止只在开发模式下测试过 :)
              【解决方案13】：

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

              有一个名为 jquery-ui-themes 的 gem，其中包含已使用 image-path helper 转换为 sass 的 default jQuery UI themes。因此，您只需将 gem 添加到您的 application.css 文件中即可包含 gem 并立即获取任何默认主题

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

              【讨论】：

              【解决方案14】：

              所以，这里有一个一个的方法，它没有这里提到的其他一些缺点——它不需要你拆开主题并将它的一部分放在不同的地方，它不需要符号链接，它仍然允许您将主题 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/

              【讨论】：

                【解决方案15】：

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

                首先，我的目录结构是这样的：

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

                其次，我的符号链接是：

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

                这最终对我有用。

                【讨论】：

                  【解决方案16】：

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

                  app/assets/javascripts/application.js

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

                  app/assets/stylesheets/application.css

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

                  vendor/assets/stylesheets/vendor.css

                   /*
 *= require_self
 *= require_tree .
*/

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

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

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

                  【讨论】：

                  • Heroku 经常增加一点难度，最终会浪费一两个小时。非常感谢分享。非常感谢！
                  【解决方案17】：

                  工作设置示例：

                      $ 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

                  【讨论】：

                  • 请注意发布完全相同的“样板”答案。我们倾向于将它们标记为潜在的垃圾邮件。尝试调整您的答案以适合 OP 的问题。谢谢。
                  • 我只是想通过为大多数通过 Google 访问这两个页面的人们提供完整的解决方案来帮助他们，并节省他们的时间。
                  • 请不要误会我的评论，您的答案看起来很棒，但“样板”的答案往往会吸引旗帜。只是把事情混在一起。干杯。
                  • @npiv - 请参阅：stackoverflow.com/questions/6133818/…。我要说的是，复制和粘贴答案可能会被社区负面看待并标记为垃圾邮件。这个和另一个答案被标记为这样。您应该根据问题定制答案。
                  • 你们 -1ers 的部署情况如何？我很确定符号链接仍然存在。为什么你会因为某些东西在你的设置中不起作用而投反对票？减号应该转到 jqui 或资产管道 IMO ：P
                  【解决方案18】：

                  我认为您可以将 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)
}

                  【讨论】：

                  • 谢谢，但我不想编辑主题中的任何内容。那我宁愿在application.html.erb中使用stylesheet_link_tag
                  • 对，但请注意，在生产环境中它将超出单个文件压缩。
                  猜你喜欢
                  • 2011-11-30
                  • 2012-02-10
                  • 2011-09-13
                  • 2011-09-08
                  • 2011-09-02
                  • 1970-01-01
                  • 2010-09-18
                  • 1970-01-01
                  • 1970-01-01
                  相关资源
                  最近更新 更多
                  热门标签
                  Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode