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

    JavaScript

    スマホやタブレットのスワイプにも対応したLightboxを実装できるjQueryプラグイン「Swip…

    今後かなり需要がありそうなjQueryプラグインがあったので使い方も兼…

  2. MenuSpy

    JavaScript

    セクションビュー対応のナビゲーションメニュー実装「MenuSpy」

    MenuSpyは、ナビゲーションメニューを作成するためのjsライブラリ…

  3. Fancy Input

    JavaScript

    かっこいいエフェクトのテキスト入力を実装できる「Fancy Input」

    Fancy Inputは、かっこいいエフェクトを備えたテキスト入力を実…

  4. no-image

    JavaScript

    スタイリッシュなスライダーを実装できるjQueryプラグイン「bsc-slider」

    bsc-sliderは、シンプルでスタイリッシュなスライダーを実装する…

  5. 2013年上半期jQueryプラグインまとめ

    JavaScript

    当ブログで今まで紹介したjQueryプラグイン25選のまとめ 2011/09 – 201…

    2011年9月〜2012年3月までに当ブログで紹介したjQueryプラ…

  6. 3D Cube CountDown script

最近の記事

  1. フィールグッドシャワー
  2. RP-PB055
  3. ESD-EFシリーズ

アーカイブ

PAGE TOP