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. share-this

    JavaScript

    テキストを選択してシェアできるMediumライクな「share-this」

    share-thisはテキストを選択して手軽にTwitterやFace…

  2. jQuery Elastic Grid
  3. jQuery Lighter

    JavaScript

    優雅なフェードで拡大縮小されるLightbox系ギャラリー・jQuery Lighter

    jQuery Lighterは美しいフェードで画像を拡大縮小させること…

  4. jQuery touchSwipe Carousel
  5. FocusPoint

    JavaScript

    画像の指定した部分を中心にレスポンシブ化できるjQueryプラグイン「FocusPoint」

    FocusPointというjQueryプラグインを使えば、画像の指定し…

  6. Freewall

    JavaScript

    レスポンシブ対応のグリッドレイアウトを実装できるjQueryプラグイン「Freewall」

    FreewallというjQueryプラグインを使えばレスポンシブに対応…

最近の記事

  1. タリーズ ハムチーズ&サラダサンド
  2. クリニカのY字タイプのフロス
  3. 日和山公園の桜
  4. 成城石井 フレンチロースト
  5. COMOLI カシミアシルクニットパーカ

アーカイブ

PAGE TOP