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. Ace Responsive Menu
  2. floatThead

    JavaScript

    テーブルのヘッダーを固定できるjQueryプラグイン「floatThead」

    floatTheadはテーブルのヘッダーを固定することができるjQue…

  3. jQuery Hero Slider Plugin
  4. jQueryプラグインのスライダー集

    JavaScript

    【jQueryプラグイン】素晴らしい機能が満載のスライダー集

    jQueryプラグインには様々な役立つ機能がありますが、中でも人気が高…

  5. Tendina

    JavaScript

    簡単で素早くドロップダウンメニューを実装できるjQueryプラグイン「Tendina」

    TendinaというjQueryプラグインを使えば、とても簡単で素早く…

  6. Reframe.js

    JavaScript

    特定の要素をレスポンシブ化してくれる「Reframe.js」

    Reframe.jsはレスポンシブに対応していない特定の要素をレスポン…

最近の記事

  1. VS-543AS
  2. タリーズ 本日のコーヒー
  3. MRW-G1
  4. 桜と太陽

アーカイブ

PAGE TOP