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. humane.js

    JavaScript

    シンプルでモダンなさりげない通知システムを実装できる「humane.js」

    humane.jsはフレームワークなどに依存しないシンプルでモダンな通…

  2. jquery.stepper.js

    JavaScript

    マウス操作で値の増減ができるjQueryプラグイン「jquery.stepper.js」

    jquery.stepper.jsは、マウス操作から手軽に値の増減を行…

  3. Text Scramble Effect

    JavaScript

    テキストをスクランブルしながら表示していく「Text Scramble Effect」

    Text Scramble Effectはテキストをカシャカシャとスク…

  4. LuminJS

    JavaScript

    テキストを徐々にハイライトしていく「LuminJS」

    LuminJSはWebページ上のテキストを徐々にハイライトしていくJa…

  5. JavaScript

    軽量(5KB)で機能も色々あるjQueryのスライダー「MobilySlider」を使ってみる

    軽量なんですが、色々と機能もあるいい感じのjQueryプラグイン「Mo…

  6. underline.js

    JavaScript

    遊び心あるアニメーションと美しさを追求したアンダーライン「underline.js」

    underline.jsはアニメーションが付いた美しいアンダーラインを…

最近の記事

  1. スタバ ドリップコーヒー
  2. エチオピア
  3. 紗々 飴色和栗
  4. DCG-CA21
  5. Apple WatchでのMacロック解除を無効

アーカイブ

PAGE TOP