实现引导程序切换开关 [英] Implementing Bootstrap Toggle Switch

问题描述

我正在尝试实现来自 http://www.bootstraptoggle.com/ 的切换开关.>

gem 'rails-bootstrap-toggle-buttons'

<块引用><块引用>

捆绑

//= 需要 jquery//= 需要 jquery_ujs//= 需要推特/引导程序//= 需要引导程序切换按钮//= 需要涡轮链接//= require_tree .

和

 *= 需要 bootstrap-toggle-buttons*= require_tree .*= require_self*/

查看:

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

只是给了我一个简单的复选框.关于为什么这不起作用的任何线索?

解决方案

首先:您希望拥有来自 http 的切换开关://www.bootstraptoggle.com/ 但从我看到的 rails-bootstrap-toggle-buttons gem 似乎包含来自 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();//假设复选框具有toggle"类});

注意 page:change 事件，除了 ready 事件之外，Turbolinks 会触发该事件.

I am trying to implement toggle switches from http://www.bootstraptoggle.com/.

gem 'rails-bootstrap-toggle-buttons'

bundle

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

and

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

view:

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

Is just giving me a plain checkbox. Any clues on why this would not be working?

解决方案

First: you wanted to have the toggle switches from http://www.bootstraptoggle.com/ but from what I see the rails-bootstrap-toggle-buttons gem seems to contain the toggle switches from http://www.bootstrap-switch.org/. This could have been your issue since the latter does not support initialization via the HTML data-toggle attribute.

Since I also wanted to use the former library due to performance issues with the latter and did not find a gem which shipped it through the asset pipeline I created one: bootstrap-toggle-rails. You can find the documentation in the README.

But: the data-toggle initialization method also didn't work for me in combination with Turbolinks, but you can make it work by just initializing it manually with JavaScript and skip the data-toggle attribute and e.g. add a toggle class:

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

Note the page:change event, which is fired by Turbolinks, in addition to the ready event.

这篇关于实现引导程序切换开关的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！