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. nuContextMenu

    JavaScript

    モダンなコンテキストメニューを実装できる「nuContextMenu」

    nuContextMenuはモダンで軽量なコンテキストメニューを実装で…

  2. jquery-backToTop

    JavaScript

    カスタマイズ性に優れたトップへ戻るボタンを実装できる「jquery-backToTop」

    jquery-backToTopはカスタマイズ性に優れた「トップへ戻る…

  3. no-image

    JavaScript

    画像の遅延読み込みを実装できる軽量のJavaScriptプラグイン「justlazy.js」

    justlazy.jsは画像の遅延読み込みを実装することができるJav…

  4. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでオブジェクトの型を取得して判定などをしたい場合はjQuery.type()を使う

    jQuery.type(obj)を使えばオブジェクトの型を知ることがで…

  5. mFancyTitle

    JavaScript

    ブラウザのタブにあるファビコンとタイトルをアニメーション化できる「mFancyTitle」

    mFancyTitleは、ブラウザのタブに表示されているファビコンとタ…

  6. Vague.js

    JavaScript

    要素をぼかすことができるjQueryプラグイン「Vague.js」

    要素をぼかすことができるjQueryプラグイン「Vague.js」が面…

最近の記事

  1. 田沢湖
  2. ゴムの耳栓
  3. ライオンコーヒー(バニラマカダミア)
PAGE TOP