no-image

JavaScript

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

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

jquery-simpletoggler

jquery-simpletoggler

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

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

labelOn: "On",
labelOff: "Off"

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

関連記事

  1. Bricklayer

    JavaScript

    軽量なグリッドレイアウトを実装できる「Bricklayer」

    Bricklayerは軽量なグリッドレイアウトを実装することができるラ…

  2. NO IMAGE

    JavaScript

    フェード、スライド、水平、垂直などカスタマイズ性の高いスライダー「Prrple Slider」

    Prrple Sliderはフェードアニメーションやスライド、ループ、…

  3. jQueryTween

    JavaScript

    軽量で軽快なアニメーションをするjQueryプラグイン「jQueryTween」

    jQueryTweenは軽量で軽快なアニメーションを実装することができ…

  4. JavaScript

    JavaScriptの関数のスコープについてちょっと確認してみる

    JavaScriptの関数のスコープを確認、整理する意味で記事にしてみ…

  5. JavaScript

    レスポンシブ対応で画像やテキストも自由にスライドできるjQueryスライダー「Responsly.j…

    スマホにも対応したレスポンシブのjQueryスライダー「Respons…

  6. Custom jQuery Lightbox

    JavaScript

    デザインや使い方がシンプルな「Custom jQuery Lightbox」

    Custom jQuery Lightboxはデザインや使い方がシンプ…

最近の記事

  1. スタンスミス(EDIFICE/IENA別注)
  2. WI-1000XM2
  3. mill オイルヒーター
  4. Anker PowerWave 10 Pad & Stand セット

アーカイブ

PAGE TOP