2016-07-28 150 views
0

我试图在我的Rails项目上使用bootstrap-switch-rails,但是我无法使其工作。我一直在跟随this tutorial
这是我到目前为止所尝试的。Bootstrap-switch-rails gem无法正常工作

添加这在我的Gemfile

gem 'bootstrap-switch-rails', '~> 3.0.0' 

添加了这个在我app/assets/stylesheets/custom.scss

@import "bootstrap"; 
@import "bootstrap3-switch"; 
@import "bootstrap-sprockets"; 

/* Rest of the file omitted */ 

顶部这是我application.js

//= require jquery 
//= require jquery_ujs 
//= require turbolinks 
//= require bootstrap 
//= require bootstrap-switch 
//= require_tree . 

application.css

/* 
* This is a manifest file that'll be compiled into application.css, which will include all the files 
* listed below. 
* 
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, 
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path. 
* 
* You're free to add application-wide styles to this file and they'll appear at the bottom of the 
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS 
* files in this directory. Styles in this file should be added after the last require_* statement. 
* It is generally better to create a new file per style scope. 
* 
*= require_tree . 
*= require_self 
*/ 
*= require bootstrap-switch3 

最后,在这里我想用开关形式:

<% content_for :head do %> 
    <script type="text/javascript"> 
    $(function() { 
    $("input:checkbox").bootstrapSwitch(); 
    }); 
    </script> 
<% end %> 

<div class="row"> 
    <div class="col-md-6 col-md-offset-3"> 
    <%= form_for(@consultant) do |f| %> 
     <%= render 'consultants/consultant_error_messages' %> 

     <%= f.label :identifier %> 
     <%= f.text_field :identifier, class: 'form-control' %> 

     <%= f.label :email %> 
     <%= f.email_field :email, class: 'form-control' %> 

     <%= f.label :first_name %> 
     <%= f.text_field :first_name, class: 'form-control' %> 

     <%= f.label :last_name %> 
     <%= f.text_field :last_name, class: 'form-control' %> 

     <%= f.label :disabled, "Habilitar/Deshabilitar" %> 
     <%= f.check_box :disabled, :data => { 
     :size=>'small', 'on-color'=>'success', 'on-text'=>'Habilitar', 'off-text'=>'Deshabilitar' 
     } %> 

     <%= f.submit "Guardar", class: "btn btn-primary" %> 
    <% end %> 
    </div> 
</div> 

复选框被显示为普通复选框,而不是一个开关。
关于我应该丢失什么的任何想法?
在此先感谢。

+0

尝试'需要bootstrap3-之开关只能在application.css从** custom.scss删除** – Shrikant1712

+0

谢谢,但它没有奏效 – jmm

回答

0

尝试更换require bootstrap-switch3require bootstrap3-switchapplication.css

也可以尝试在控制台执行$("input:checkbox").bootstrapSwitch();查看输出。

另一位用户解决问题编写HTML,而不是使用的Rails生成的一个:rails 4 : change state issue with Bootstrap Switch