Switch

JavaScript

iOSスタイルのシンプルなチェックボックスを実装できる「Switch」

Switchは、シンプルでパワフルなiOSスタイルのチェックボックスを実装することができるスクリプトです。直感的で簡単にオン・オフの切り替えができるほか、サイズやカラーの変更など、ちょっとしたカスタマイズもしやすいのがいいですね。使い方もわかりやすくて、手軽にiOS風のチェックボックスを自サイトに取り入れたいという方にはピッタリです。

Switchについて

デモ

オン・オフ切り替え時のアニメーションがとても滑らかで、気持ち良く切り替えせますね。

サイズの変更は、small、default、largeのなかから設定できます。また、デフォルトの状態をオンにしたり、オフにしたりすることも可能です。

チェックボックスの上には、テキストを表示させることもできます。例えば、オンのときは「O」を、オフのときには「X」を表示させる、といった感じです。こちらはshowTextをtrueに指定した上で、設定できます。

ほかにも、API(on、off、toggle、disable、enable)、Destroy、Removeなど、いろいろカスタマイズする上で役立つ項目が用意されているので、気になる方はぜひチェックしてみてはいかがでしょうか。

というわけで、シンプルで使い勝手がいいiOSライクのチェックボックスを実装できるSwitchのご紹介でした。

Switch

flatpickr超軽量で使い方もカンタンな日付ピッカー「flatpickr」前のページ

スクロールに合わせていろんなアニメーションで表示できる「AOS」次のページAOS

関連記事

  1. ScrollPress

    JavaScript

    スムーズなアニメーションのスクロールトップ実装「ScrollPress」

    ScrollPressは、スムーズなアニメーションによるスクロールトッ…

  2. paroller.js

    JavaScript

    垂直・水平の動きに対応したパララックス効果を実装できる「paroller.js」

    paroller.jsは垂直・水平方向の動きに対応したパララックス効果…

  3. iziModal

    JavaScript

    エレガント・レスポンシブ・フレキシブルでそのうえ軽量なモーダルウィンドウ「iziModal」

    iziModalはエレガント・レスポンシブ・フレキシブルなモーダルウィ…

  4. Skitter

    JavaScript

    豊富なアニメーションでカスタマイズ性に優れたスライドショーを実装できる「Skitter」

    Skitterは豊富なアニメーションでカスタマイズ性に優れたスライドシ…

  5. PIGNOSE-ParallaxSlider
  6. GridTab

    JavaScript

    グリッドベースのレスポンシブなタブを実装できるjQueryプラグイン「GridTab」

    GridTabはグリッドベースによるレスポンシブに対応したタブを実装す…

最近の記事

  1. ダミアン・ハースト 桜
  2. パッキングエリア
  3. あらびきソーセージパイ
  4. REACH フロス
PAGE TOP