2016-07-28 148 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