Как использовать всплывающее окно Twitter-Bootstrap с Rails

Я новичок в рельсах, я хочу использовать всплывающее окно Twitter-Bootstrap в своем приложении rails. У меня есть следующая часть:

<div class="field">
    <%= f.label :first_name, {:class => 'label'}%>&nbsp;
    <%= f.text_field :first_name ,{:class => 'span3',}%>
</div>

Если пользователь наведет курсор на метку :first_name, появится сообщение, сообщающее ему что-то. Но я не знаю, куда поместить такие вещи в моем приложении, как ссылку на файлы js или функцию.

Я попробовал этот пример и поместил javascript_include_tag в layout/ приложение.html.erb

Но кажется, что я не знаю, как заставить его работать. Поэтому мне нужно подробное описание того, как его использовать.


ruby-on-rails twitter-bootstrap
person Daisy    schedule 21.03.2012    source источник
comment
Какую версию Rails вы используете?   -  person Marco    schedule 21.03.2012

Ответы (2)


arrow_upward
7
arrow_downward

Существует несколько* Rails* Bootstrap* проекты который вы можете использовать для интеграции Bootstrap.

Если вы предпочитаете делать это вручную, один из вариантов — поместить файлы (включая любые плагины, которые вы хотите использовать, в вашем случае это будут bootstrap-tooltip.js и bootstrap-popover.js) в /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 вместо уменьшенного bootstrap-min, потому что иногда мне нужно просмотреть исходный код. В любом случае, при развертывании в рабочей среде CSS будет автоматически минимизирован Rails через конвейер ресурсов.

После того, как вы загрузили Bootstrap, вы можете использовать следующий фрагмент для инициализации всплывающего плагина для элемента по вашему выбору:

$('.label-with-popover').popover(placement: 'right') # Note: 'right' is default

Вы можете разместить приведенный выше фрагмент в нижней части application.js, но рекомендуется поместить его в файл .coffee, соответствующий скаффолду, с которым вы работаете, например users.js.coffee.

И наконец..

  <label class="label-with-popover"
         data-content="popover content"
         data-title="popover title">

  ...
person Marco    schedule 21.03.2012
comment
Спасибо, я не понял этих строк: сделайте то же самое с файлом CSS, перетащив его в /vendor/assets/stylesheets и включив в application.css через *= require bootstrap - person Daisy; 21.03.2012
comment
и куда мне поместить это` $('.label-with-popover').popover(placement: 'right')` - person Daisy; 21.03.2012
comment
Я отредактировал сообщение, чтобы уточнить инструкции. Дайте мне знать, если у вас есть еще вопросы; Всего несколько месяцев назад я все еще изучал, где должны находиться вещи такого рода, поэтому я с любовью вспоминаю об этом. - person Marco; 22.03.2012
comment
Спасибо, я следовал каждому шагу, но это не работает, и не знаю почему?? - person Daisy; 22.03.2012
comment
Проверьте, отображаются ли включенные теги в сгенерированном источнике. Если это так, проверьте, открыв файлы, пути должны выглядеть так: http://0.0.0.0:3000/assets/bootstrap-popover.js (в качестве альтернативы используйте Chrome Inspector, чтобы проверить, загружаются ли все необходимые файлы. - person Marco; 22.03.2012
comment
Извините за беспокойство. Файлы появляются при открытии их из пути. Но мне интересно, где класс label-with-popover, я могу найти его в файле css?? Также вы имеете в виду, что я должен включить теги java_script_include для bootstrap-tooltip.js, bootstrap-popover.js и bootstrap.css в тег заголовка layout/application.html.erb. - person Daisy; 22.03.2012
comment
Имя класса может быть каким угодно, это всего лишь селектор jQuery. Глядя на опубликованный вами фрагмент, вы можете изменить его на .label или использовать пример @Chris Barretto и использовать $("[data-pop-over]") - person Marco; 22.03.2012
comment
хорошо, я понял, но вы имеете в виду, что я должен включить теги java_script_include bootstrap-tooltip.js, bootstrap-popover.js и bootstrap.css в тег заголовка layout/application.html.erb. - person Daisy; 22.03.2012
comment
Если все файлы JavaScript открываются из пути, то вам не о чем беспокоиться, т.е. они загружаются правильно. Вам не нужно отдельно включать файлы начальной загрузки в application.html.erb, потому что вы уже указали их в application.js. Преимущество этого способа заключается в том, что вы используете Rails Asset Pipeline, который будет объединять и минимизировать ваш JavaScript при развертывании вашего проекта. - person Marco; 22.03.2012
comment
Если вы хотите поделиться своим Gtalk или Skype, я могу помочь вам в чате. Похоже, ваши файлы загружаются, поэтому я не совсем уверен, в чем проблема, но консоль Chrome JavaScript очень полезна для таких вещей. - person Marco; 22.03.2012
comment
в rails 4, ruby ​​2.0.0 он работает с этим кодом '$([data-pop-over]).popover({placement: 'right'});' Генерирует ошибку с '('.label-with-popover').popover(размещение: 'право');' - person G.B; 26.02.2014

arrow_upward
4
arrow_downward

Я добавил всплывающий помощник, используя что-то вроде:

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 жестко закодированным текстом, если хотите.

person Chris Barretto    schedule 21.03.2012