我是rails的新手,我想在我的rails应用程序中使用Twitter-Bootstrap悬停popover。 我有以下部分:
<div class="field">
<%= f.label :first_name, {:class => 'label'}%>
<%= f.text_field :first_name ,{:class => 'span3',}%>
</div>
如果用户将鼠标悬停在:first_name
标签上,则会显示一条消息,告诉他某事。但我不知道在我的应用程序中放置内容,如js文件引用或函数。
我试过这个example并将javascript_include_tag
放在layout / application.html.erb
但似乎我不知道如何让它发挥作用。所以我需要有关如何使用它的详细说明。
答案 0 :(得分:6)
您可以使用several * Rails * Bootstrap *项目来集成Bootstrap。
如果您希望手动执行此操作,可以选择将文件(包括您要使用的所有插件,在您的情况下为bootstrap-tooltip.js
和bootstrap-popover.js
)放入{{1}并将它们包含在/vendor/assets/javascripts
中,如此:
application.js
对//= require bootstrap-min.js
//= require bootstrap-tooltip.js
//= require bootstrap-popover.js
CSS文件执行相同操作,方法是将其放入bootstrap.css
并将其包含在/vendor/assets/stylesheets
中,方法是在/app/assets/stylesheets/application.css
下添加以下一行:
*= require_self
我个人更喜欢使用完整的*= require bootstrap
文件而不是缩小的bootstrap.css
,因为我偶尔会想要浏览源代码。无论哪种方式,当您部署到生产环境时,Rails会通过资产管道自动缩小CSS。
加载Bootstrap后,您可以使用以下代码段来初始化您选择的元素上的popover插件:
bootstrap-min
您可以将上述代码段放在$('.label-with-popover').popover(placement: 'right') # Note: 'right' is default
的底部,但推荐的方法是将其放在与您正在使用的脚手架相对应的.coffee文件中,例如application.js
最后..
users.js.coffee
答案 1 :(得分:4)
我使用类似的东西添加了一个popover助手:
module PopoverHelper
def popover(model_name, attribute)
i18n_base = "simple_form.popovers.#{model_name.downcase}.#{attribute}"
content_tag(:i, '', class: "icon-question-sign",
id: "#{attribute}_help",
title: I18n.t("#{i18n_base}.title"),
data: {
# don't use popover as it conflicts with the actual pop-over thingy
pop_over: true,
content: I18n.t("#{i18n_base}.text")
})
end
end
在您的视图中,您可以运行js:
$("[data-pop-over]").popover({placement: 'right'});
与你的助手一起:
= popover(:model, :attribute)
这是为了你已经加载了引导程序以及jquery。如果您愿意,可以使用硬编码文本对i18n进行分析。