no-image

JavaScript

チェックボックスをアニメーショントグルにする「jquery-simpletoggler」

jquery-simpletogglerは、デフォルトのチェックボックスをアニメーショントグルにすることができるjQueryプラグインです。アニメーション付きのトグルスイッチなので、オン・オフを切り替える時にとてもわかりやすいですね。

jquery-simpletoggler

jquery-simpletoggler

デモではシンプルなトグルスイッチが2つ設置されています。どちらも、スイッチをクリックすることで簡単にオン・オフ切り替えることが可能です。シンプルな操作性とアニメーションで、現在オンになっているかオフになっているかを認識しやすいのがいいですね。

サイズもコンパクトなので、余計なスペースを必要とせず、いろんなところに設置できると思います。また、この手のスイッチはパソコンだけではなくスマホやタブレットなどモバイルでも操作しやすいので、さまざまなところで活用できますね。

labelOn: "On",
labelOff: "Off"

使用するWebページに合わせて、最適なラベルを設定できます。というわけで、デフォルトのチェックボックスをアニメーショントグルにできるjQueryプラグイン「jquery-simpletoggler」の紹介でした。

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

ビューポートやコンテナ幅をベースに異なるサイズの画像を読み込める「jQuery Responsive Image Plugin」次のページno-image

関連記事

  1. FModal.JS

    JavaScript

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

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

  2. Cavendish.js

    JavaScript

    CSS transitionsを活用したシンプルなスライドショーを実装できるjQueryプラグイン「…

    CSS transitionsを活用したシンプルなスライドショーを実装…

  3. Letter Drop

    JavaScript

    雨のように文字が落ちてくるアニメーションのjQueryプラグイン「Letter Drop」

    Letter DropというjQueryプラグインを使えば、雨のように…

  4. gridslide.js

    JavaScript

    いろんな方向に画像をスライドできるjQueryイメージスライダー「gridslide.js」

    gridslide.jsはいろんな方向に画像をスライドさせることができ…

  5. paroller.js

    JavaScript

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

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

  6. BookBlock Revised

最近の記事

  1. 梅
  2. CAR-HLD12BK
  3. OWL-LPB6701LA

アーカイブ

PAGE TOP