如何将jquery-ui添加到Ruby on Rails 3.1应用程序中？

I have added //=require jquery-ui to my application.js file and that seems to give me the javascript but I can't seem to get the stylesheets to be included. If I understand it right they should go in vendor/stylesheets but how do I get them to be included?

我已经将// = require jquery-ui添加到我的application.js文件中，这似乎给了我javascript，但我似乎无法将样式表包含在内。如果我理解它，他们应该进入供应商/样式表，但我如何将它们包括在内？

8 个解决方案

#1

Perhaps it's easier to use the jquery-ui-rails gem (see announcement). It packages everything up so things "just work".

也许使用jquery-ui-rails gem更容易（见公告）。它把所有东西打包起来，所以“只是工作”。

#2

You can use google CDN, to add the css theme inside the head section of your app. Simply add this application.html.haml under the %head section(or the same thing translated to erb).

您可以使用Google CDN在应用的head部分添加css主题。只需在％head部分下添加此application.html.haml（或转换为erb的相同内容）。

The css theme

css主题

%link{:href => "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/ui-lightness/jquery-ui.css", :rel => "stylesheet", :type => "text/css"}

If you want the jquery-ui minified.

如果你想让jquery-ui缩小。

%script{:src => "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"}

#3

if you include 'jquery-rails' in Gemfile jquery-ui will be included requiring this in application.js:

如果在Gemfile中包含'jquery-rails'，那么jquery-ui将包含在application.js中：

//= require jquery-ui.min

// =需要jquery-ui.min

if you run in Console: Rails.application.config.assets.paths you will get all paths Rails will look into for assets. In my case for instance:

如果你在Console：Rails.application.config.assets.paths中运行，你将获得Rails将查看资产的所有路径。以我的情况为例：

- /Users/aldo/Satio/Desarrollo/rails/subaquaclub/app/assets/images
- /Users/aldo/Satio/Desarrollo/rails/subaquaclub/app/assets/javascripts
- /Users/aldo/Satio/Desarrollo/rails/subaquaclub/app/assets/stylesheets
- /Users/aldo/Satio/Desarrollo/rails/subaquaclub/vendor/assets/javascripts
- /Users/aldo/Satio/Desarrollo/rails/subaquaclub/vendor/assets/stylesheets
- /Users/aldo/.rvm/gems/ruby-1.9.2-p290@subaquaclub31/gems/jquery-rails-1.0.13/vendor/assets/javascripts

See the last line ? if you check in there you will find jquery-ui so there you go.

看到最后一行？如果你在那里办理登机手续，你会发现jquery-ui所以你去了。

#4

quote from the jquery-rails manual:

引用jquery-rails手册：

In order to use the themed parts of jQuery UI, you will also need to supply your own theme CSS. See jqueryui.com for more information.

为了使用jQuery UI的主题部分，您还需要提供自己的主题CSS。有关更多信息，请参阅jqueryui.com。

So, you have to include or style them yourself! Just include the theme's .css in the header of your page. In Rails 3 you'd put the css in public/stylesheets, don't know for Rails 3.1.

所以，你必须自己包括或设计它们！只需在页面标题中包含主题的.css即可。在Rails 3中，你将css放在公共/样式表中，不知道Rails 3.1。

#5

jquery-rails no longer has jquery-ui as part of its assets. You should use gem 'jquery-ui-rails' for that.

jquery-rails不再将jquery-ui作为其资产的一部分。你应该使用gem'jquery-ui-rails'。

Furthermore, to find out where an asset is coming form in rails you can do the following:

此外，要了解资产在rails中的位置，您可以执行以下操作：

paths = Rails.application.config.assets.paths
for path in paths do
  puts "Found in: #{path}" if Dir.glob("#{path}/*").grep(/jquery-ui/).present?
end

This should make it easy to find the asset.

这样可以轻松找到资产。

#6

Just remember //= require jquery.ui.all needs to be after //= require_tree .

记住// = require jquery.ui.all需要在// = require_tree之后。

Wasted a lot of my time because of this as most of Jquery UI functionalities won't work.

由于大多数Jquery UI功能都无法工作，因此浪费了我很多时间。

#7

denysonique has the answer in this question as pointed out by epochwolf in the comments.

在评论中，epochwolf指出，denysonique在这个问题上有答案。

Rails 3.1 and jquery-ui assets

Rails 3.1和jquery-ui资产

#8

If you have jquery-rails on Gemfile, just do:

如果你在Gemfile上有jquery-rails，那就做：

//= require jquery-ui

要么

//= require jquery-ui.min

both will work fine. If not, try to update jquery-rails gem

两者都会很好。如果没有，请尝试更新jquery-rails gem

Don't forget the css files, here I followed some articles on that other answer: Ruby on Rails 3.1 and jQuery UI images and got it working by this way:

不要忘记css文件，在这里我跟着一些关于其他答案的文章：Ruby on Rails 3.1和jQuery UI图像并通过这种方式使它工作：

*= require jquery-ui/jquery-ui.css

this is the path for files:

这是文件的路径：

vendor/assets/stylesheets/jquery-ui/jquery-ui.css 
vendor/assets/images/jquery-ui/images/ (your theme images)

#1