Cách sử dụng cửa sổ bật lên Twitter-Bootstrap với Rails

Question

Tôi là người mới sử dụng đường ray, tôi muốn sử dụng cửa sổ bật lên di chuột Twitter-Bootstrap trong ứng dụng đường ray của mình. Tôi có phần sau:

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

Nếu di chuột sử dụng trên nhãn :first_name, một thông báo xuất hiện nói với anh điều gì đó. Nhưng tôi không biết đặt những thứ trong ứng dụng của tôi như tham chiếu tệp js hoặc hàm.

tôi đã cố gắng example này và đặt javascript_include_tag trong cách bố trí/application.html.erb

Nhưng dường như tôi không biết làm thế nào để có được nó hoạt động. Vì vậy, tôi cần một mô tả chi tiết về cách sử dụng nó.

Answer 1

Có several * Rails * Bootstrap * các dự án mà bạn có thể sử dụng để tích hợp Bootstrap.

Nếu bạn muốn làm điều đó bằng tay, một lựa chọn là đặt các tập tin (bao gồm bất kỳ plugin bạn muốn sử dụng, mà trong trường hợp của bạn sẽ là bootstrap-tooltip.js và bootstrap-popover.js) vào /vendor/assets/javascripts và bao gồm chúng trong bạn application.js như vậy:

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

làm tương tự với các tập tin bootstrap.css CSS bằng cách thả nó vào /vendor/assets/stylesheets và bao gồm nó trong /app/assets/stylesheets/application.css bằng cách thêm dòng này dưới *= require_self:

*= require bootstrap 

Cá nhân tôi thích sử dụng tệp đầy đủ bootstrap.css thay vì số bootstrap-min được rút ngắn vì đôi khi tôi muốn duyệt nguồn. Dù bằng cách nào, khi bạn triển khai sang sản xuất, CSS sẽ được tự động rút gọn thông qua đường dẫn nội dung.

---

Một khi bạn đã Bootstrap nạp, bạn có thể sử dụng đoạn mã sau để khởi tạo các plugin popover trên các yếu tố của sự lựa chọn của bạn:

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

Bạn có thể đặt đoạn mã ở trên ở dưới cùng của bạn application.js nhưng cách được đề nghị là đặt nó trong file .coffee đó là tương ứng với đoạn đầu đài bạn đang làm việc với, ví dụ users.js.coffee

Và cuối cùng ..

01.

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

    ... 

Answer 2

Tôi đã thêm một helper popover sử dụng một cái gì đó như:

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 

Theo quan điểm của bạn, bạn có thể chạy các js:

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

Cùng với helper của bạn:

= popover(:model, :attribute) 

Đây là miễn là bạn có bootstrap đã được nạp cũng như jquery. Bạn có thể loại bỏ i18n bằng văn bản được mã hóa cứng nếu muốn.