Switchery

JavaScript

チェックボックスをiOS7のようなスタイルにしてくれるjQueryプラグイン「Switchery」

SwitcheryというjQueryプラグインを使えば、チェックボックス(checkbox)をiOS7のようなスタイルに実装することができます。動作も似ているのでネイティブアプリのような雰囲気を出したい時によさそうですね。

[ads_center]

Switcheryの使い方

こんな感じのチェックボックスを実装できます。

Switchery

デフォルトの設定は以下。オプションを設定することで変更可能です。

defaults = {
    color          : '#64bd63'
  , secondaryColor : '#dfdfdf'
  , className      : 'switchery'
  , disabled       : false
  , disabledOpacity: 0.5
  , speed          : '0.1s'
}

モバイルでも使いやすいチェックボックスを実装したい時に覚えておきたいですね。

Switchery – iOS 7 style switches for your checkboxes

Unicorn.jsホバーするとテキストがレインボーに光るjQueryプラグイン「Unicorn.js」前のページ

上下にスクロールでコンテンツが開閉するjQueryプラグイン「Slinky.js」次のページSlinky.js

関連記事

  1. stackgrid.adem.js

    JavaScript

    コンテンツをグリッド状にスタッキングできる「stackgrid.adem.js」

    stackgrid.adem.jsはコンテンツをグリッド状にスタッキン…

  2. no-image

    JavaScript

    シンプルでスタイリッシュなjQueryスライダー「Simple slider」

    Simple sliderはシンプルでスタイリッシュなスライダー(カル…

  3. Filterizr

    JavaScript

    ソートやシャッフルができるギャラリーを実装するjQueryプラグイン「Filterizr」

    Filterizrはソートやシャッフルができるレスポンシブに対応したギ…

  4. Trunk.js

    JavaScript

    滑らかなスライド表示がいい!レスポンシブなナビゲーションメニュー「Trunk.js」

    Trunk.jsはレスポンシブに対応したナビゲーションメニューを実装す…

  5. no-image

    JavaScript

    高性能なイメージビューアを実装できる「PhotoViewer」

    PhotoViewerは高性能なイメージビューアを実装できるJSプラグ…

  6. simplePagination.js

最近の記事

  1. オータムスイートポテトフラペチーノ
  2. 紅葉
  3. ナノケア EH-NA0E
  4. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP