【Rails & JavaScript】トグルスイッチでボタンの切り替え

Zennの投稿機能でもおなじみ、トグルスイッチの作り方です！
以下のようにオンオフでボタンを切り替えられるようにします。

トグルスイッチの作り方

トグルスイッチの作成

まずはトグルスイッチを作る。

• html

html

<div class="toggle_switch">
  <input type="checkbox" id="postTypeToggle" class="toggle_input">
  <label for="postTypeToggle" class="toggle_label"></label>
</div>

• css

css

/* トグル要素をテーブルとして表示することで、内部要素を水平に配置 */
.toggle_switch {
  display: table;
}

/* インプット要素を非表示に */
.toggle_switch > input {
  display: none;
}

/* トグルラベルのスタイル */
.toggle_label {
  display: block;
  position: relative;
  width: 3em;
  height: 1.5em;
  border-radius: 1.5em;
  background-color: #ccc;
  cursor: pointer; /* クリック可能なカーソルに */
}

/* トグルがオンのときの背景色 */
.toggle_switch > input:checked + .toggle_label {
  background-color: #BDDF38; /* お好みで！ */
}

/* トグルボタンのデザイン */
.toggle_label::before {
  position: absolute;
  top: 0.25em;
  left: 0.25em;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background-color: #fff;
  transition: 0.3s; /* アニメーションの速さ */
  content: ""; /* スイッチの背景 */
}

/* トグルがオンのときのボタン位置 */
.toggle_switch > input:checked + .toggle_label::before {
  left: calc(100% - 1.25em);
}

これで完成！

ボタンの作成

右側のボタンも付け加えます。

html

+ <%= form_with model: @post, local: true do |f| %>
   <div class="toggle_switch">
     <input type="checkbox" id="postTypeToggle" class="toggle_input">
     <label for="postTypeToggle" class="toggle_label"></label>
   </div>
+ <div class="btn-group" role="group" id="buttonGroup">
+    <%= f.submit '下書き保存', id: 'draftButton', name: 'draft', class: "draft-btn" %>
+    <%= f.submit '公開する', id: 'postButton', name: 'post', class: "submit-btn" %>
+  </div>
+ <% end %>

ボタンのcssはお好みで。bootstrapのボタンでももちろんOK!
コントローラや他のView部分も適切な記載にしてくださいね！

JavaScriptの追加

トグルスイッチでボタンの切り替えをしたいのでJavaScriptで切り替えられるようにします。
今回はscriptタグでhtmlに追記する形で作成します。

html

<script>
$(document).ready(function() {
  // ボタンの要素を生成
  var draftButton = $('<%= f.submit "下書き保存", id: "draftButton", name: "draft", class: "draft-btn" %>');
  var postButton = $('<%= f.submit "公開する", id: "postButton", name: "post", class: "submit-btn" %>');

  // トグルスイッチの変更イベント
  $('#postTypeToggle').change(function() {
    var isChecked = $(this).is(':checked');
    var buttonGroup = $('#buttonGroup');

    buttonGroup.empty(); // 既存のボタンを削除

    // トグルがオンかオフかによって適切なボタンを切り替え
    if (isChecked) {
      buttonGroup.append(postButton); // on
    } else {
      buttonGroup.append(draftButton); // off
    }
  });

  // 初期設定：トグルの状態に応じたボタンを表示
  $('#postTypeToggle').change();
});
</script>

まとめ

以上でトグルスイッチでボタンの切り替えができるようになりました！
もっと簡単な書き方等あれば気軽にコメントいただければ幸いです。
こういう動きがあるものを作ると実装も楽しいし、UXやUIも向上しますよね♪