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

根据带有jQuery UI的Ruby on Rails 3.1中的Autocomplete字段,我应该在vendor/assets/stylesheets文件夹中放置一个jQuery UI主题.这听起来像是一个聪明的地方,但我不能让它工作:-(.

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

我当然可以使用旧的方式将主题放在public/stylesheets /文件夹中,并使用:

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

在application.html.erb中,但我想尝试成为一个现代人,我宁愿使用新的做法:-).

Answer 1

现在我们有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 .
*/

Answer 2

工作设置示例:

    $ 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

Answer 3

我已经堕落了以旧的方式去做:

我把jQuery文件夹放在assets/stylesheets文件夹中,然后输入:<%= stylesheet_link_tag "jquery/ui-lightness/jquery-ui-1.8.13.custom" %>in app/views/layouts/application.html.erbfile ,其中包含主题(不包含CSS和images文件夹).当我稍后更新jQuery时,这个解决方案是较少的淡褐色.

(感谢关于解决方案的所有建议.现在是时候结束了.)

Answer 4

我喜欢有选择地下载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,我依靠sprokets来缩小和压缩它们.

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

目录结构:

应用程序/资产/ JavaScript的/ 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

配置/ application.rb中

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

Answer 5

使用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功能.在这里观看:

• #279了解资产管道

• #268 Sass Basics

编辑:我忘了提到它在本地和在Cedar堆栈上的Heroku上都有效.

Answer 6

我知道这个帖子已经有了很多答案,但我会投入最适合我的方法.

有一个名为jquery-ui-themes的gem ,它包含已使用帮助程序转换为sass 的默认jQuery UI主题.因此,您只需将gem添加到文件中即可包含gem并获取任何默认主题image-pathapplication.css

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

Answer 7

现在有一个jquery-ui-rails gem(见公告).它将图像打包为资产(并从CSS文件中正确引用它们),以便正常工作.:-)