bootstrapでcheckboxをtoggleにする

8481 ワード
Rails bootstrap4 JavaScript JavaScript テキストリンク

就活のために個人アプリを使っている中で、bootstrapを使っていて、性別の登録をbootstrapのtoggleボタンにしたら面白そうだと思ってやってみました。
忘れないようにメモにしておこうと思って残しておきます。

環境

Rails 5.2.3
bootstrap4

留意点

bootstrapはbootstrap-railsで導入。
cssとhtmlとJSはそれぞれscssとhamlとjQueryで記述。

コード

Bootstrap Toggleを使うために

application.html.haml
%link{:href => "https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css", :rel => "stylesheet"}
%script{:src => "https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"}

表示方法(2パターン)

1. JSも使う場合(こっちは正常に動く)

new.html.haml
= f.check_box :gender, { :checked => "checked", id: "sign_up-toggle" }, "男性", "女性"
toggle.js
$(document).on('turbolinks:load', function() {
  $(function() {
    $('#sign_up-toggle').bootstrapToggle({
      on: '男性',
      off: '女性',
      offstyle: 'danger',
      width: '150',
    });
  });
});

2. hamlだけで表示する場合(こっちはリロードしないと表示されない)

new.html.haml
= f.check_box :gender, { :checked => "checked", "data-toggle" => "toggle", "data-on"=> "男性", "data-off"=> "女性", "data-offstyle"=> "danger", "data-width" => "150" }, "男性", "女性"

form_forで登録しているので、f.check_boxの書き方にしています。
gender　が登録するカラム。
"男性", "女性"がそれぞれチェックがON, OFFの時に登録される値。
{}の中身の解説についてはあとでまとめて記載します。
ざっくり言ってしまえば、{}の中身をjsに記載するか、hamlに直接書くかの違いでしょうか。
なぜか、2. のやり方だとリロードしないと使えないです。
どなたか教えていただけたら助かります。

{}の中身について

パターン1の方で説明します。

new.html.haml
= f.check_box :gender, { :checked => "checked", id: "sign_up-toggle" }, "男性", "女性"
toggle.js
$(document).on('turbolinks:load', function() {
  $(function() {
    $('#sign_up-toggle').bootstrapToggle({
      on: '男性',
      off: '女性',
      offstyle: 'danger',
      width: '150',
    });
  });
});

・sign_up-toggleはtoggleを設定するcheckboxに付与するidです。
jsではここをイベントの発火点にしています。
・checked => "checked"　は初期状態がチェック(ON)されている状態にします。
今回だとON：男性、OFF:女性で、ページを表示した時に男性が選ばれている状態です。
・on ONの時のボックスのテキスト
・off OFFの時のボックスのテキスト
・offstyle　OFFの時のスタイル、デフォルトではdefault
・width　　ボタンの幅

そのほかにもオプションを色々と設定できるみたいなので参考サイトを見てみてください。

注意点
オプションについては、jsで書くときとhtmlで書くときで少し異なります。

  • js
    • on
    • off
  • haml
    • data-on
    • data-off

htmlの方に「data-」が頭に付くと思ってください。

実行結果

こんなかんじになります。
データベースに値も保存できるので色々なことに使えそうです。

参考サイト

Bootstrap Toggle