Jak używać Twitter-Bootstrap unosić popover z Railsami

Question

Jestem nowicjuszem z szynami, chcę użyć popover Bootstrap w mojej aplikacji rails. Mam następującą część:

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

Jeżeli użytkownik aktywowanych na etykiecie :first_name komunikat pojawiają mówi mu coś. Ale nie wiem, gdzie umieścić rzeczy w mojej aplikacji, takie jak odniesienie do plików js lub funkcja.

Próbowałem to example i umieścić javascript_include_tag w układzie/application.html.erb

Ale wydaje się, że nie wiem, jak się działa. Potrzebuję więc szczegółowego opisu, jak z niego korzystać.

Answer 1

Istnieje several * Rails * Bootstrap * projektów, których można użyć do integracji Bootstrap.

Jeśli wolisz zrobić to ręcznie, jedną z opcji jest, aby umieszczać pliki (w tym jakichkolwiek wtyczek, które chcesz użyć, który w danym przypadku byłby bootstrap-tooltip.js i bootstrap-popover.js) do /vendor/assets/javascripts i uwzględnić je przy application.js tak:

//= require bootstrap-min.js 
//= require bootstrap-tooltip.js 
//= require bootstrap-popover.js 

Zrób to samo z plikiem bootstrap.css CSS przez upuszczenie go do /vendor/assets/stylesheets i włączenie go w /app/assets/stylesheets/application.css dodając ten wiersz poniżej *= require_self:

*= require bootstrap 

Ja osobiście wolę używać pełnego pliku bootstrap.css zamiast zminiaturyzowanego bootstrap-min, ponieważ czasami chcę przeglądać źródło. Tak czy inaczej, po wdrożeniu do produkcji, CSS zostanie minifikowany przez Railsy automatycznie poprzez potok zasobów.

---

Po Bootstrap załadowany, można użyć następującego fragmentu zainicjować wtyczki popover na elemencie swojego wyboru:

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

można umieścić powyższy fragment na dole application.js ale zalecanym sposobem jest umieszczenie go w pliku, który jest odpowiedni .coffee do rusztowania, na którym pracujemy, na przykład users.js.coffee

i wreszcie ..

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

    ... 

Answer 2

dodałem pomocnika popover używając coś takiego:

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 

Państwa zdaniem można uruchomić JS:

$("[data-pop-over]").popover({placement: 'right'}); 

Wraz ze swoim pomocnikiem:

= popover(:model, :attribute) 

Jest pod warunkiem, że masz już załadowany bootstrap oraz jquery. Jeśli chcesz, możesz wyodrębnić i18n z tekstem zakodowanym na stałe.