Picker

JavaScript

iOSのようなピッカーを実装できるJSライブラリ「Picker」

Pickerは、iOSのUIのようなピッカーを実装することができるJSライブラリです。選択画面のアイテムリストはとても滑らかに動作します。特にスマホやタブレットからの操作は快適です。

複数の列にも対応

デモ

デモページでは、各項目をクリックするとアイテムを選択する画面が下からスライドで表示されます。選択画面の領域以外の場所にはオーバーレイがかかるので、アイテムを選択することに集中しやすいです。

スマホからの場合は、タッチに対応しているのでアイテムも直感的に上下に動かすことができます。パソコンからの場合はドラッグしながら上下にアイテムを動かすことが可能です。

任意のアイテムを選択したら、選択画面の右上にある「確定」をクリックすればOKです。キャンセルする場合は左上にある「取消」を選択します。

シンプルなデザイン&レイアウトで動作もとても滑らかなので、特にスマホやタブレットでは直感的に操作できると思います。

オプションには、options.title (String)、options.data (Array)、options.selectedIndex (Array)が用意されているほか、picker.change、picker.select、picker.cancel、picker.valuechangeといったイベントのセッティングなども可能です。

また、選択する列も単一だけではなく複数の列にも対応しています。カスタマイズ性にも優れているiOSライクなピッカーを実装したいという人は、ぜひ「Picker」をチェックしてみてください。

Picker

Complexifyパスワードの強さを視覚的にフィードバックしてくれる「Complexify」前のページ

オシャレなスクロールエフェクトを実装できる「jQuery Smoove」次のページno-image

関連記事

  1. JavaScript

    立体的なナビゲーション表示を実装することができるjQueryプラグイン「Box Lid」

    立体的なナビゲーション表示を実装できるjQueryプラグイン「Box …

  2. no-image
  3. no-image

    JavaScript

    シンプルでカスタマイズも簡単なパララックスエフェクト実装「parlx.js」

    parlx.jsはシンプルでカスタマイズも簡単なパララックスエフェクト…

  4. Parazoom

    JavaScript

    クールに拡大・チルトする画像ズーム「Parazoom」

    Parazoomはクールに拡大・チルトする画像ズーム機能を実装できるj…

  5. jQuery.GI.TheWall.js
  6. jQuery Panelize Plugin

最近の記事

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

アーカイブ

PAGE TOP