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

関連記事

  1. stroll.js

    JavaScript

    CSS3を使った豊富なスクロールエフェクト「stroll.js」

    stroll.jsはCSS3を使った豊富なCSSリストスクロールエフェ…

  2. jquery.stepper.js

    JavaScript

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

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

  3. TV Credits

    JavaScript

    垂直・水平方向に滑らかに流れていくティッカーを実装できるjQueryプラグイン「TV Credits…

    TV Creditsは垂直方向や水平方向に流れていくティッカーを実装す…

  4. FModal.JS

    JavaScript

    シンプルなフルスクリーンのモーダルウィンドウ「FModal.JS」

    FModal.JSはシンプルなフルスクリーンのモーダルウィンドウを実装…

  5. JavaScript

    JavaScriptの基本構文を忘れた!って時にサクっと見たい10項目

    最近はよくjQueryプラグインを使ったりすることが多くなってきたので…

  6. Tilt Hover Effects

    JavaScript

    ホバーによるチルトエフェクトを実装できる「Tilt Hover Effects」

    指定したアイテムにホバーすることでオシャレなチルトエフェクトを実装する…

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP