實施Bootstrap撥動開關

Question

我正在嘗試從http://www.bootstraptoggle.com/實現切換開關。

gem'rails-bootstrap-toggle-buttons'

束

//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require bootstrap-toggle-buttons
//= require turbolinks
//= require_tree .

和

 *= require bootstrap-toggle-buttons
 *= require_tree .
 *= require_self
 */

視圖：

<%= f.check_box :email_notifications, :'data-toggle'=>"toggle" %>

只是給我一個簡單的復選框。 關於為什么這行不通的任何線索？

Answer 1

首先：您想從http://www.bootstraptoggle.com/獲得撥動開關，但是從我看到的結果來看， rails-bootstrap-toggle-buttons寶石似乎包含來自http：//www.bootstrap-switch的撥動開關.org / 。 這可能是您的問題，因為后者不支持通過HTML data-toggle屬性進行初始化。

由於由於后者的性能問題，我還想使用前一個庫，並且沒有找到通過資產管道運送它的gem，因此我創建了一個： bootstrap-toggle-rails 。 您可以在README中找到文檔。

但是： data-toggle初始化方法與Turbolinks結合使用對我也不起作用，但是您可以通過僅使用JavaScript手動對其進行初始化並跳過data-toggle屬性並例如添加一個toggle類來使其工作：

$(document).on('ready page:change', function() {
  $('input[type="checkbox"].toggle').bootstrapToggle(); // assumes the checkboxes have the class "toggle"
});

請注意page:change事件，除了ready事件外，它還由Turbolinks觸發。

Answer 2

如果您使用> Rails 4和> Ruby 1.9

<%= f.check_box :email_notifications, :data => { :toggle => 'toggle' } %>

確保正確生成了HTML。

<!-- Something like this -->
<input type="checkbox" name="email_notifications" data-toggle="toggle">

然后檢查JavaScript控制台以確保沒有錯誤。

Answer 3

如果您想添加樣式，可以簡單地執行以下操作：

<%= f.check_box :subscribed_to_news, data: { toggle: 'toggle', style: 'ios' } %>