no-image

JavaScript

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

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

jquery-simpletoggler

jquery-simpletoggler

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

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

labelOn: "On",
labelOff: "Off"

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

関連記事

  1. JavaScript

    レスポンシブで横スクロールやキーボード操作も可能なjQueryギャラリー「Portfoliojs」

    ポートフォリオなどでとても素敵なイメージギャラリーを実装することができ…

  2. JavaScript

    多層に重なり合う美しいグラデーションの背景を実装できるjQueryプラグイン「SHARDS」

    多層に重なり合う美しいグラデーションの背景を実装できるjQueryプラ…

  3. jQuery Resizable Columns

    JavaScript

    テーブルの列の幅をドラッグでサイズ変更できる「jQuery Resizable Columns」

    じっくりテーブル内の情報を見たい時なんかに便利そうですね。テーブルの列…

  4. Owl Carousel 2

    JavaScript

    美しいレスポンシブなカルーセルスライダーを実装できる「Owl Carousel 2」

    Owl Carousel 2は、美しいレスポンシブなカルーセルスライダ…

  5. LuminJS

    JavaScript

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

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

  6. Lena.js

    JavaScript

    多彩な画像処理ができるJSライブラリ「Lena.js」

    Lena.jsは多彩な画像処理を行うことができるJSライブラリです。セ…

最近の記事

  1. レンズペン3 ミニプロとレンズペン ELITE マイクロプロ
  2. カメラマングローブ Grip Hot Shot III
  3. 包(つつむ)巾着ポーチ
  4. KMC-80BK

Instagram始めました

Facebookページ

PAGE TOP