no-image

JavaScript

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

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

jquery-simpletoggler

jquery-simpletoggler

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

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

labelOn: "On",
labelOff: "Off"

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

関連記事

  1. Tagify

    JavaScript

    Vanilla JSを用いた軽量のタグ入力機能を実装できる「Tagify」

    TagifyはVanilla JSを用いた軽量のタグ入力機能を実装でき…

  2. star-rating-svg

    JavaScript

    カスタマイズ性に優れたレーティング(星評価)実装「star-rating-svg」

    star-rating-svgは、SVGを使用したカスタマイズ性に優れ…

  3. photowall

    JavaScript

    Google画像検索のようにサムネイル画像をクリックするとスライド表示されるjQueryプラグイン「…

    Google画像検索のようなアニメーションを実装することができるjQu…

  4. jQuery Gridly

    JavaScript

    クリックしてその場で拡大したりドラッグで配置を入れ替えたりできるプラグイン「jQuery Gridl…

    おもしろいjQueryプラグインがあったのでご紹介します。クリックして…

  5. Accessible Dialog

    JavaScript

    ナビゲーションメニューをモーダルダイアログで表示する「Accessible Dialog」

    Accessible Dialogは、ナビゲーションメニューをモーダル…

  6. infoBox

    JavaScript

    マウスオーバーでインフォメーションボックスを表示させる「infoBox」

    infoBoxはアイコンにマウスオーバーするとインフォメーションボック…

最近の記事

  1. ワンタッチ着脱フィルターキット
  2. Soundcore Ace A1
  3. cheero USB-C PD Charger 60W
  4. DY-S01

アーカイブ

PAGE TOP